Editor's Pick
CSS
Fine, I’ll Use a Super Basic CSS Processing Setup
These days I try to use just CSS. But there are still growing pains as a single CSS file gets bigger. The length of the file can get annoying. The odd CSS property or value that still needs prefixing. The desire to use some new CSS feature that would be easier with a sprinkle of processing.
Github repo here.
Border images in CSS: A key focus area for Interop 2023
In Interop 2023, CSS border images were identified as a key focus area. This feature, which lets you use images for styling an element's border, has been supported in browsers for many years. However, behavioral differences across browsers (as highlighted in this web-platform issue) have led to some reluctance among web developers to fully use this feature. With the inclusion of border images in Interop 2023, there is a renewed commitment for resolving the behavioral differences and encouraging widespread adoption. This initiative highlights the importance of being able to create visually appealing web designs that are consistent across different browsers.
JavaScript
fibonacci-clock: A responsive HTML5 Fibonacci clock
This is a responsive HTML5 version of Philippe Chrétien's Fibonacci clock written in TypeScript and featuring an exact minutes count.
The size of each square corresponds to its value. In order to tell time, you need to combine these values with color codes that correspond to the hour, minutes, or both. Then you have to multiply the minutes value by 5.
Live demo here.
The await event horizon in JavaScript
There is a boundary around every black hole where the velocity required to escape its gravitational pull exceeds the speed of light. Once anything, including light itself, passes over that threshold, it is trapped inside the mysterious interior of the black hole forever. There is no escape, and there is no return back to the rest of the universe. This boundary is called the black hole’s event horizon.
A similar boundary exists around every JavaScript Promise, and once the flow of execution crosses over it, there is no way to forcibly escape and return back from whence it came. I refer to this boundary as the Promise’s await event horizon.
Google Earth as glTF models
A little web app to demonstrate (1) how to fetch 3D Tiles from the Google Photorealistic API and (2) how to correctly normalize & rotate the glTF tiles, or combine a set of them into one glTF that can be rendered in any standard engine.
ScrollyVideo.js
Responsive scrollable videos without obscure video encoding requirements. Compatible with React, Svelte, Vue, and plain HTML.
This kind of scrolling video is common in visual journalism, marketing materials, or other scrollytelling applications.
Vue 2 is Approaching End Of Life
With 2024 almost upon us, we would like to take this opportunity to remind the Vue community that Vue 2 will reach End of Life (EOL) on December 31st, 2023.
Vue 2.0 was released more than 7 years ago in 2016. It was a major milestone in Vue's journey of becoming a mainstream framework. Many current Vue users started using Vue during the Vue 2 era, and many great things have been built with it.
However, active maintenance of two major versions in parallel isn't sustainable for us. As Vue 3 and its ecosystem have matured, it is time for the team to move on and focus our energy on the latest major version.
Announcing Effection 3.0 -- Structured Concurrency and Effects for JavaScript
A library to help developers write code that can easily manage the most complex concurrent computations whether in the frontend or backend. It provides the guarantees of Structured Concurrency in order to make code leak-proof by default, and it achieves this while being simple to read, understand, and maintain.
HTML Injection Quick Reference
This reference isn’t about how to exploit XSS vulns. It’s about how to find XSS vulns and refine the syntax needed to make a payload successfully execute.
The reference is about a methodology for finding HTML injection vulns and wrapping payloads in just the right characters to avoid JavaScript warnings or errors. Good exploits take advantage of HTML syntax or use browser quirks in creative ways.
TS Docs - Reference docs for npm packages
Browse type reference documentation for Javascript packages.
It works even with packages that aren't written in Typescript (sourced from DefinitelyTyped) or when packages re-export types from other packages.
Its depends heavily on a customized version of typedoc for generating API docs documentation.
Introducing Catalyst: A modern UI kit for React - Tailwind CSS
Catalyst is our first fully-componentized, batteries-included application UI kit — real React components with thoughtfully designed APIs that build on each other to create a real component architecture, the same way we’d do it in a real application.
Catalyst v0.1.0 is a development preview and there’s a lot more to come, but we’re releasing it today so you can play with it right away as we continue to build new components and find ways to make it an even better experience.
Live demo here.
UX
Why carousels don't work
In the world of user experience, if everything is deemed important, then effectively nothing is. Carousels, while seemingly convenient, often compromise the clarity and effectiveness of your website. Prioritizing purposeful clarity and intentional user engagement over flashy features significantly enhances the overall effectiveness of the digital experience.
Miscellaneous
Don't be a React Developer
It’s a sad tale when someone has picked a tech stack, and then they can’t find a job to leverage that stack. This is what sucks about seeing the buzzword bingo aspects of resumes. Just keywords without a clarity on the nature of the experience. It’s a pessimistic numbers games being played out.