Le format SVG peut paraître parfois un peu intimidant, et l'associer à des transitions ou des animations CSS semble encore plus audacieux pour bon nombre de personnes.

Cependant, dans certains cas, l'alchimie entre SVG et CSS est aussi bénéfique qu'extrêmement simple à mettre en oeuvre. Dans ce tutoriel, nous allons suivre étape par étape comment animer un bouton burger simple avec SVG et CSS.

All popular icon sets, one framework

Cet article vous présente le moyen simple de personnaliser vos éléments input de type radio ou checkbox en utilisant uniquement du CSS.

OKLCH is a new way to encode colors (like hex, RGBA, or HSL)

Made by Lea Verou with care

Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity.

Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!

Paged.js follows the Paged Media standards published by the W3C (ie the Paged Media Module, and the Generated Content for Paged Media Module). In effect Paged.js acts as a polyfill for the CSS modules to print content using features that are not yet natively supported by browsers.

• Discussions and help: Mattermost, Discourse
• Development: Gitlab

TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality.

The best design tools and plugins for everything 👉

Since 2015, we’ve launched powerful tools for designers and developers — among them are Flawless App, Reduce, Flawless Feedback. We’ve also invested a lot of love and care into community-driven initiatives. Awesome Design Tools is one of them.

In today's dynamic world of software development, staying up-to-date with the latest tools, libraries, and frameworks is crucial for developers.

GitHub offers a treasure trove of valuable repositories that can significantly enhance your development skills and expertise.

I've compiled a list of 19 GitHub repositories that every developer should be aware of, providing a rich source for learning, practicing, and inspiration.

Each repository is divided into subcategories for easier navigation. I've also included direct links and descriptions to get the impression right away.

Comment jouer ?

• 1. Choisissez l'option qui vous semble la moins polluante.
• 2. Validez votre choix.
• 3. Répondez à l'ensemble des questions du jeu.
• 4. Découvrez votre résultat.

Attention : Le site que vous allez construire n'est qu'un exemple.
L'éco-conception commence maintenant pour vous, bon courage !

The SHA-256 algorithm is a widely used hash function producing a 256-bit hash value. It is used in many security applications and protocols, including TLS and SSL, SSH, PGP, and Bitcoin.

Calculating a SHA-256 hash in JavaScript is easy using native APIs, but there are some differences between the browser and Node.js. As the browser implementation is asynchronous, both of the examples provided will return a Promise for consistency.

Browser

In the browser, you can use the SubtleCrypto API to create a hash for the given value. You first need to create a new TextEncoder and use it to encode the given value. Then, pass its value to SubtleCrypto.digest() to generate a digest of the given data, resulting in a Promise.

As the promise resolves to an ArrayBuffer, you will need to read the data using DataView.prototype.getUint32(). Then, you need to convert the data to its hexadecimal representation using Number.prototype.toString(). Add the data to an array using Array.prototype.push(). Finally, use Array.prototype.join() to combine values in the array of hexes into a string.

const hashValue = val =>
  crypto.subtle
    .digest('SHA-256', new TextEncoder('utf-8').encode(val))
    .then(h => {
      let hexes = [],
        view = new DataView(h);
      for (let i = 0; i < view.byteLength; i += 4)
        hexes.push(('00000000' + view.getUint32(i).toString(16)).slice(-8));
      return hexes.join('');
    });

hashValue(
  JSON.stringify({ a: 'a', b: [1, 2, 3, 4], foo: { c: 'bar' } })
).then(console.log);
// '04aa106279f5977f59f9067fa9712afc4aedc6f5862a8defc34552d8c7206393'

Node.js

In Node.js, you can use the crypto module to create a hash for the given value. You first need to create a Hash object with the appropriate algorithm using crypto.createHash(). Then, use hash.update() to add the data from val to the Hash and hash.digest() to calculate the digest of the data.

For consistency with the browser implementation and to prevent blocking on a long operation, we'll return a Promise by wrapping it in setTimeout().

import { createHash } from 'crypto';

const hashValue = val =>
  new Promise(resolve =>
    setTimeout(
      () => resolve(createHash('sha256').update(val).digest('hex')),
      0
    )
  );

hashValue(JSON.stringify({ a: 'a', b: [1, 2, 3, 4], foo: { c: 'bar' } })).then(
  console.log
);
// '04aa106279f5977f59f9067fa9712afc4aedc6f5862a8defc34552d8c7206393'

Notes

• The two implementations are not compatible with each other. You cannot use the browser implementation in Node.js and vice versa.
• Both implementations should produce the same result for the same input.

12-Factor-App est un ensemble de principes décrivant une manière de créer des logiciels de type Software-as-a-Service. (SaaS) qui, lorsqu'ils sont suivis, permettent de créer du code qui peut être pub...

TIO is a family of online interpreters for an evergrowing list of practical and recreational programming languages.
To use TIO, simply click the arrow below, pick a programming language, and start typing. Once you click the run button, your code is sent to a TIO arena, executed in a sandboxed environment, and the results are sent back to your browser. You can share your code by generating a client-side permalink that encodes code and input directly in the URL.

• Selectors CSS-Tricks - CSS-Tricks
• Properties CSS-Tricks - CSS-Tricks

Comment générer ses propres certificats SSL à des fins de développement

I wrote A Modern CSS Reset almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version.

I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want!

To be super clear, this is a reset that works for me, personally and us at Set Studio. Whenever I refer to “we”, that’s who I’m referring to.

1. Introduction
2. L’attribut alt
3. L’attribut title
4. La balise <title> et les images SVG
5. Le texte masqué en CSS
6. Les attributs ARIA : à n’utiliser qu’en connaissance de cause

• I made 100 CSS loaders for your next project
• Another 100 CSS loaders for your next project
• I made 100 more CSS loaders for your next project
• Still 100 CSS loaders for your next project
• Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆
• I am back with 100 "Dark Mode" CSS loaders
• css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)

In this article, you'll learn how to implement a user authentication system in JavaScript. By the end of the tutorial, you'll have a REST API, a database to store user information, authentication via JSON Web Tokens, and even verification emails!