Editor's Pick
Creating a recorder with Document Picture-in-Picture API
This article describes how to leverage the Document Picture-in-Picture API and Insertable Streams to develop a simple screen and camera recorder.
As we are writing this article, the Document Picture-in-Picture API is still in trial phase. You can experiment the API either locally by enabling the flag chrome://flags/#document-picture-in-picture-api or by registering for the origin trial.
CSS
CSS Pattern - Fancy backgrounds with CSS gradients
A collection of background patterns made with CSS gradients by Temani Afif.
Flexible CSS Colors With Custom Properties
Let’s use CSS Custom Properties and calc() to create various CSS color effects, fasten your seatbelt, we’re going from 0 to 100 in 1.5 seconds.
HTML
A Blog Post With Every HTML Element
I don't know what sort of description you want with that title...
JavaScript
Coding the stars - an interactive constellation with Three.js and React Three Fiber
How we built a constellation of stars with Three.js and React Three Fiber.
Creating a recorder with Document Picture-in-Picture API
This article describes how to leverage the Document Picture-in-Picture API and Insertable Streams to develop a simple screen and camera recorder.
As we are writing this article, the Document Picture-in-Picture API is still in trial phase. You can experiment the API either locally by enabling the flag chrome://flags/#document-picture-in-picture-api or by registering for the origin trial.
EasyDropzoneJS - JavaScript library for drag-and-drop files
EasyDropzoneJS is a Javascript library that makes it easy and fast to add drag-and-drop functionality to your website for file upload functionality or other purposes which require having a file select feature. This way you can easily process file uploads inside a traditional form, without the hassle of writing complex JavaScript or CSS code. While the library is in its early stages, it is stable and provides the basic configurations needed to adapt yo your website. Furthermore, the library is easily themable by providing a simple CSS file with the required theme.
flatdraw - a simple canvas drawing web application built using TypeScript, React, and Next.js
Live demo: flatdraw.com
Web Scraping via Javascript Runtime Heap Snapshots
In recent years, the web has gotten very hostile to the lowly web scraper. It's a result of the natural progression of web technologies away from statically rendered pages to dynamic apps built with frameworks like React and CSS-in-JS. Developers no longer need to label their data with class-names or ids - it's only a courtesy to screen readers now.
After a couple of attempts at extracting the data using the usual CSS selector method of web-scraping - that is, fetching the raw HTML or booting up a browser via something like Puppeteer and trying to pick the data embedded in the HTML structure - I was close to admitting defeat. It wasn't until I had an epiphany: the data is inside the web page.
Radix - open-source React component library
Radix an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.
g9 - a javascript library for creating automatically interactive graphics.
With g9, interactive visualization is as easy as visualization that isn't. Just write a function which draws shapes based on data, and g9 will automatically figure out how to manipulate that data when you drag the shapes around.
Be sure to drag all the demo graphics on the site.
Dexie.js - Minimalistic IndexedDB Wrapper
Dexie was written to be straightforward and easy to learn. If you've ever had to work with native IndexedDB then you'll certainly appreciate Dexie's concise API.
Sending UI over APIs
One technique that is changing the way we think about user interfaces (UIs) is sending UIs over APIs, also known as server-driven UIs. This approach offers a new level of dynamism and flexibility that is transforming the traditional paradigms of UI development.
But what exactly are server-driven UIs? How do they work, and why are they becoming so important in modern JavaScript development? This blog post aims to answer these questions and provide an in-depth look at server-driven UIs, their benefits, and how you can implement them in your own projects.
UX
Scrolljacking 101
Scrolling is a basic interaction that enables users to see pixels that span beyond the length of a screen height. Scrolljacking is a relatively recent design trend that involves changing the normal pace or direction of scrolling on a website. In our usability testing, we observed that websites with scrolljacking exhibit significant threats to user control and freedom, discoverability, attention, efficiency, and task success.
Altering the normal pace or direction of scrolling can contradict user expectations, control, and freedom. If businesses adopt the pattern, they can minimize usability risks by weighing it against functional value, cognitive load, and user efficiency.
New 3D environments enhance wayfinding and location awareness
Elevate your map experience with Mapbox Standard, a new and dynamic 3D map style that sets a gold standard for map design and capabilities.
Miscellaneous
Unicorn - a full-stack web framework for Django
Quickly add in simple interactions to regular Django templates without learning a new templating language.
Stop fighting with a new JavaScript build tool and separate process to use yet another frontend framework.
Building a feature-rich API is complicated. Skip creating a bunch of serializers and just use Django.
Content Security Policy (CSP): Everything You Should Know
This is a comprehensive guide to Content Security Policy (CSP). If you build websites for a living, CSP is an important concept to know, understand, and implement to protect your users from Cross-Site Scripting (XSS) Injection attacks. This post covers (almost) everything you need to know about CSP.
FlappyPHPant - Flappy Bird in PHP
A very simple Flappy Bird-like game written in PHP, built on PHP-GLFW and the VISU framework.