Editor's Pick
Frameright Image Display Control React Component (responsive images on steroids via Image Regions)
Nowadays images (JPEG, PNG, ...) can contain so-called Image Regions in their metadata like cropping regions or regions of interest. So we've created a React component that responsively displays the "best" cropping region, i.e. the one with the ratio closest to the current <img> element size. If you don't use React we have also built a web component. With this approach you no longer have to worry about whether the size of your assets will match the ratio of their containers on all devices. The displayed image will always make sense and you don't need to maintain a bunch of hard crops anymore.
Note: editor's pick is not a sponsored or paid post in any way.
Accessibility
Should I Use a Button or a Link?
Despite being answered time and time again, the button vs. link question prevails.
CSS
The continuing tragedy of CSS: thoughts from CSS Day 2023
A golden age of CSS was evident in Amsterdam, but to whose benefit? In previous editions, talks focused on proposed features of CSS or ways to work around features that remained painfully absent. This year it felt like the complete opposite was true. Indeed, a common complaint heard in discussions during breaks was that there is now too much CSS.
An introduction to @scope in CSS
There had once been a scoped HTML attribute but it got deprecated. It’s been replaced by @scope in CSS. Browser support is still forthcoming. It’s due to land in Chrome 117. Safari has a positive position on the specification. There are two selling points of @scope: styling based on proximity and setting a lower boundary for a selector.
Modern CSS For Dynamic Component-Based Architecture
Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques.
ui.ibelick - components collections
A unique collection of modern UI components and effects. Crafted with React and Tailwind CSS.
AnimatiSS - a nice collection of CSS animations
AnimatiSS is a tool to preview custom CSS animations and grab their code with a simple click, to paste it into your own web projects.
Blur Vignette effect in CSS
During the last WWDC23 Apple event where Apple Vision Pro was revealed, I've noticed this cool Blur Vignette effect that was applied to the 3D content when it's watched in a headset. And so I've decided to recreate it with pure CSS! The effect is achieved by creating an overlay with backdrop-filter: blur(), and a mask-image that creates the vignette. The mask is a combination of 6 gradients - 4 radial gradients for each corner and 2 linear gradients.
Don’t use custom CSS scrollbars
While a custom CSS scrollbar may seem flashy and fun, consider that it may present a significant, unnecessary barrier to access. Browser UI is used to help create consistency across the entire experience of using a device. When you deviate from these standards, you introduce ambiguity.
JavaScript
Are JavaScript libraries really that bad for performance?
Earlier this week, I posted a video on YouTube about how to create your own personal jQuery, and wrote a text article version of it as well. On YouTube, someone in the comments was very insistent that jQuery has no impact on performance whatsoever. What is it, 30kb? Even at 7Mps it still downloads in just a few milliseconds. You don’t need the latest hardware or superfast broadband to handle it. Today, I wanted to explain why this is wrong.
janitorial-android: LEGO Junkbot remake, with a complete level editor
An HTML5 remake of LEGO Junkbot and Junkbot Undercover games, nearly complete!
million: The Virtual DOM Replacement for React
Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% faster. Million works with React. Million makes creating web apps just as easy (It's just wrapping a React component!), but with faster rendering and loading speeds. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of React.
Say Goodbye to Setters and Getters: Angular’s Transform Option for Input Values
Starting from Angular v16.1.0, a new helpful feature has been introduced to provide an alternative and easy way to transform input values, eliminating the need for using setter and getter methods. The @Input decorator now includes a transform option, which accepts a function that takes the passed input value and returns a new value.
Frameright Image Display Control React Component (responsive images on steroids via Image Regions)
Nowadays images (JPEG, PNG, ...) can contain so-called Image Regions in their metadata like cropping regions or regions of interest. So we've created a React component that responsively displays the "best" cropping region, i.e. the one with the ratio closest to the current <img> element size. If you don't use React we have also built a web component. With this approach you no longer have to worry about whether the size of your assets will match the ratio of their containers on all devices. The displayed image will always make sense and you don't need to maintain a bunch of hard crops anymore.
React-platform-starter - Supercharged React Boilerplate with Atomic UI, Ant Design and Redux Toolkit
Platform Starter is a starter boilerplate for building web applications using React.js, equipped with a powerful set of tools and libraries to streamline development process.
Modularizing React Applications with Established UI Patterns
Learn how to apply established UI patterns for a more organized and maintainable codebase and discover the benefits of layering architecture in React development.
What is Astro? All about the JS framework of all frameworks
Astro is an open-source web framework. It’s focused on performance and content-heavy websites like landing pages, blogs, technical documentation, and more.
Like Next.js, Sveltekit, Nuxt.js, and SolidStart, Astro has its own single-file components (which leverages the island architecture) and handles the build process for you. Let's take a tour of Astro and its features.
Threlte - a Three.js component library for Svelte
Threlte is a renderer and component library for Svelte to build and render three.js scenes declaratively and state-driven in Svelte apps.
It's inspired by the sensible defaults of react-three-fiber, the simplicity and effectiveness of Sveltes reactivity model and Svelte Cubed. It provides strictly typed components to quickly and easily build three.js scenes with deep reactivity and interactivity out-of-the-box. It also aims to provide the building blocks to quickly extend Threlte when it's needed.
Animated pixel sort
It was a little slow to run on my end, but it did sort the pixels. Not the most practical of a link here, but I love experimental stuff like this.
RFC: Angular Built-In Control Flow (heavily inspired by Svelte)
This RFC proposes a new control flow syntax for Angular, and represents a significant change to how we approach control flow in the framework. There are two questions which should be answered up front: why and why now? Let’s start with why.
Making the Resend cube from scratch using Three.js
I have seen the https://resend.com webpage with the amazing looking 3D cube. My brain immediately kicked into gear trying to figure out how they did it.
JavaScript Imports Under The Hood
In order to successfully work with JavaScript or TypeScript these days, there’s a growing need to understand some of the very sophisticated transformations that are happening under the hood between the code that you’re writing and the code that runs in the browser.
In many cases, you can’t tell by looking at the code what is happening. You have to zoom out to the level of your tooling (which varies from one codebase to the next) to understand what transformations and build-time optimizations are happening under the hood. Some imports end up as runtime imports, some compile away, some are bundled, and some...well, who knows.
UX
Top vs side navigation: Which one is better for your product?
When choosing a navigation layout for your app usually you will need to define the position of primary, secondary, and tertiary navigation hierarchy. A research study “A comparison of three-level menu navigation structures for web design” by Jennifer Rose Kingsburg indicated many benefits for having primary navigation on the left side.
Scroll-driven Animations
A bunch of demos and tools to show off Scroll-driven Animations.
The classic way to achieve these kinds of effects is to respond to scroll events on the main thread. This makes creating performant scroll-driven animations that are in-sync with scrolling impossible or very difficult. Thanks to the Scroll-driven Animations specification, you now have access to new APIs and concepts that enable declarative scroll-driven animations that work in conjunction with the existing Web Animations API (WAAPI) and CSS Animations API.
Miscellaneous
Unpopular opinion! Too much "fear of looking dumb"
HTMX creator shares his (potentially) unpopular opinion on the "Go Time" podcast.
SiteBud CMS
SiteBud Content Management System, designed for NextJS, is a streamlined solution offering a database-free platform. It ensures full ownership of content, comprehensive version history, and cost-effective operations.
4,000 Free + Open Source Icons
The Helvetica of icons. 4,000 free & Open Source icons for UI Design, built on a tiny 14px grid, for maximum legibility. Crafted by the Streamline team, 8 icon designers with more than 10 years experience.
Comic Mono
I don't want to judge you, but here's a legible monospace font if you want to spice things up in your IDE.
Enhance
Enhance is an HTML-first full-stack web framework that gives you everything you need to build standards-based multi-page web apps that perform and scale.
Great web design here - this is what I really miss about the web nowadays (real personality in the design).
How to Work Remotely While Camping – 7 Things Nobody Tells You
Learn from my mistakes working while camping. Become better prepared to be productive while work camping so you can enjoy the outdoors.
As an outdoor nut living in the new WFH world, I can't be the only one who has wanted to give this a go. I was surprised to see he wasn't using Starlink for internet, I wonder if power is the issue there or he's just always where there is cell service (so not going crazy with backcountry camping).
Resend - Email for developers
The best API to reach humans instead of spam folders. Build, test, and deliver transactional emails at scale.
First-class developer experience. We are a team of engineers who love building tools for other engineers. Our goal is to create the email platform we've always wished we had.
Are you a Software Engineer or a Framework Implementor?
A Framework Implementor is a person who relies excessively on a framework for their projects. It’s working with a framework day in day out, restricted by the APIs and features exposed by the framework. They have a high-resistance to alternative methods of achieving the same goal and are generally dismissive of them.
People talk about improving as a software engineer and then continue to make the same kind of web applications using the framework they are comfortable in. If you really want to improve as an engineer then go do some crazy shit. Something which is outside what you do at your job.
W3C advances technology to streamline payment authentication
The World Wide Web Consortium today announced a standardization milestone for a new browser capability that helps to streamline user authentication and enhance payment security during Web checkout. Secure Payment Confirmation (SPC) enables merchants, banks, payment service providers, card networks, and others to lower the friction of strong customer authentication (SCA), and produce cryptographic evidence of user consent, both important aspects of regulatory requirements such as the Payment Services Directive (PSD2) in Europe.
If you think your network would find Hexawow useful, please share it with them. The whole point of Hexawow is sharing useful information to help grow your front-end career.
Want to share a front-end article you've found? Get in touch, on Twitter @hexawow or directly at hexawow.news@gmail.com.