The Deep Dive #12

ngTemplateOutlet is a powerful tool for creating customizable components. It is used by many Angular libraries to enable users to provide custom templates. This article demonstrates how to use this functionality to make a component completely customizable.

This post explores how a small adjustment can guarantee Good Action Hygiene (GAH), extensible reducers without action subtyping without the typical high code cost of NgRx. It introduces simple NgRx wrappers that make the Reducers adhere to Open/Closed principle and allow using of facades without breaking GAH.

That title has a lot of big scary words. The article first nails down some key terms and basic fundamentals before explaining how you can use action and data streams declaratively to react to user actions. It shows how by leveraging the power of RxJs operators we can transform our data and allow our template to subscribe to the Observable using the Async pipe.

It’s an interesting overview of the current state of Web Platform. It describes major problems for web developers and consumers, like Chrome dominating the market, huge bundle sizes that cause slow loading time and others. It then goes on to speculate on how we can recreate simplicity in the platform again and do that for each of the two sides of the web — documents and apps.

This long-read introduces an alternative approach to React hooks with all the same advantages and none of the problems that hooks brought with them. To explain this alternative, the author walks you through some SPA history and explores existing alternative component interfaces. It uses examples and ideas from Dan Abramov’s article on hooks to compare ideas. It’s an interesting story even for developers not familiar with React.

Responsive design has always been a challenge for web developers. Although the ability to define CSS based on an element width may well be the most requested CSS feature ever, today you can only apply styles based on the viewport size. The article explains how to implement responsive styles based on the container width without waiting for the feature to get into browsers. The suggested approach uses Resize Observer to add classes to elements which are later used as anchors in breakpoints.

Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. With the entire page in memory, it can significantly improve the browsing experience because the browser can quickly and easily restore it if the user decides to return. If not handled correctly, it can cause underreported pageviews in tracking solutions like Google Analytics.