994 private links
Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.
Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.
Here are some of the best techniques for keeping email addresses hidden from spammers—along with the statistics on how likely they are to be broken.
Ideally, you should be using multiple techniques in combination. For example, you could divide the email address into two segments, each protected with a different technique.
[Via Human Coders News]
Details that make interfaces feel better
Great interfaces rarely come from a single thing. It's usually a collection of small things that compound into a great experience. Below are a few small details I use to make my interfaces feel better.
- Text wrapping
- Concentric border radius
- Animate icons contextually
- Make text crispy
- Use tabular numbers
- Make your animations interruptible
- Split and stagger entering elements
- Make exit animations subtle
- Align optically, not geometrically
- Use shadows instead of borders
- Add outline to images
- Make interfaces feel better skill
- More
- Newsletter
In 2015, back when Twitter was still Twitter, their dev team had a problem.
In those early days, tweets could be “favourited” by clicking a little “⭐” icon. The product team wanted to migrate to “liking” tweets, Facebook-style, with a “❤️”.
This looks super nice, but there’s kind of a lot going on in there; by my count, there are 16 separate elements all animating at the same time (14 particles, the popping circle, the heart). Twitter’s web app needed to run on very low-end mobile devices, so it wasn’t feasible to create this procedurally using DOM nodes. Instead, they decided to borrow a technique from video games: sprites.
The basic idea with a sprite is that we create a single image that contains each individual frame of an animation in a long strip. Then, we display each frame for a fraction of a second, like a roll of film sliding through an oldschool film projector:
In this blog post, I’ll show you the best way I’ve found to work with sprites in CSS, and share some of the use cases I’ve discovered. We’ll also talk about some of the trade-offs, to see when we shouldn’t use sprites.
TL;DR: In this post, I present five techniques related to vertical scrolling used in
<HighTable>, a React component that can display billions of rows in a table while keeping good performance and accessibility.It's a long post, which reflects the complexity of rendering billions of rows in a table, and the amount of work we put into building the React component.
Pendant plus d'une décennie, nous avons traité le Web comme une collection d'affiches statiques imprimées sur du papier : une pour mobile, une pour tablette, une pour desktop. Mais le Web n'est pas une série de tailles d'écrans fixes. C'est un fluide continu.
Bienvenue dans l'ère de l'Intrinsic Web Design (ou Design Intrinsèque), un terme introduit par Jen Simmons en 2018 où le contenu dicte la mise en page, et non l'inverse. L'objectif est de créer des composants qui s'adaptent à leur contexte, qu'ils soient dans une sidebar réduite ou dans un header très large.
The PDF library TypeScript deserves
Parse, modify, sign, and generate PDFs with a modern TypeScript API.
The only library with incremental saves that preserve digital signatures.
It's very common to intentionally break up long, expensive tasks over multiple ticks of the event loop. But there are sure are a lot of approaches to choose from. Let's explore them.
It's not hard to bork your site's user experience by letting a long, expensive task hog the main thread. No matter how complex an application becomes, the event loop can still do only one thing at a time. If any of your code is squatting on it, everything else is on standby, and it usually doesn't take long for your users to notice.
Bruno's Home
Welcome!
My name is Bruno Simon, and I'm a creative developer (mostly for the web).
This is my portfolio. Please drive around to learn more about me and discover the many secrets of this world.
And don't break anything!
Behind the scene
Thank you for visiting my portfolio!
If you are curious about the stack and how I built it, here’s everything you need to know.Three.js
Three.js is the library I’m using to render this 3D world.
It was created by mr.doob (X, GitHub), followed by hundreds of awesome developers, one of which being Sunag (X, GitHub) who added TSL, enabling the use of both WebGL and WebGPU, making this portfolio possible.Three.js Journey
If you want to learn Three.js, I got you covered with this huge course.
It contains everything you need to start building awesome stuff with Three.js (and much more).Devlogs
I’ve been making devlogs since the very start of this portfolio and you can find them on my Youtube channel.
Even though the portfolio is out, I’m still working on the last videos so that the series is complete.Code source
The code is available on GitHub under MIT license. Even the Blender files are there, so have fun!
For security reasons, I’m not sharing the server code, but the portfolio works without it.Musics
The music you hear was made especially for this portfolio by the awesome Kounine (Linktree).
They are now under CC0 license, meaning you can do whatever you want with them!
Download them here.Some more links
— Bruno
Why else would so many tumble down the rabbit hole of building their own
<input>replacement, stringing multiple<input>elements together, or burdening their project with yet another third-party dependency?If you find yourself in a similar situation, I have good news! You can ship a fully functional OTP input today without any CSS hacks or JavaScript frameworks.
All you need is some HTML.
Tu vois Bootstrap ? Bah, c'est pas ça.
Bretzel est un ensemble de Layouts HTML/CSS utilitaires réunis par l'agence Alsacréations pour ses projets d'intégration.
Voir et récupérer nos Layouts CSS
Télécharger l'extension Visual Studio Code
Des Layouts ?
Les "Layouts" sont des styles utilitaires neutres destinées à gérer la façon dont les composants vont s'afficher et interagir entre eux. Les Layouts sont responsive, entièrement paramétrables et destinés à être réutilisables. On les applique simplement à l'aide d'un attribut HTML data-layout.
[Via kalvn]
Did you know that JavaScript offers a few protocols to allow iteration over certain objects? Of course, we know we can easily iterate over arrays, but with these protocols, you can make your own custom objects iterable as well.
When you have an iterable object representing a collection, you can use the
for...ofsyntax to iterate over every single item of the collection.But what if an object abstracts data generated asynchronously? For instance, think of an abstraction that allows us to fetch data from a paginated API, or think about some records consumed in batches from a database, or something as simple as a countdown timer. Well in these cases you can use the
for await...ofsyntax!In this article, we will learn more about the iterator and the iterable protocol (and their async counterparts) and we will see how to create custom objects that can expose their internal data in an ergonomic and idiomatic way.
For most developers, the only time they touch colour values is when they copy them from a design file and paste them into their editor. We are developers and not designers, after all.
However, there have been a lot changes to colours in CSS over the last few years — from updates to the syntax of familiar features to all new ways of working with colours — that even copy/pasters can take advantage of.
If you’re creating your own colour schemes, or are looking to dive into ways you can apply what you know about colour theory directly inside of CSS, I’ll be exploring a lot more about that side of things in part two, but for this one I’m focusing on how the new colour features can help developers who don’t necessarily focus on design.
Une bibliothèque JavaScript déclarative, efficace et flexible pour la création d'interfaces utilisateur.
Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun.
What PWA Can Do Today
A showcase of what is possible with Progressive Web Apps today.
A Progressive Web App (PWA) is a website that can be installed on your device and provide an app-like experience read more
How to use this app
This app is itself a PWA so you can install it on your device and then check the demos below to see what is supported on your device.
When the button below becomes enabled, you can install this app.
What PWA Can Do Today
A showcase of what is possible with Progressive Web Apps today.
A Progressive Web App (PWA) is a website that can be installed on your device and provide an app-like experience read more
How to use this app
This app is itself a PWA so you can install it on your device and then check the demos below to see what is supported on your device.
When the button below becomes enabled, you can install this app.>
Every time you use a computer, caches work to ensure your experience is fast. Everything a computer does from executing an instruction on the CPU, to requesting your X.com feed, to loading this very webpage, relies heavily on caching.
You are about to enjoy a guided, interactive tour of caching: the most elegant, powerful, and pervasive innovation in computing.
L'attaque récente sur les packages npm chalk et debug rappelle l'importance d'une gestion rigoureuse des versions dans les projets JavaScript. Entre ranges de versions permissives et lock files oubliés, nous allons voir comment sécuriser vos dépendances.
L’écosystème npm, avec ses millions de packages, représente un terrain de jeu privilégié pour les attaqueurs cherchant à compromettre la supply chain. L’attaque récente sur les packages chalk et debug illustre parfaitement les risques liés à une gestion approximative des versions de dépendances.
Comme je l’évoquais dans mon analyse de l’attaque Nx 2025, ces incidents révèlent les failles d’un écosystème où la commodité prend souvent le pas sur la sécurité. Il est temps d’adopter des pratiques plus rigoureuses.
ImageJS is a JavaScript library designed to facilitate image processing and manipulation. It provides a wide range of features for developers to enhance, analyze, and transform images seamlessly. It includes functions for common tasks such as resizing, cropping, filtering, and color adjustments.
Apprendre le HTML et comprendre le web
Derrière cet effrayant nom (HyperText Markup Language) se cache un site pour apprendre le HTML et plus simplement les bases du code sur le web. Par ailleurs, ce site a été pensé plus particulièrement pour les graphistes et les étudiants. L’objectif étant de partir sur les bonnes pratiques modernes avec un regard critique de codeur et de graphiste.
Cette vision d’unification de deux mondes sans opposition ayant comme finalité la création d’un dialogue constructif.