Editor's Pick
CSS Scroll-triggered Animations with Style Queries
I happened upon a CodePen by Jhey Tompkins that kicked off my curiosity. In that demo, as the page is scrolled, animations are triggered that smoothly highlight passages of text within the copy. It's all powered by CSS. That's incredible! I've achieved this effect in past demos using GSAP ScrollTrigger and the Intersection Observer API. How is this same concept accomplished with only CSS?
Diving into Jhey's code, we find a --highlighted custom property set to 0. Using scroll-driven animations, the value is updated to 1 as the mark element reaches the end of its animation-range. That value is passed into a calc() function that transitions a background-position property to create the highlighting effect.
CSS
CSS Scroll-triggered Animations with Style Queries
I happened upon a CodePen by Jhey Tompkins that kicked off my curiosity. In that demo, as the page is scrolled, animations are triggered that smoothly highlight passages of text within the copy. It's all powered by CSS. That's incredible! I've achieved this effect in past demos using GSAP ScrollTrigger and the Intersection Observer API. How is this same concept accomplished with only CSS?
Diving into Jhey's code, we find a --highlighted custom property set to 0. Using scroll-driven animations, the value is updated to 1 as the mark element reaches the end of its animation-range. That value is passed into a calc() function that transitions a background-position property to create the highlighting effect.
CSS Loaders: A collection of more than 600 loading animations
The Biggest Collection of Loading Animations. Over 600+ CSS-only loaders made using a single element.
JavaScript
Tabulator | JavaScript Tables & Data Grids
Create interactive data tables in seconds with Tabulator. A free, open source, fully featured JavaScript table / data grid generation library.
Why you don't need React
Today, I'm here to talk about React and the frustrations that have emerged in the wake of what seems like a cargo cult. React has grown far beyond its original promise, and it's causing more harm than good to the software engineering industry.
Ariakit - Build accessible web apps with React
Ariakit is an open-source library that provides unstyled, primitive components for building accessible web apps, design systems, and component libraries.
Almost 50% of web pages are infected with Dom-based XSS. Learn How it is exploited
Have you ever wondered how hackers find bugs on websites? What does it take to hunt for bugs and responsibly disclose them? In this article, we will be focusing mainly on a single bug called DOM-based XSS (cross-site scripting), which is found very often on web pages.
A Declarative Front End Framework from Scratch [PDF]
This paper is a report from a personal learning project. In order to practice front end coding skills, a simple front end application was built using TypeScript. The application was developed using a highly declarative style, and without the use of any libraries or frameworks. The application structure is heavily inspired by functional programming. The initial goal was to build a simple to- do application in at most one MTU (1500B), however, this evolved to trying different ideas with regards to front end application structure. Ultimately, I ended up building my own little front end framework.
howler.js - JavaScript audio library for the modern web
howler.js makes working with audio in JavaScript easy and reliable across all platforms.
Tempo - The easiest way to work with dates in JavaScript
Tempo is a new library in a proud tradition of JavaScript date and time libraries. Inspired by the likes of moment.js, day.js, and date-fns, Tempo is built from the ground up to be as small and easy to use as possible — including first-class support for timezone operations.
Tempo is best thought of as a collection of utilities for working with the native Date object — an important distinction from other libraries that provide custom date primitives. Under the hood, Tempo mines JavaScript's Intl.DateTimeFormat to extract complex data like timezones offsets and locale aware date formats, giving you a simple API to format, parse, and manipulate dates.
Introducing SafeTest: A Novel Approach to Front End Testing
In this post, we’re excited to introduce SafeTest, a revolutionary library that offers a fresh perspective on End-To-End (E2E) tests for web-based User Interface (UI) applications.
The main idea is to have a snippet of code in our application bootstrapping stage that injects hooks to run our tests (see the How Safetest Works sections for more info on what this is doing). Note that how this works has no measurable impact on the regular usage of your app since SafeTest leverages lazy loading to dynamically load the tests only when running the tests (in the README example, the tests aren’t in the production bundle at all). Once that’s in place, we can use Playwright to run regular tests, thereby achieving the ideal browser control we want for our tests.
fuzzy-search - a fast, accurate and multilingual fuzzy search library for the frontend
fuzzy-search is a frontend library for searching objects with ids (entities) by their names and features (terms). It is
- Fast: A query takes usually well below 10 ms.
- Accurate: Powered by n-grams with a novel approach of character sorting.
- Multilingual: The language-agnostic design of the algorithm enables operation across all languages.
- Flexible: Entities and their terms can be inserted, updated and removed.
- Reliable: Well tested standalone library with no dependencies.
Nano JSX • Lightweight 1kB JSX library
Nano JSX is designed to build ultra fast MPAs and SPAs using JSX. It uses a different approach than other JSX libraries like React, Preact or Inferno.
Nano JSX is really close to the DOM. There is no Virtual DOM and you can manipulate the DOM as you want. You can even call Nano.render() inside a Component, which then renders some JSX code to manage another part of your app.
You have full control over what the client and what the server renders. All Components are designed to work 100% isomorphic.
Mario Kart 3.js - JavaScript/WebGL Mario Kart
Note: at the time of this writing this is not a completed project, around 50% of the work has been done up to now.
Github here.
UX
Surely dark UX doesn't work in the long run
I clicked "X" in the top corner of the ad. This is where things went sideways.
Instead of dismissing the ad, Feedly shows me a popup/tooltip informing me that the only way to remove "this module" (read: advertisment) is to "Back Feedly directly via Feedly Pro."
Again, I have no problem that Feedly advertises on its free tier, but providing a dismiss button that doesn't work is dark UX. I feel deceived. I'm not going to pay for your service, I'm not going to click on the ad.
Miscellaneous
1x Engineer
You might have already heard of a 10x engineer. Probably too often, actually. If there's such a thing as a 10x engineer, surely there must be a 1x engineer, too?
Oh Shit, Git!?!
Git is hard: screwing up is easy, and figuring out how to fix your mistakes is fucking impossible. Git documentation has this chicken and egg problem where you can't search for how to get yourself out of a mess, unless you already know the name of the thing you need to know about in order to fix your problem.
So here are some bad situations I've gotten myself into, and how I eventually got myself out of them in plain english.