A rather geeky/technical weblog, est. 2001, by Bramus
Kent C. Dodds – whom you should follow on Twitter – has released two massive video courses on Egghead. Course one touches React Fundamentals: This course is for React newbies and those looking to get a better understanding of React fundamentals. With a focus on React fundamentals, you’ll come out of this course knowing what …
Continue reading “Learn React Fundamentals and Advanced Patterns”
Clever use of a service worker in combination with navigator.connection.effetiveType by Michael Scharnagl. The SW watches all requests for image resources, and rewrites them to high resolution versions in case navigator.connection.effetiveType is fast enough. Network based image loading using the Network Information API in Service Worker →
Cory House: In real apps with large objects, using PropTypes quickly leads to a lot of code. That’s a problem, because in React, you’ll often pass the same object to multiple components. Repeating these details in multiple component files breaks the DRY principle (don’t repeat yourself). Repeating yourself creates a maintenance problem. The solution? Centralize …
GitHub-inspired simple and modern charts for the web with zero dependencies. The typical Github monthly activity map is also possible: import Chart from ‘frappe-charts/dist/frappe-charts.min.esm’; const heatmap = new Chart({ parent: “#heatmap”, type: ‘heatmap’, height: 115, data: heatmap_data, // object with date/timestamp-value pairs start: start_date, // A Date object (default: today’s date in past year) legend_colors: …
Good introduction to using Puppeteer for your e2e tests: One of the most popular tools for e2e testing is Selenium, which is a tool for automating web browsers. Selenium sounds cool in theory: write one set of tests that run on all browsers and devices, woohoo! Jk. In practice, Selenium tests are slow, brittle, and …
Continue reading “End-to-end Tests that Don’t Suck with Puppeteer”
import()”
UPDATE June 2019: This feature has now advanced to Stage-4 and will be part of the ES2020 Specification! 🎉 One of the recent ECMAScript proposals that landed in Chrome 63 is dynamic import(): Dynamic import() introduces a new function-like form of import, which allows one to import on demand. It returns a promise for the …
Continue reading “ESNext: Dynamically import ES modules with “dynamic import()””
Sticky Sidebar ⬆⬇ is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and …
imports with Webpack’s resolve.aliasOne of the things I find annoying when using import in my JS code is the fact that you need to refer to other local files using (relative) paths. Like so: // Without resolve.alias 😭 import Modal from ‘../../../components/objects/modal/modal’; Having a background in PHP – where you have include paths and autoloaders – I essentially …
Continue reading “Easier imports with Webpack’s resolve.alias“