#javascript

▻https://plainvanillaweb.com

An explainer for web development using only vanilla techniques : No tools, no frameworks — just HTML, CSS, and JavaScript. Learn how to make web sites and web applications without build tools or frameworks, with just an editor, a browser, and web standards.

– Components :Use web components to make higher-level primitives
out of plain HTML, JavaScript, and CSS. See ▻https://plainvanillaweb.com/pages/components.html
– Styling : Leverage modern CSS to replace the conveniences of CSS Modules, PostCSS, or SASS. See ▻https://plainvanillaweb.com/pages/styling.html
– Sites : Make a vanilla web site and get it online without build tools, frameworks or server-side logic. See ▻https://plainvanillaweb.com/pages/sites.html
– Applications : Craft single-page applications with vanilla strategies
for client-side routing and managing state. See ▻https://plainvanillaweb.com/pages/applications.html

Why go plain vanilla?

Modern web development frameworks offer rich functionality, but this comes at the cost of framework and tooling complexity. The plain vanilla style of web development takes a different path, trading off short term comforts for long term benefits like simplicity and being effectively zero-maintenance.

Who is this for?

This tutorial is meant for those who already know their way around HTML, CSS, and JavaScript, and are looking to press the eject button on tooling complexity.

If you’re just starting out learning web development then this is not the site for you yet. You can get started at “HTML for People” ►https://htmlforpeople.com or “The Odin Project Foundations Course” ▻https://www.theodinproject.com/paths/foundations/courses/foundations .

#dev #javascript #vanilla #lowtech #framework #spip #nobullshit

I’m a proud #crud monkey | Kyrylo Silin
▻https://kyrylo.org/software/2025/08/17/im-a-proud-crud-monkey.html

— Permalink

#web #rant #minimalism #frontend #javascript #webapp #browser

Supply-chain attacks on open source software are getting out of hand
▻https://arstechnica.com/security/2025/07/open-source-repositories-are-seeing-a-rash-of-supply-chain-attacks

#Attacks affected packages, including one with ~2.8 million weekly downloads.

It has been a busy week for #supply-chain_attacks targeting #open_source software available in public repositories, with successful breaches of multiple developer accounts that resulted in malicious packages being pushed to unsuspecting users.

The latest target, according to security firm Socket, is #JavaScript code available on repository #npm. A total of 10 #packages available from the npm page belonging to global talent agency Toptal contained malware and were downloaded by roughly 5,000 users before the supply-chain attack was detected. The packages have since been removed. This was the third supply-chain attack Socket has observed on npm in the past week.

Cosmograph: online tool and #javascript library for the visualization and analysis of extensive network #graphs and machine learning embeddings
▻https://github.com/cosmograph-org

— Permalink

#dataviz #web

#bookmarklets (and Custom URL Schemes) Are Criminally Underrated | Lobsters
▻https://lobste.rs/s/fgzitm/bookmarklets_custom_url_schemes_are

— Permalink

#web #browser #javascript

Learn #JavaScript | web.dev
▻https://web.dev/learn/javascript

An in-depth course on the basics of JavaScript.

#documentation pour revoir les bases

The untold history of web development:
▻https://functional.cafe/@juliobiason/111613996060167180

The untold history of web development:

1990: HTML invented
1994: CSS invented to fix HTML
1995: JS invented to fix HTML/CSS
2006: jQuery invented to fix JS
2010: AngularJS invented to fix jQuery
2013: React invented to fix AngularJS
2014: Vue invented to fix React & Angular
2016: Angular 2 invented to fix AngularJS & React
2019: Svelte 3 invented to fix React, Angular, Vue
2019: React hooks invented to fix React
2020: Vue 3 invented to fix React hooks
2020: Solid invented to fix React, Angular, Svelte, Vue
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid
2021: React suspense invented to fix React, again
2023: Svelte Runes invented to fix Svelte
2024: jQuery still used on 75% of websites

(by @fireship_dev on Birdsite)

Comment rendre une PWA installable ?
▻https://developpeur-freelance.io/pwa-installable

Tutoriel pour la gestion de l’installation d’une PWA (service-worker + JavaScript)

#PWA #progressive_web_app #javascript #service_worker

Lighthouse overview - Chrome Developers
▻https://developer.chrome.com/docs/lighthouse/overview

Est-ce que vous avez une opinion à propos de cet outil ?

Je me contente toujours de validator.w3.org et de Lynx (en plus de Firefox, Chrome et Safari sous des OS divers) pour tester mes sites. C’est déjá assez coûteux quand tu fabriques du code propre (validator) et des pages facilement accessibles (des textes bien structurés, pas de menus interminables en haut de page, des alt/titre pour les images et vidéos, des liens parlants etc.). Avec l’inspecteur de code de Firefox et les autres outils (SPIP) je me sens à l’aise, alors quel argument est-ce qu’il y a pour ajouter Lighthouse à ma boîte d’outils (dans ungoogled Chromium ) ?

Je m’en fous du nombre de visiteurs répertoriés car je ne travaille plus du tout pour les commerciaux, et toute la magie noire SEO ne m’intéresse plus que pour m’amuser.

Merci pour vos idées.

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
Lighthouse logo

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

You can also use Lighthouse CI to prevent regressions on your sites.

#web #www #html #css #javascript #SPIP

TIL about the optional chaining operator.

The optional chaining operator (?), allows you to read the value of a property located deep in a chain of connected objects without having to check every single reference in the chain.

#javascript

▻https://blog.gogrow.dev/say-bye-bye-to-bad-javascript-practices-5971688ba80a

Quelles sont les différences entre #var, #let et #const en #Javascript ? - Blog - Code-Garage
▻https://code-garage.fr/blog/quelles-sont-les-differences-entre-var-let-et-const-en-javascript

Si l’on devait résumer la définition de ces deux nouvelles manières de déclarer des variables, on pourrait dire que :

– let sert à définir une variable locale
– const sert à déclarer une référence constante

Attention, une référence constante ne veut pas dire que la valeur derrière la référence est « immutable », mais que la référence elle-même est immutable.

https://code-garage.fr/content/images/2022/03/let-var-const-3.png

Performance #web : l’intégrateur, ce héros

J’ai envie de pousser un concept absolument nouveau : l’amélioration progressive (ah pardon on me dit que ça date de 2003). Au minimum c’est la clé d’un premier affichage éclair car on peut se passer de #JavaScript quelques secondes.
Puis abordons le gros sujet des images : comment les charger rapidement, sans toucher aux fichiers eux-même ? Il y a eu quelques nouveautés ces deux dernières années, mais on va voir que même sur des choses que l’on peut croire acquises comme le lazy loading, il y a quelques pièges qui peuvent être contre-productifs.
Enfin terminons avec un petit résumé sur les polices : elles tapent dans l’œil mais il faut en garder le contrôle si l’on veut un bon CLS (une des métriques Google dont on va reparler).

Article intéressant sur les optimisations au moment de l’#intégration web. Ça parle (un peu) performance mais surtout #UX, #ergonomie, #HTML, #CSS, #javascript...

▻https://www.24joursdeweb.fr/2021/performance-web-lintegrateur-ce-heros

https://media.24joursdeweb.fr/2021/12/no-preload-all-network.png

Home | The Component Gallery
▻https://component.gallery

Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of #interface #components based on examples from the world of #design_systems

Qaop/JS emulator info
▻http://torinak.com/qaop/info

Qaop/JS – ZX Spectrum emulator
This is Sinclair ZX Spectrum emulator written in JavaScript. Models 48K and 128 supported.

ZX Spectrum Games
▻http://torinak.com/qaop/games

#jeu_vidéo #jeux_vidéo #spectrum_zx #émulateur #javascript #en_ligne #online #archive #archéologie #rétro #rétrogaming #préservation

« A shallow dive into DataScript internals » by Nikita Tonsky, 23.02.2015
▻https://tonsky.me/blog/datascript-internals

Excellent article, concis et instructif, par l’auteur et contributeur principal de Datascript.

An overview of DataScript code base. Without going into much detail, it paints the overall picture of how code is structured, what parts it’s built of and what purpose they serve. If you’re interested in studying DataScript sources, this is a great place to start.

For those who are using DataScript this post may help to get better understanding of machinery behind public APIs and make better use of them. […]

Autres articles utiles pour mettre le pied à l’étrier:

@tonsky/datascript › Wiki › Getting started
▻https://github.com/tonsky/datascript/wiki/Getting-started

@tonsky/datascript › Wiki › API Overview
▻https://github.com/tonsky/datascript/wiki/API-overview

#clojure #javascript #database #datomic #datalog

« Aaaaaaaaaaaaaah, They’re Here ! ES Modules in Node.JS » par Gil Tayar (@giltayar), 03.2020 @ NodeTLV
▻https://docs.google.com/presentation/d/1O1-PF35FXVWnW-V-8QGPWO_5A0LQ3WGABVreOcZs1rw

Rappels utiles, s’agissant de migrer du code CJS vers ESM ; j’ai récemment buté sur l’intégration d’une base de code AMD dans ObservableHQ :

ESM vs CJS

1. ESM is strict / CJS is not
2. ESM is browser compatible / CJS is not
3. ESM is statically parsed / CJS is not
4. ESM is async, and supports top-level await / CJS is not

ESM vs Babel

1. ESM is strict / Yeah, OK, so is Babel
2. ESM is browser compatible / Babel transpilation is not
3. ESM is statically parsed / Babel transpilation is not
4. ESM is async, and supports top-level await / Babel transpilation is not, and does not
5. ESM is native / Babel is transpiled 🤢

Conditional Exports ! Both ESM and CJS !

{
 "exports": {
   ".": {
     "import": "./main.mjs",
     "require": "./main.js"
   }
}

La présentation contient aussi un historique succinct de l’introduction des modules, qui aide à se replacer dans le contexte de CJS et AMD.

Code source des exemples de la présentation : ▻https://github.com/giltayar/ah-theyre-here-esm-nodejs

Documentation de référence sur les modules : ▻https://exploringjs.com/impatient-js/ch_modules.html#cheat-sheet-modules

La présentation est truffée de mèmes cinématographiques, sans doute destinés à rafraîchir l’esprit et soutenir l’attention d’un auditoire — hors de ce contexte, il faut toutefois être bien luné et manifester quelqu’indulgence :)

#slide #javascript #esm #cjs #modules #babel

Eve Online fans literally cheer Microsoft Excel features at annual Fanfest | Ars Technica
▻https://arstechnica.com/gaming/2022/05/eve-onlines-ms-excel-partnership-makes-spreadsheets-in-space-official

https://cdn.arstechnica.net/wp-content/uploads/2016/08/eve-online-640x360.jpg

There aren’t many games for which built-in integration with Microsoft Excel would be a major feature whose announcement would draw literal cheers from fans. But Eve Online showed itself to be the exception when developer CCP announced coming Excel integration during its Eve Fanfest keynote this morning.

Through an official partnership with Microsoft, CCP said it is creating a JavaScript API that will allow players to “seamlessly export data from Eve Online” into the popular spreadsheet program. That “will help players access and calculate everything from profit margins to battle strategy, making day-to-day Eve operations easier to execute,” the company said in a press release.

“It’s not April fools; this is real,” Eve Online Creative Director Bergur Finnbogason said on the Fanfest stage, receiving bemused laughter in response. “I’m not lying—we actually reached out to [Microsoft] and they were like, ’Oh my god, We love Eve!’”

#jeux_vidéo #jeu_vidéo #jeu_vidéo_eve_online #ccp #microsoft #microsoft_excel #excel #bergur_finnbogason #tableur #data #données #api #api_javascript #javascript #data_science #larrikin

« ResizeObserver: it’s like document.onresize for elements » by Surma and Joe Medley, web.dev, 07.10.2016 updated 26.05.2020

« […] ResizeObserver reacts to changes in size of any of the observed elements, independent of what caused the change. It provides access to the new size of the observed elements too. »

#javascript #resize #observer

« JavaScript type coercion explained » by Alexey Samoshkin, freeCodeCamp, 17.01.2018

« This article goes in-depth on how type coercion works in JavaScript, and will arm you with the essential knowledge, so you can feel confident explaining what following expressions calculate to. […]

Type coercion is the process of converting value from one type to another (such as string to number, object to boolean, and so on). Any type, be it primitive or an object, is a valid subject for type coercion.

To recall, primitives are: number, string, boolean, null, undefined + Symbol (added in ES6). […]

The first rule to know is there are only three types of conversion in JavaScript: to string; to boolean; to number.

Secondly, conversion logic for primitives and objects works differently, but both primitives and objects can only be converted in those three ways. […] »

#javascript #reference #wat

« Wat — A lightning talk » by Gary Bernhardt, CodeMash 2012
►https://www.destroyallsoftware.com/talks/wat

#javascript #wat #fun

« JavaScript equality comparison is a crazy thing, sometimes. When in doubt, use three equals signs. » by dorey, 06.2013–02.2015
▻https://dorey.github.io/JavaScript-Equality-Table

#javascript #wat #reference

voir aussi: ▻https://dorey.github.io/JavaScript-Equality-Table/unified

PrinceJS
▻https://princejs.com

Prince of Persia émulé en JavaScript, jouable dans le navigateur.

#jeu_vidéo #jeux_vidéo #jeu_vidéo_prince_of_persia #javascript #navigateur

neovis.js — Graph visualizations in the browser with data from Neo4j
▻https://github.com/neo4j-contrib/neovis.js

Il me semble que cette librairie a sensiblement évolué, offrant davantage de nuances sur la mise en forme des liens (épaisseur, vignette) et permettant de décrire une visualisation simple de graphe de façon déclarative.

#javascript #graph #visualization

Developer Tools secrets that shouldn’t be secrets | Christian Heilmann
▻https://christianheilmann.com/2021/11/01/developer-tools-secrets-that-shouldnt-be-secrets

Je découvre console.log(width) VS console.log({width}) qui est bien plus pratique & console.trace() :)

#devtools #debug #javascript

Paged.js — About Paged.js
▻https://www.pagedjs.org/about

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!

Une librairie javascript pour paginer le HTML pour générer du PDF « joli »

– le repo Gitlab : ▻https://gitlab.pagedmedia.org/tools/pagedjs
– la documentation : ▻https://www.pagedjs.org/documentation
– les spécifications CSS « Paged Media Module Level 3 » supportées : ▻https://www.pagedjs.org/documentation/cheatsheet
– une étude de cas complète pour la création/mise en page d’un livre : ►https://polylogue.org/apres-la-page-la-double-page
– rendu testable sur ►https://printcss.live

#Pagedjs #pagination #générateur_PDF #PDF #javascript