Editor's Pick
React Email
A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.
Note: editor's pick is not a sponsored or paid post in any way.
CSS
Panda CSS - The fastest way to build beautiful websites in React
CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience.
The gotchas of CSS Nesting
I've written before about the problems you can run into with CSS nesting and the question that @ChallengeCSS tweeted out today made me realize there's actually a few more gotcha's.
The Staggering Frontiers of CSS
One thing I’ve always loved about CSS, besides its obvious and immediate effect on a webpage is that it prods, pokes, and questions you over the years. CSS never sits still, not just in terms of small properties and browser quirks that get pushed out over time, but big philosophical things about CSS too.
And since I quit my job last week, I’ve been tryna catch up on all the CSS drama that’s been happening lately. There’s so much news! But here’s a few things that I reckon are gonna change how I make websites in the near future.
Classless.css – Less Classes. Less overhead.
Classless.css is one small CSS file, which defines few but great styles for basic HTML5 tags plus very few classes for grid, cards and spacing. Nothing more. Nothing less. With the basic tag styling, Classless provides a solid appearance for simple article pages without any classes. If you need more fancy features such as grid or cards – which are infeasible with basic HTML5 – we provide a few Bootstrap compatible classes.
Defensive CSS - Introduction to Defensive CSS
Practical CSS and design tips that helps in building future-proof user interfaces.
State of CSS 2023
Depending on how many questions you answer (all questions can be skipped), filling out the survey should take around 10-15 minutes.
The survey's goal is to track the evolution of upcoming features and libraries, and help developers decide which new technologies to focus on.
The survey will run until July 15, 2023, and the survey results will be released in the following weeks.
Fit-to-Width Text
What if I will tell you how we could solve fit-to-width text with pure CSS without any hard-coded parameters? Curiously, scroll-driven animations will allow us to do just that.
luminosity-css
💡 Duo of customizable CSS classes to define a light source location and cast dynamic shadows off elements based on their relative position. Themable and customizable with CSS variables.
Have you ever wanted a website flashlight? Now you have one.
Pines - an Alpine and Tailwind UI Library
Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It's a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects.
Your perfect Dark Mode Favicon
Did you switch to dark mode on some of your devices? Yes? Well, then you are already familiar with the problem: favicons. If they contain dark colors they are invisible. Here you will learn how to fix that
JavaScript
Demystifying React Hooks: Usage, Examples, and Common Mistakes
Unleash the full potential of React Hooks! Discover how to leverage this powerful feature to enhance your React applications with examples and common pitfalls.
Latch - a self-hosted feature flagging tool built on top of Google Storage
It uses Google Storage as the backend for storing flags and subscribes to changes to the flags using Google Pub/Sub.
Building a Design System with React Web Components
What if you could build a universal Design system with React and use it in any web application or framework? We achieved this by compiling React to Web Components. This is how.
BauCss - a CSS in JS library in less than 33 lines of code
BauCss exports 3 functions: css, keyframes, and createGlobalStyles.
This API is the same as other popular css-in-js libraries such as styled-components, emotion and goober. BauCss is framework agnostic and integrates with Bau, React, Preact, SolidJs etc.
React Email
A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.
View360 - 360° panorama image / video viewer built with Typescript
Display your 360 image / video in your website inline. Use View360 with your favorite framework (React, Angular, Vue (Both 2 & 3), Svelte).
The single most important factor that differentiates front-end frameworks
We’ll go directly to the crux of the main problem front-end frameworks set out to solve: change detection, meaning detecting changes to application state so that the UI can be updated accordingly. Change detection is the fundamental feature of front-end frameworks, and the framework authors’ solution to this one problem determines everything else about it: developer experience, user experience, API surface area, community satisfaction and involvement, etc., etc.
And it turns out that examining various frameworks from this perspective will give you all of the information you need to determine the best choice for you and for your users. So let’s dive deep into how each framework tackles change detection.
Adapt - React for your infrastructure.
Create and deploy full‑stack apps to any infrastructure using the power of React.
Stop trying to stitch together shell scripts, YAML files, and crippled template languages to deploy and operate your API endpoints and microservices.
Use React’s declarative JSX syntax, JavaScript components, and a rich component library to build, deploy, and operate your <NodeService> API, connect it to <MongoDB>, or add a <GolangService>.
New features for SvelteKit: Optimize your application with ease
Framework-defined infrastructure at Vercel brings previously Next.js-only features to SvelteKit.
With the release of SvelteKit 1.0, developers can leverage the power of fullstack Svelte without worrying about breaking changes. Furthermore, SvelteKit continues to evolve, offering a robust set of features and seamless integration with various deployment environments, including Vercel.
Vercel, using framework-defined infrastructure (FDI), has embraced SvelteKit, recently adding support for per-route configuration for Serverless and Edge Functions, Incremental Static Regeneration (ISR), and easier compatibility with a range of Vercel products. In this article, we'll explore how to make your apps more performant, scalable, and user friendly.
NestJS v10 is now available
Today I am excited to announce the official release of Nest 10: A progressive Node.js framework for building efficient and enterprise-grade, server-side applications.
RxDB JavaScript Frontend Database - Efficient Data Storage in Frontend Applications
In modern web development, managing data on the frontend has become increasingly important. Storing data in the frontend offers numerous advantages, such as offline accessibility, caching, faster application startup, and improved state management. Traditional SQL databases, although widely used on the server-side, are not always the best fit for frontend applications. This is where RxDB, a frontend JavaScript database, emerges as a powerful solution. In this article, we will explore why storing data in the frontend is beneficial, the limitations of SQL databases in the frontend, and how RxDB addresses these challenges to become an excellent choice for frontend data storage.
The Getting Started with AI Stack for JavaScript
A very simple “getting started with AI” template for those who want to play with core technologies, but not have to think too much about tooling.
AI.JSX - The AI Application Framework for Javascript
AI.JSX is a framework for building AI applications using Javascript and JSX. While AI.JSX is not React, it's designed to look and feel very similar while also integrating seamlessly with React-based projects. With AI.JSX, you don't just use JSX to describe what your UI should look like, you also use it to describe how Large Language Models, such as ChatGPT, should integrate into the rest of your application. The end result is a powerful combination where intelligence can be deeply embedded into the application stack.
SortableJS
JavaScript library for reorderable drag-and-drop lists. Framework support for Vue, React, Angular, jQuery (clutches pearls!), Knockout, Meteor, Polymer, Ember.
MusicKit JS
MusicKit JS lets users play songs from Apple Music and their Cloud Library inside your JavaScript app. When a user provides permission to access their Apple Music account, your JavaScript app can create playlists, add songs to their library, and play any of the millions of songs in the Apple Music catalog directly in a browser, with no additional plugins.
Thoughts on Svelte(Kit), one year and 3 billion requests later
Last year my company, was tasked with the mission of building a news website.
Since the project went live, it has experienced significant audience growth, handling hundreds of thousands of visitors every day. Each visitor navigates and interacts with the pages and their components, resulting in approximately 3 billion requests in the last 12 months.
In this article I will talk about what made me chose Svelte for this project, and what I consider being the good and bad sides of working with both Svelte and SvelteKit.
Announcing Svelte 4
After months in the making, we're excited to announce the stable release of Svelte 4.
Time flies - Svelte 3 was released more than four years ago! In JavaScript-framework-time, that's eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas.
React "prop-drilling"
Having worked with React since the early days, I've seen a lot of ways or writing and structuring components. Whether it's the Component / Container (aka. smart / dumb) pattern, the state-management wars of the late teens, the sprinkling of Contexts everywhere or obviously hooks there's always some debate between teammates about libraries, lint rules or patterns. However, the one thing that's been there, quietly, for a long time now is the term "prop drilling".
Prop drilling is the idea of having to push a prop through a large component tree right down to a node that is many components deep through layers of components that don't care about that prop.
UX
UX Language
A comprehensive set of useful and semi-universal UX copywriting and style guidelines and examples to reference while designing and building products and interfaces.
Introducing scroll-driven-animations.style
The past year I’ve worked together with our engineering team to push Scroll-driven Animations over the finish line. After almost 10 years since the first ideas sprouted, and more than five (!) years in the making to get it into Blink/Chromium, the feature is set to launch in Chrome 115 which will be released to stable this summer.
Silky smooth animations, driven by scroll, running off the main thread … and all that with just a few lines of extra code.
Miscellaneous
CORS Tester - Test a URL for valid CORS headers
Use this little website to test if a URL is setup correctly to work with CORS. The code is also available on GitHub.
Sketch.systems - Explore how your product should work, before building it
Sketch.systems helps software designers think about complex product behavior. Sketch out states, add prototypes, and clarify questions quickly.
WingetUI - A better UI for your package managers
A graphical user interface to install, update, uninstall and manage pakages from the most common package managers for windows, such as Winget, Scoop, Chocolatey, Pip and NPM. Compatible with Windows 10 and Windows 11.
Adobe XD is apparently dead
Was a somewhat popular design tool pre-Figma.
See also: https://stackdiary.com/the-silent-end-of-adobe-xd/
AI: First New UI Paradigm in 60 Years
AI is introducing the third user-interface paradigm in computing history, shifting to a new interaction mechanism where users tell the computer what they want, not how to do it — thus reversing the locus of control.
New W3C website deployed
Today W3C launched its new website, thus ending four months of beta that followed three years of work.
The goals of the redesign were to achieve a cleaner and modern look and greater usability, better accessibility, as well as ultimately simplifying how the site is managed.
Introducing Figma’s New Dev Mode
Dev Mode is like a browser inspector for your design file, and it brings design concepts—shapes, layers, and groups—closer to developer concepts like code, icons, and tokens. By hovering and clicking around the Figma canvas, you can find and export all the information you need, like measurements, specs, and assets, and uncover additional context from your design system.
Git - GUI Clients
Git comes with built-in GUI tools for committing (git-gui) and browsing (gitk), but there are several third-party tools for users looking for platform-specific experience.
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.