Lume (pronounced /lume/ 🔈) is the Galician word for fire but also a static site generator for Deno.

It's inspired by other static site generators, such as Jekyll, Hugo or Eleventy, but easier to use and configure and much more flexible.

• It supports multiple file formats, like markdown, yaml, JavaScript, typescript, jsx and nunjucks, and it's easy to extend with more.
• You can hook processors to manipulate html and assets, like css or js.
• It's Deno: Forget about managing thousands of packages in node_modules or complex bundlers. Lume only installs what you need. Clean, fast and secure.

I love interactive things, but I’m not a fan of expensive devices, especially those we have to buy year after year to have the latest hardware in our hands!

I’m a fan of accessible technology!

With that in mind, today I’m going to show you how to control elements in a 3D scene using just your hands, a webcam, and a web browser. The key focus here is converting a 2D screen into a 3D space, with full depth control. I’ll keep the focus on that!

To achieve this result, we will use Mediapipe and Three.js.

Master 6 Powerful JavaScript Functions! Check out these essential functions every web... Tagged with javascript, functional, webdev, programming.

An API Driven Rich Text Editor

Built for Developers
Granular access to the editor's content, changes and events through a simple API. Works consistently and deterministically with JSON as both input and output.
Cross Platform
Supports all modern browsers on desktops, tablets and phones. Experience the same consistent behavior and produced HTML across platforms.

JavaScript is a powerful language for building dynamic web applications, but with great power comes great responsibility. Ensuring the security and privacy of your web applications is crucial. This guide covers essential best practices to protect your applications and users.

Voici comment je fais pour rajouter automatiquement une balise autour des emojis présents dans mes articles :

function niceEmoji(text) {
  const emojiRegex = /(\p{ExtPict}(\u200d\p{ExtPict}|\p{EMod})*)/gu;
  return text.replace(emojiRegex, '<span class="u-emoji">$1</span>');
}

GraphQL is a powerful tool for querying data from remote servers and my preferred way of building APIs (Application Programming Interface). For some people, it might be difficult to learn as the tutorials are usually written using tools such as Apollo or Relay. These tools are great but often suited for more complicated projects. In certain scenarios, there might be better to choose a more lightweight approach and not increase bundle size with additional libraries. In these cases, you can work directly with the tools available in the browser. In this quick tutorial, we will use fetch, commonly available in your browser. Let’s first quickly revise what fetch is and how it is usually used with REST API, then we can move to simple GraphQL queries execution.

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.

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.

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).

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 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.

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!

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 673 197 developers building projects, reviewing code, and helping each other get better.

Créer des animations simplement…

remoteStorage.js is a JavaScript library for storing user data locally in the browser, as well as connecting to remoteStorage servers and syncing data across devices and applications. It is also capable of connecting and syncing data with a person’s Dropbox or Google Drive account (optional).

rs.js stores data locally first and syncs data with a remote storage account second. This makes it a robust sync solution for mobile applications, where slow and spotty network connections are a normal situation.

Home remoteStorage

Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript

Tips : Du Web au Mobile avec Capacitor 🇫🇷