Editor's Pick
Comparing JavaScript Frameworks part 1: templates
In this blog post series I will compare the following JavaScript frameworks: Vue.js, React, Angular, and Svelte.
In part 1 the focus will be on comparing JavaScript framework template languages. The template language of a JavaScript framework is used to define the HTML of the application / website.
You can say that the main reason any of the JavaScript frameworks exists is the following: to make creating dynamic pieces of HTML easier. So the template language it is a rather important part of a framework.
The template languages differ greatly. The question is are they different enough?
Accessibility
Accessibility Has Failed: Try Generative UI = Individualized UX
Traditional methods for accessibility have been tried for 30 years without substantially improving computer usability for disabled users. It’s time for a change, and AI will soon come to the rescue with the ability to generate a different user interface for every user, optimized for that person’s unique needs.
CSS
A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH — Smashing Magazine
In this article, we’ll take a look at the best ways to handle colors in CSS today, some tips for using them in a design system, and what we can expect from our colors in the not-too-distant future.
Mojo CSS · The Atomic CSS Framework for crafting gorgeous UIs without shipping any CSS
Mojo CSS is an atomic CSS Framework that generates CSS based on your HTML in real-time and with near zero-runtime.
It offers the fastest way to create custom, beautiful and responsive layouts without having to write a single line of CSS. A full suite of utilities that helps you get the most performance out of your web pages.
Creating color palettes with the CSS color-mix() function | MDN Blog
Working with colors on the web just got more interesting! In this article, we’ll explore how to use the CSS color-mix() function to create variations in color palettes.
A CSS project boilerplate
For the many folks who ask how I write CSS since removing Sass, this is how I and the Set Studio team do it in 2024.
Making CSS View Transitions Easy with Velvette
Learn how to effortlessly implement smooth CSS view-transitions with Velvette, a useful library designed to tackle common challenges and enhance user experiences in web applications.
ECSS — Simple Rules for efficient CSS
Avoiding common styling problems is simple. And you only need efficient CSS. Nothing more.
ECSS sets simple rules for simple styling. No more naming everything, no more technological dependencies. Only intentional, consistent, simple, expressive, predictable, sustainable CSS.
MistCSS - Write React components using CSS only
A new, better and faster way to write visual components. CSS-in-JS? Nope! JS-from-CSS.
CSS Button Styles You Might Not Know
The one where I demo some lesser-known CSS for stylin’ buttons.
JavaScript
Web Components in Earnest
I’ve previously written about a basic experience with Web Components and not getting it, but I think I get it now. In this (quite long) post, I’m going to go over how I built Ghola, a palette generator for developers. It’s entirely built with custom elements. It has almost no dependencies, runs fast, and was fun to work on.
I used the custom elements API for this. I didn’t use templates, slots, or shadow DOM as they were not needed to achieve my goals (and I am less clear on why or how to properly use them). The style I chose to apply was so-called HTML Web Components where the custom element provides functionality related to the normal elements it contains. My custom elements do not render their own content.
Collecting entropy by human input in the browser using javascript
Some days ago i thought about the usual problems of password generation. One of them being that a generated password always can only be as good as the entropy used to generate it.
While in the past years entropy generators have improved, maybe the one thing that still may be the most unpredictable source is the human itself.
So how about collecting some entropy by observing the user's behaviour?
The idea grew so i ended up creating a proof of concept script which uses javascript to collect entropy by human input/interaction.
Comparing JavaScript Frameworks part 1: templates
In this blog post series I will compare the following JavaScript frameworks: Vue.js, React, Angular, and Svelte.
In part 1 the focus will be on comparing JavaScript framework template languages. The template language of a JavaScript framework is used to define the HTML of the application / website.
You can say that the main reason any of the JavaScript frameworks exists is the following: to make creating dynamic pieces of HTML easier. So the template language it is a rather important part of a framework.
The template languages differ greatly. The question is are they different enough?
WinterJS 1.0 - Announcing WinterJS 1.0, the fastest Javascript web server now also supporting Cloudflare applications and React Server Components
WinterJS is an incredibly fast WinterCG-compatible Javascript runtime written in Rust using the SpiderMonkey engine to execute JavaScript, and Tokio to handle the underlying HTTP requests and JS event loop. WinterJS runtime can also be compiled to WebAssembly, and as such is the first production-grade runtime fully runnable in Wasmer Edge.
Intro to Hyperscript: Rethinking JavaScript
Hyperscript is a newer language for handling common scripting needs on the JavaScript front end. You can use it by itself or in tandem with HTMX.
Miscellaneous
Turn any website into an app with Chrome 124
In Chrome Canary (the daily build version of Google Chrome and typically a couple of versions ahead of the stable build), websites can now be installed on desktops. As part of the latest daily build, Google has added an "Install page as app…" option to the "Save and share" submenu on the desktop version. This makes clicking the app — which is just the website made to look and feel like a native app — always open in its own window.
The quiet, pervasive devaluation of frontend - Josh Collinsworth blog
I keep noticing those of us in the frontend field being treated much the same as nurses, paralegals, and executive assistants. Our work is seen as important, certainly, but just not the same as, or as important as, the “real” work.
Design2Code: How Far Are We From Automating Front-End Engineering?
Generative AI has made rapid advancements in recent years, achieving unprecedented capabilities in multimodal understanding and code generation. This can enable a new paradigm of front-end development, in which multimodal LLMs might directly convert visual designs into code implementations. In this work, we formalize this as a Design2Code task and conduct comprehensive benchmarking. Specifically, we manually curate a benchmark of 484 diverse real-world webpages as test cases and develop a set of automatic evaluation metrics to assess how well current multimodal LLMs can generate the code implementations that directly render into the given reference webpages, given the screenshots as input.
How to lead projects from start to finish as a software engineer
The best engineers don't just know how to code. They know how to lead.
A Guide for Resume Writing and Typesetting
This guide systematically explains the essentials of resume writing and typesetting with special emphasis on typography, helping you to make a resume beautiful in form and spirit. For each topic, it first explains WHAT it is, then WHY it is so, and finally HOW to do it.