Editor's Pick
The Ultimate Low-Quality Image Placeholder Technique
At the time of writing, 99.9% of pages on the web include at least one image. The median image-weight per page landed at 881KB in 2022, which is more than HTML, CSS, JS, and fonts combined! And while images do not block rendering (unless you do something silly), it’s important to consider how we offer a reasonably pleasant experience while users are waiting for images to load. One solution to that problem is Low-Quality Image Placeholders.
CSS
The Ultimate Low-Quality Image Placeholder Technique
At the time of writing, 99.9% of pages on the web include at least one image. The median image-weight per page landed at 881KB in 2022, which is more than HTML, CSS, JS, and fonts combined! And while images do not block rendering (unless you do something silly), it’s important to consider how we offer a reasonably pleasant experience while users are waiting for images to load. One solution to that problem is Low-Quality Image Placeholders.
Grid Garden - A game for learning CSS grid
Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.
JavaScript
To Type or Not to Type? A Systematic Comparison of the Software Quality of JavaScript and TypeScript Applications on GitHub
The analysis indicates that TS apps exhibit significantly better code quality and understandability than JS apps. Contrary to expectations, however, bug proneness and bug resolution time of our TS sample were not significantly lower than for JS: mean bug fix commit ratio was more than 60% larger (0.126 vs. 0.206), and TS projects needed on average more than an additional day to fix bugs (31.86 vs. 33.04 days).
Our results indicate that the perceived positive influence of TypeScript for avoiding bugs in comparison to JavaScript may be more complicated than assumed. While using TS seems to have benefits, it does not automatically lead to less and easier to fix bugs.
Crank.js - The Just JavaScript Framework
Crank is a JavaScript / TypeScript library for building websites and applications. It is a framework where components are defined with plain old functions, including async and generator functions, which yield and return JSX.
A Tetris clone in TypeScript
A tutorial on how to create the game tetris in Typescript using a HTML Canvas element.
Fluid Simulation
On this page, we will build a fluid simulation step by step. The demo is written with GLSL shaders to ensure high performance. However, for learning purposes, we will create a miniature simulation using p5.js.
Miscellaneous
The Indie, Open Source JavaScript Frameworks Developers Love, and the Risks of Commercial Relationships
The frontend community is abuzz about the recently announced partnership between Vercel and Astro. This is not the first highly publicized relationship between an infrastructure platform targeted to frontend developers, and an indie, open source (OSS) Javascript (JS) framework. In addition to Vercel and Astro, Shopify announced its partnership with Remix in 2022, and this framework now forms the basis for Shopify Hydrogen: a “React-based headless toolkit.” But Netlify probably looms largest in this area. At one time Netlify was the leader in supporting OSS JS frameworks, with GatsbyJS, SolidJS, and Eleventy (11ty) under its wing. This generated loads of goodwill in the frontend community. It also advanced these frameworks’ maintainers materially. However, during the recent economic downturn, Netlify began dropping or modifying these relationships—a decision which has resulted in confusion and disappointment. It is this history which is making those of us who follow the JS ecosystem wary. Excellent as the Astro-Vercel partnership is for those involved, developers are rightly anxious about the challenges in the OSS space it brings to light.
Photoshop is now on the web
Enabled by WebAssembly + Emscripten, Web Components + Lit, Service Workers + Workbox & new Web APIs. Chrome & Adobe enjoyed collaborating on it.
Bringing the Photoshop desktop application to the web (photoshop.adobe.com) represents an enormous milestone in bringing highly complex and graphically intensive software to the browser. This was made possible through years of effort by Adobe engineers and collaboration with browser vendors like Chrome to push the web forward.