Implement FLIP transitions easily with flipping

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 …

NYSKeyboardHelper – A helper for all your iOS keyboard needs

Matthias Nys, a former student of mine, has released his first pod NYSKeyboardHelper, a helper which resizes a scrollview so that it doesn’t go under the keyboard. Add a constraint to your project’s Storyboard and set NYSKeyboardHelper as the custom class, or add it programmatically: let keyboardConstraint = NYSKeyboardHelper(item: self.view, attribute: .bottom, relatedBy: .equal, toItem: …

Learn React Fundamentals and Advanced Patterns

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 …

How Discord Resizes 150 Million Images Every Day with Go and C++

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 …

Network based image loading using the Network Information API in Service Worker

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 →

React Pattern: Centralized PropTypes

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 …

The Roles you Play in Life Determine Your Identity and Behavior

Very interesting read on how the tasks assigned to you – or even better: the tasks you chose to do – have an influence on your life. It all starts with an experiment ran in 1978 by Harvard psychologist Ellen Langer: In 1978, Ellen Langer, a Harvard psychologist, conducted an important study. She gave houseplants …

Frappé Charts

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: …