Modern CSS Solutions for Old CSS Problems

The goal of this handbook is to provide gentle step-by-step instructions that will help you learn the key concepts of React.

Instead of covering all the theories and concepts of React in their entirety, I'll be teaching you important building blocks of the library. You'll learn about JSX, components, props, states, event handlers, creating forms, and running network requests.

Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbo to provide a complete solution for fast, compelling applications with a minimal amount of effort.

Le web, tout le monde connait. C’est la toile de sites web qui est accessible à qui veut et qui est référencée par des moteurs de recherche.

Tu tapes tes mots clés sur Google et tu obtiens les sites web qui correspondent à la requête.

Le Deep web, le web profond c’est plus vaste. C’est la partie sous l’eau de l’iceberg, c’est la partie qui n’est pas référencée, que les moteurs de recherche ne connaissent pas. C’est aussi les Intranet d’entreprises.

Le Dark web est la face sombre du web. Comme tout ce qui est caché, c’est source de fantasme. Il a y sur le dark web des activités tout à fait légales et louables. Mais aussi une face sombre d’activités illégales qui donc se cachent.

Nous allons voir ici un aperçu du Dark Web, ceci afin de se faire une idée de la réalité de ce lieu, hors des fantasmes.

A collection of bad practices in HTML, copied from real websites.

Switch button animated.

For a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice!

I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to handle centering in all sorts of scenarios.

Honestly, this turned out to be way more interesting than I initially thought 😅. Even if you've been using CSS for a while, I bet you'll learn at least 1 new strategy!

In this in-depth tutorial, you'll learn all about the Document Object Model, or DOM for short. As a web developer, understanding the DOM is fundamental for interacting with web browsers and creating dynamic web applications.

Sans protocoles réseau, l’Internet moderne cesserait d’exister.

Un protocole réseau est un ensemble établi de règles qui déterminent la manière dont les données sont transmises entre différents appareils du même réseau. Essentiellement, il permet aux appareils connectés de communiquer entre eux.

Welcome to The Valley of Code. Your journey in Web Development starts here. In the fundamentals section you'll learn the basic building blocks of the Internet, the Web and how its fundamental protocol (HTTP) works.

Neutralinojs is a lightweight and portable desktop application development framework. It lets you develop lightweight cross-platform desktop applications using JavaScript, HTML and CSS. You can extend Neutralinojs with any programming language (via extensions IPC) and use Neutralinojs as a part of any source file (via child processes IPC).

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)

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

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.

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