Editor's Pick
JavaScript Gom Jabbar
You have been using JavaScript for 10 years. It’s time for your test. You are sitting in front of a computer. The test is simple: you have to open a package.json file and read it. The package.json is full of pain. You have to read it all.
Note: editor's pick is not a sponsored or paid post in any way.
Accessibility
WAI-ARIA Usage Has Quadrupled Since 2019
ARIA usage continues to increase, but websites with ARIA are more likely to have detectable accessibility issues. Here’s what developers should know.
No, ‘AI’ Will Not Fix Accessibility
We have witnessed accessibility overlay vendors for years claim they are deploying AI technology and still failing users miserably. With their influx of funding and lofty promises, it should be done by now.
Forgetting the snake oil of overlay vendors, consider tools like GitHub Copilot, which claims to be “your AI pair programmer”. These work by leaning on the code of thousands and thousands of projects to build its code auto-complete features.
When you copy broken patterns you get broken patterns. And I assure you, GitHub, Google, Apple, Facebook, Amazon, stacks of libraries and frameworks, piles of projects, and so on, are rife with accessibility barriers.
CSS
High Definition CSS Color Guide
CSS Color 4 brings wide gamut color tools and capabilities to the web: more colors, manipulation functions, and better gradients.
CSS can now support HD (high definition) displays, specifying colors from HD gamuts while also offering color spaces with specializations. This guide will explain how you can start to take advantage of this new world of color.
Learn how to use hue in CSS colors with HSL
Hues are a bright way to define colors in CSS. Learn about hues, color wheels, how to use color functions, and how you can create vibrant color palettes for your website using hue.
Future CSS: State Container Queries
Wait, what? Yes, you heard that right. The Chromium team is experimenting with a new type of query, which is called State Query.
HTML
Forms - W3C Design System
The examples on this page show how we manage forms and their fields. Recommendations are based on Adam Silver's article Form design: from zero to hero all in one blog post and the GOV.UK design system.
JavaScript
anime.js - JavaScript animation engine
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Shifty - the fastest JavaScript animation engine on the web
Shifty is a highly-optimized JavaScript tweening engine designed to fit all of your animation needs. It is a low-level animation library focused on optimal performance and flexibility that can easily be built upon and extended. Shifty's key benefits are: Speed, Flexibility and extensibility, Renderer-agnostic, Promise support.
Shifty is meant to be a lightweight alternative to rich tools like the excellent GreenSock Animation Platform. It is intentionally minimalistic so that you can easily embed it into your projects.
Ember 5.0 Released
EmberJS 5.0 embodies the commitment to stability and reliability that developers have come to expect from the Ember ecosystem. The Ember team has worked hard to remove all the deprecations and make us move towards Polaris. Get up-to-date with the latest in Ember and enjoy!
This post will cover our release strategy, how to upgrade, what to expect, and deprecated APIs that were removed.
Learn to build unique charts with React
This gallery guides you through the basic concepts of data visualization with React and D3.js. It also provides ready-to-use templates to get started quicker.
New strain of JavaScript dropper delivers Bumblebee and IcedID malware
Security pros should take note of the new JavaScript dropper because both Bumblebee and IcedID are known to deliver ransomware.
visx - a collection of expressive, low-level visualization primitives for React
At Airbnb, we made it a goal to unify our visualization stack across the company and in the process, we created a new project that brings together the power of D3 with the joy of React.
If you know React, you can make visualizations. It’s all the same standard APIs and familiar patterns. visx should feel at home in any React codebase.
Component Party (Compare front-end JavaScript frameworks)
Web component JS frameworks overview by their syntax and features: Svelte, React, Vue 3, SolidJS, Qwik, Marko, Angular, Lit, Vue 2, Ember, Alpine, Aurelia 1, Aurelia 2.
~1 out of 3 dev jobs in 2023 require JavaScript or TypeScript knowledge
Since January 2022 to May 2023 (seventeen months), we have found 915K job offers that represents ~29% of the jobs that explicitly required JavaScript or TypeScript as a programming language.
Announcing Stencil v4.0.0
The Stencil team has been hard at work, and we’re excited to announce that Stencil v4.0.0 is now available. We have lots of exciting new features planned for later this year, so to set Stencil up for those, this release contains a few breaking changes. Let’s take a look.
Stencil is a library for building reusable, scalable component libraries. It allows you to generate small, blazing fast Web Components that run everywhere.
The Cost Of JavaScript - 2023
As we build sites that are more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this talk, Addy explains how and why JavaScript is the most expensive resource your site uses today—especially on mobile and lower-end desktops.
Ark UI - Get fully customizable, accessible and unstyled UI components
Ark UI is an open-source UI component library designed to make building high-quality, accessible web applications easier. The library focuses on providing low-level UI components with an emphasis on accessibility, customization, and developer experience.
Vue Email Components
A collection of high-quality, unstyled components for creating beautiful emails using Vue.
NPM registry vulnerable to 'manifest confusion' abuse
Failure to match metadata with packaged files is perfect for supply chain attacks.
HTML smuggling: How malicious actors use JavaScript and HTML to fly under the radar
Learn how malicious actors use JavaScript and HTML to launch effective attacks, and discover simple ways to protect against this elusive loader technique.
React Hook for Avoiding Flash of Empty UI While Data Transitions
Walk through a React hook that avoids the flash of empty UI when old data is cleared and new data is fetching.
Synchronize videos, 3D-models, etc. to Scroll-Driven Animations
With Scroll-Driven Animations it’s really easy to animate elements as they enter/exit/whatever. But what if you want to sync a video to that? Or maybe rotate a 3D-model as you scroll? With a little bit of JavaScript, it’s pretty easy to do so.
React-pdf
React renderer for creating PDF files on the browser and server.
React-pdf exports a set of React primitives that enable you to render things into your document very easily. It also has an API for styling them, using CSS properties and Flexbox layout.
JavaScript Gom Jabbar
You have been using JavaScript for 10 years. It’s time for your test. You are sitting in front of a computer. The test is simple: you have to open a package.json file and read it. The package.json is full of pain. You have to read it all.
UX
Color and Contrast.com
A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.
UX Needs a Sense of Urgency About AI
UX professionals must seize the AI career imperative or become irrelevant. Guidance from a seasoned UX veteran who witnessed the game-changing impact of the dot-com boom.
16 little UI design rules that make a big impact
UI design doesn’t have to be so hard. Over nearly 2 decades working as a product designer, I’ve realised that most of my visual and interaction design decisions are governed by a system of logical rules. Not artistic flair or magical intuition, just simple rules.
Having a system of logical rules helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty.
All the user-facing states
User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which something can be manipulated.
FTC issues illuminating report on digital dark patterns
It’s ironic that the only thing clear about digital dark patterns is the FTC’s commitment to protect consumers from the injury they inflict. A new FTC Staff Report sheds light on the ways that marketers can manipulate people into buying merchandise or giving up personal information through the use of dark patterns – a phrase that describes a broad range of deceptive design elements. If your business is involved in web-based commerce, the Report discusses in detail a number of the practices that raise consumer protection concerns.
Miscellaneous
Arwes - Futuristic Sci-Fi UI Web Framework.
Arwes is a web framework to build user interfaces based on futuristic science fiction designs, animations, and sound effects. The concepts behind are opinionated with influences from Cyberprep and Synthwave, and productions like Star Citizen, Halo, and TRON: Legacy. It tries to inspire advanced science and technology.
The project is under development and not ready for production yet. It is still in alpha release, so the components are being tested and their API may change as it gets completed. Might be a project worth watching if this interests you, though.
History of IKEA.com: Static files and Microfrontends
A few weeks ago, we at Ingka Digital decommissioned IKEA Retail Web (IRW), a monolithic e-commerce system that has been in production for 20 years. IRW has served us very well over the years, but now it was time to say good bye.
We have replaced IRW with a Microfrontends architecture. That’s the modularity aspect of the new architecture. The other aspect is how we deliver HTML: we use static files (ca 40 million of them).
IKEA.com is today developed by 50+ central product teams for 48 countries, where 25 countries have some form of feature development in addition to the central deliveries.
In this blog post I’ll look back on the most important events and concepts, according to me.
A Senior Engineer’s Guide to FAANG Interviews
There are lots of guides out there to FAANG interview processes. This one is the most thorough and the most detailed because it’s the only one made by interviewers for candidates – we spent hundreds of hours talking to dozens of current and former FAANG interviewers about their processes.
This guide will walk you through all the FAANGs’ metaphors and the unwritten codes of those metaphors: what they reward, what they punish, and what they’re blind to.
This guide is written for experienced, back-end engineers, it doesn't cover the differences in process for front-end engineers. That said, if you're a masochist, you’d still probably get value out of this guide.
The best books for becoming a great open source software engineer
Mike McQuaid shares the 5 best books on becoming a great open source software engineer. Without these books, I’d be a worse engineer on many dimensions. Some of them may feel antiquated but all are still full of relevant wisdom for every open-source (and proprietary) software engineer today.
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.