Earlier this week Parcel got dropped and it received quite some attention, because it tackles two important things when compared to other bundlers such as Webpack:
The first reason I was motivated to build a new bundler was performance. I’ve worked on some pretty large apps with thousands of modules, and was always disappointed with the speed of existing bundlers. Large apps can take minutes to build, which is especially frustrating during development.
The second reason I built Parcel was to help with the pain of managing configuration. Most other bundlers are built around config files with lots of plugins, and it is not uncommon to see applications with upwards of 500 lines of configuration just to get things working. […] Parcel is designed to need zero configuration: just point it at the entry point of your application, and it does the right thing. Parcel has out of the box support for JS, CSS, HTML, images, file assets, and more — no plugins needed.
From filmmaker Steven Spielberg comes the science fiction action adventure “Ready Player One,” based on Ernest Cline’s bestseller of the same name, which has become a worldwide phenomenon.
The film is set in 2045, with the world on the brink of chaos and collapse. But the people have found salvation in the OASIS, an expansive virtual reality universe created by the brilliant and eccentric James Halliday (Mark Rylance). When Halliday dies, he leaves his immense fortune to the first person to find a digital Easter egg he has hidden somewhere in the OASIS, sparking a contest that grips the entire world. When an unlikely young hero named Wade Watts (Tye Sheridan) decides to join the contest, he is hurled into a breakneck, reality-bending treasure hunt through a fantastical universe of mystery, discovery and danger.
When using setTimeout, it’s not needed to wrap a function with arguments into an anonymous function and call it from there.
What you can do instead is pass the function in via its name (as you would do with a function that has no arguments), and pass in the arguments via the 3rd, 4th, 5th, etc. argument of setTimeout itself:
Learn something new everyday ‼️
Next to dynamic imports, another feature that landed in Chrome 63 is CSS overscroll-behavior:
Scrolling is one of the most fundamental ways to interact with a page, but certain patterns can be tricky to deal with. For example, the browsers pull to refresh feature, where swiping down at the top of the page, does a hard reload.
In some cases, you might want to override that behavior and provide your own experience. That’s what Twitter’s progressive web app does, when you pull down, instead of reloading the whole the page, it simply adds any new tweets to the current view.
The CSS overscroll-behavior property allows you to do just that: override the default scroll behavior. With it you can prevent a full reload when a pull-to-refresh gesture is performed (and inject your own logic), disable rubber banding (no more for need this nasty hack), etc.
Another typical use case is one where you have a scrollable piece of content that is layed out above another scrollable piece of content. The default behavior is that when reaching the scroll boundary of the topmost layer, the layer beneath starts to scroll:
Setting overscroll-behavior: contain; on the topmost layer will prevent this:
Since version 36, overscroll-behavior is also available in Firefox. Other browsers currently don’t support this.
Back in 2015 Paul Lewis published a brilliant article named FLIP your animations, a technique to getting smooth animations on the web.
FLIP stands for First, Last, Invert, Play
First: before anything happens, record the current (i.e., first) position and dimensions of the element that will transition. You can use element.getBoundingClientRect() for this, as will be shown below.
Last: execute the code that causes the transition to instantaneously happen, and record the final (i.e., last) position and dimensions of the element.*
Invert: since the element is in the last position, we want to create the illusion that it’s in the first position, by using transform to modify its position and dimensions. This takes a little math, but it’s not too difficult.
Play: with the element inverted (and pretending to be in the first position), we can move it back to its last position by setting its transform to none.
Using the FLIP technique you can easily create a smooth shared element transition:
import Flipping from 'flipping/adapters/web';
const flipping = new Flipping();
// First: let Flipping read all initial bounds
// execute the change that causes any elements to change bounds
// Last, Invert, Play: the flip() method does it all
Course two touches Advanced React Component Patterns:
The goal of this course is to give you the knowledge of advanced patterns you can use to make React components that are more flexible, simpler, and more fun to build, use, and maintain. We’ll start with a simple <Toggle /> component which we’ll progressively refactor to each of the patterns so you can see the relative trade-offs of the patterns and how they can be used together to increase the usefulness of your component while at the same time simplifying things for everyone.
They’re free (for now), so be sure to check them out any time soon 🙂
Great in-depth writeup on how Discord struggled to resizing lots of images via their Image Proxy Service:
As Discord grew, the Image Proxy started to show signs of strain. The biggest problem was the Image Proxy did not have an even workload distribution, which hampered its throughput. Image proxying requests saw a wide variance of response times, with some taking multiple seconds to complete.
Eventually they created Lilliput, to resize a scale of images and generating first-frame stills of video:
Lilliput relies on mature, high-performance C libraries to do most of the work of decompressing, resizing and compressing images. It aims to do as little memory allocation as possible and especially not to create garbage in Go. As a result, it is suitable for very high throughput image resizing services.
Lilliput supports resizing JPEG, PNG, WEBP and animated GIFs. It can also convert formats. Lilliput also has some support for getting the first frame from MOV and WEBM videos.
Bram.us is the technical/geeky weblog of Bram Van Damme (nicknamed Bramus!), a 33 year old geezer raised in Deinze and living in Vinkt (Belgium) with his son Finn and his daughter Tila.
Professionally — after having worked as a web developer for several years at several web agencies — Bramus became a Lecturer Web Technologies within the study programme Professional Bachelor ICT.
Having worked in education for seven years he switched back to the world of professionals and now runs his own company named 3RDS. Using the 3RDS moniker he tackles both the frontend and the backend. Current focus: React and React Native.
In his spare time Bramus likes to go Scuba Diving. In 2016 he became a certified PADI Master Scuba Diver. Fewer than two percent of divers ever achieve this rating. In 2017 he became a professional diveleader after finishing his PADI Divemaster training.