Developing TV Apps with React-TV

TVs usually have limited graphics acceleration, single core CPUs and high memory usage for a common TV App. These restrictions make super responsive 60fps experiences especially tricky. React-TV is an ecosystem for React Applications on TVs. Includes a Renderer and a CLI tool for building applications. Focused on be a better tool for building and …

Do we need a new heading element? We don’t know.

Great insightful post by Jake Archibald on the generic <h> element, which could act as a replacement for the current set of <h1>, <h2>, <h3>, … I always thought this to be a good case, as it’d would allow you to move components around in the DOM, and the “importance” of the heading would be …

PanelKit 2.0

Version 2.0 of the aforementioned PanelKit. PanelKit is a UI framework that enables panels on iOS. A panel can be presented in the following ways: Modally As a popover Floating (drag the panel around) Pinned (either left or right) This framework does all the heavy lifting for dragging panels, pinning them and even moving/resizing them …

Cancel a JavaScript Promise with AbortController

In How to Cancel Your Promise Seva Zaikov has done a nice writeup exploring several attempts on how to cancel promises. After also touching generators and async/await the conclusion is that you can’t actually cancel a promise with the techniques mentioned (you may introduce some workarounds to track the cancelled state yourself, yet that won’t …

Design Systems and CSS Grid

Stuart Robson uses CSS Grid for what it’s meant to be used for: creating a grid. He evens creates a faux subgrid by leveraging calc() to define the two margin-columns. .container { grid-template-columns: [full-start] minmax(calc(calc(100% – 1008px) / 2), 1fr) [main-start] repeat(14, [col-start] 1fr) [main-end] minmax(calc(calc(100% – 1008px) / 2), 1fr) [full-end]; } Add in …

Parcel: A blazing fast, zero configuration web application bundler

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 …

Ready Player One Trailer

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 …

JavaScript’s setTimeout “other” arguments

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

Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior

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 …