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...of syntax 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...of syntax!

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.

• solidjs/solid A declarative, efficient, and flexible JavaScript library for building user interfaces.

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.

The SVG <path> element is notoriously tricky. When I first encountered it, I found it totally inscrutable. Its syntax isn’t quite as bad as Regex, but it has the same sort of “what on earth?” vibes.

At the same time, <path> elements are also incredibly useful. They’re the only way to create curved shapes in SVG, beyond full ellipses. And once you get the hang of it, they’re actually quite a lot of fun to use!

In this blog post, we’ll cover all of the basic commands, including the infamous arc command. I’ll help you build an intuition for how they work, and show you some cool stuff you can do with them!

SVGs are one of the most exciting technologies we have access to in-browser. We can do so many cool things with SVG. It’s an absolutely critical part of my toolkit.
But SVGs are also pretty intimidating. The rabbit hole goes deep, and it’s easy to get overwhelmed.

So, in this blog post, I want to share the most important fundamentals, to provide a solid foundation you can build on. I’ll show you why SVGs are so cool, and share a few tricks you can start using right away. ✨

Features

Embedded

Super easy to embed the emulator into your website. Just add a few lines of code and you're good to go. Learn how to embed

Code Editor

Automatically generate embeddable code for EmulatorJS! Code Editor

Uses RetroArch

We use RetroArch's libretro cores to emulate games. Learn how to compile your own cores here

Multilingual

EmulatorJS supports multiple languages. You contribute to the translations here

Customizable

EmulatorJS is made to be fully customizable. Built-in cutomization options are available here

Demo

You can try EmulatorJS using the demo. Open Demo

On the web sprite sheets are used mainly to reduce the amount of HTTP requests by bundling multiple images together into a single image file. Displaying a sub-image involves clipping the sheet in the appropriate coordinates.

TL;DR

.element {
   background-image: url('heart.png');
   /* size of one frame */
   width: 100px;
   height: 100px;
   /* size of the whole sheet */
   background-size: 2900px 100px;
  /* animate the coordinates */
  animation: heartAnimation 2s steps(29, jump-none) infinite;
}

@keyframes heartAnimation {
  from {
    /* first frame */
    background-position: 0px 0px;
  }
  to {
    /* last frame */
    background-position: -2800px 0px;
  }
}

All-in-one animation engine.

A fast and versatile JavaScript library to animate…

introduction

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx is small (~14k min.gz’d), dependency-free, extendable & has reduced code base sizes by 67% when compared with react

motivation

• Why should only <a> & <form> be able to make HTTP requests?
• Why should only click & submit events trigger them?
• Why should only GET & POST methods be available?
• Why should you only be able to replace the entire screen?

By removing these constraints, htmx completes HTML as a hypertext

quick start

<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>

The hx-post and hx-swap attributes on this button tell htmx:

“When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the HTML response”

htmx is the successor to intercooler.js

Read the docs introduction for a more in-depth… introduction.

Note that htmx 2.x has dropped IE support. If you require IE support you can use the 1.x code-line, which will be supported in perpetuity.

HTML isn’t only for people working in the tech field. It’s for anybody, the way documents are for anybody. HTML is just another type of document. A very special one—the one the web is built on.

I’m Blake Watson. I’ve been building websites since the early 2000s. Though I work professionally in the field, I feel strongly that anyone should be able to make a website with HTML if they want. This book will teach you how to do just that. It doesn’t require any previous experience making websites or coding. I will cover everything you need to know to get started in an approachable and friendly way.

Ready? Let’s do it!

Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

The Javascript Game Framework
Thousands of games
Millions of players
Billions of sessions

Source : Powerful JavaScript Frameworks for Game Developers.

In the realm of web development, building scalable applications using JavaScript encompasses a confluence of patterns, practices, and principles designed to accommodate an ever-growing user base. JavaScript patterns help developers not only structure their applications efficiently but also promote maintainability and scalability.

This comprehensive guide explores advanced JavaScript design patterns, delving deep into their implementation, comparing them with alternative approaches, and covering practical considerations and pitfalls that developers face in real-world applications.

Quelle est la différence entre internet et le web ?
Quelles sont les origines d'Internet ?
TCP/IP : qu'est-ce que c'est et comment ça fonctionne ?
Comprendre les 7 couches du modèle OSI
Qu'est-ce qu'un serveur web ?
Comment fonctionne un navigateur web ?
Comprendre l’architecture 3-tiers
Qu'est-ce qu'un slug et pourquoi faut-il l'utiliser dans vos urls ?
Qu'est-ce que le SSR ou Server-Side Rendering ?
Comprendre ce qu’est le CRUD en 1 minute
Quelles sont les différences entre une API et un SDK ?
Qu'est-ce qu'une API REST ?
À quoi servent les Data Transfer Objects (DTO) ?
Les 7 choses que vous ignorez sur l'histoire de Javascript !
Quelles sont les différences entre var, let et const en Javascript ?
Javascript : Les promises expliquées aux débutants
Comprendre async/await en Javascript
Non, NodeJS n'est pas un langage !
Comment choisir entre SQL et NoSQL ?
Comment fonctionnent les index en base de données
Qu'est-ce qu'une transaction en base de données ?
Qu'est-ce qu'un hébergement web mutualisé ?
Qu’est-ce qu’un CDN ?
Le PaaS, ou "Platform-as-a-Service" expliqué
Faire ses débuts sur la ligne de commande Linux
Y’a-t’il une différence entre compilation et transpilation ?
Bibliothèque vs Framework, quelle est la différence ?
Qu'est-ce que l'architecture logicielle ?
Comprendre le concept d’immutabilité des données
Comprendre le concept de récursivité en programmation
Comprendre l’architecture Modèle-Vue-Contrôleur (MVC)
Comprendre la complexité algorithmique (notation Big-O) ?
Qu'est-ce qu'une fuite de mémoire en programmation ?
Le guide pour apprendre à débugger du code
Les 5 raisons d'utiliser Git même quand on travaille seul
Comment bien écrire vos messages de commit ?
Qu'est-ce que le Semantic Versioning ?
Qu'est-ce qu'un artisan logiciel ?
Stocker des mots de passe de manière sécurisée
Comment fonctionne le hashage ?
Comment fonctionne le chiffrement symétrique ?
Comprendre les tokens JWT en 3 minutes
Le fingerprinting, ou comment traquer un utilisateur sans cookies
Qu'est-ce que la méthodologie Agile ?
Qu'est-ce qu'une User Story ?
Qu'est-ce que le «bus factor» dans un projet tech ?
Qu'est-ce que le «cargo cult» dans le développement logiciel ?
Qu'est-ce qu'une licence logicielle ?
Qu'est-ce qu'un logiciel open-source et/ou libre ?
Pourquoi l'aléatoire n'existe pas en informatique ?
Qu'est-ce que la souveraineté numérique ?
Qu'est-ce que l'OSINT, ou "Open-Source Intelligence" ?
Quelle est la différence entre un dev junior, confirmé et sénior ?
Prouver son expérience de développeur sans avoir été embauché
Ne pas confondre veille technologique et apprentissage
Les 10 qualités que partagent les bon(ne)s développeur(se)s
Les 6 façons de monétiser un site ou une application web
Comment gagner de l'argent avec la programmation
Comment devenir développeur web freelance en France ?
Ce que veut dire être développeur freelance en 7 points clés
Qu’est-ce qu’une architecture en microservices ?
Qu’est-ce que le Virtual DOM ?
Qu'est-ce qu'un headless CMS ?
Introduction à la compression de données avec l'algorithme RLE
La compression GZIP, c’est quoi ?
Qu'est-ce qu'une blockchain ?
Comprendre le Web Assembly
La stack technique derrière Wikipédia, 20 ans de réussite
Top 9 des films et documentaires sur l’informatique
Top 7 des séries TV sur l'informatique et la programmation

CSS grid generator is a tool that helps developers create custom CSS grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size.