Concepts

Explaining the world one sketch at a time — each sketch explains an idea or concept. Explore, search and share. Start here.

This is a great paper (CACM 2018) by John Ousterhout. Ousterhout is well known for his work on log-structured file system, tcl/tk, Raft, a...

In 2022, the IETF formed a working group for Media Over QUIC (MoQ)—a media delivery solution that has the potential to transform how we send and receive media during live streaming, real-time collaboration, gaming, and more.

In an age of complicated front-end solutions, is there a simpler way of doing things? Spoiler alert: there is.

Dans le monde complexe des tests de logiciels, deux éléments essentiels se distinguent : les scénarios de test et les cas de test.

An interactive exploration of how long things take.

Metaverse Dialogues : naviguez dans le rapport de Renaissance numérique.

A showcase of what is possible with Progressive Web Apps today.

Caching is something most developers take for granted, but experience tells me time and time again that most developers also don’t understand how to configure their caching rules safely, correctly, or effectively. Do you know what no-cache means? Do you know what the Pragma header does? Do you know the difference between Last-Modified or ETag? Expires or Cache-Control? You will soon. In this talk, we’ll remove the noise, get rid of everything we don’t need, and then step through a series of real-life scenarios to work out how to solve almost any caching situation with a series of questions.

Couvre le pourquoi et le comment de la mise en cache Web pour les personnes qui publient sur le Web. FAQ incluse.

A visual guide to the end of encryption as we know it.

Le monde des cryptos & des NFTs peut être à la fois dense et superficiel, transparent et opaque, technique et mystique. Afin de guider les touristes qui souhaitent partir à l'aventure, Etienne Mineur, designer et co‑fondateur de Volumique et Arnaud Levy, développeur et co‑fondateur de noesya proposent un voyage critique parmi ses lieux communs, ses îlots stéréotypés et ses montagnes technologiques.

Ever since I realized BASIC wasn’t the only living programming language, I thought about writing my own. Who wouldn’t? If you’re a developer, surely this idea popped into your mind at some point. N…

24 jours de web : Le calendrier de l'avent des gens qui font le web d'après.

Introduction to Web Components

To hear some people talk about functional programming, you’d think they’d joined some kind of cult. They prattle on about how it’s changed the way they think about code. They'll extol the benefits of purity, at length. And proclaim that they are now able to “reason about their code”—as if all other code is irrational and incomprehensible. It’s enough to make anyone skeptical. Still, one has to wonder. There must be a reason these zealots get so worked up. What are they so excited about?

A technical explainer by @kognise of how your computer runs programs, from start to finish. - hackclub/putting-the-you-in-cpu: A technical explainer by @kognise of how your computer runs programs, ...

An introduction to Web Authentication (WebAuthn), the new API that can replace passwords with strong authentication.

On trouve des compilateurs partout : quand on construit des programmes, bien sûr, mais aussi quand on visite la page web des Éditions Diamond — elle embarque du JavaScript, qui est probablement compilé à la volée par un composant de votre navigateur. Quand on utilise un Notebook Jupyter pour du calcul scientifique — ne serait-ce que pour la compilation en bytecode du source Python. Quand on installe un APK pour ART, celui-ci est transformé en code natif depuis son bytecode Dalvik… encore de la compilation. Et nous allons voir que le domaine de la compilation peut aussi très largement intéresser celui de la sécurité informatique et du reverse engineering.

A classification of chart types based on their input data format.

Learn why social media buttons could be harming your website, alternative social media engagement options, and more about the Web Share API.

You're not too stupid to understand what's going on.

If you’re reading this then you are a participant in the modern web. The web we are experiencing today is much different than what it was just 10 years ago. How has the web evolved, and more importantly – where is it going next? Also, why do any of these

What exactly is HTTP/3? Why was it needed so soon after HTTP/2 (which was only finalized in 2015)? How can or should you use it? And especially, how does this improve web performance? Let’s find out.

I will demonstrate writing a web component by implementing tabbed panels. The finished tabs will look like below. You can find the source code in this repository. Web Component is a standard built into the browser. At the time of writing every major browser supports this feature. It is an underrated feature and often shadowed by popular SPA frameworks like React and Angular. I say this feature is underrated because WC (Web Component) predates React and it does not require importing any external libraries. Enough of history lets see how to write a component. A WC needs two steps. A class that extends HTMLElement. Registering the component as a custom element. <!DOCTYPE html> <html> <head> <script> class WCTab extends HTMLElement { } //Step 1 customElements.define("wc-tab", WCTab) //Step 2 </script> </head> </html> That's it. A Web Component is ready to use. In registering the WC, the name must always contain a hyphen that is the reason it is wc-tab instead of wctab. This name is what needed to use this WC. We can use it just be creating a tag with same name as below. <body> <wc-tab></wc-tab> </body> Opening the html in browser doesn't show anything. It is not any better than an empty div at this point. Lets write something in between the opening and close tag. <wc-tab> <p>Hello world!</p> </wc-tab> This actually prints Hello world! in the browser! Shadow Root You almost always should enable shadow root in your WC. Shadow root provides scoped DOM tree with the web component as its root element. This enables us to import css styles without polluting the global scope. That means we can use css stylesheets and those styles will apply only within this custom element. Any tag with matching css selectors outside the custom component are unaffected. This can be enabled in our constructor as below. class WCTab extends HTMLElement { constructor() { super(); this.shadow = this.attachShadow({ mode: "open" }); } } As soon as this change is made, the hello world printed in the browser has disappeared. When shadow DOM is attached, it replaces our existing children. WC has few lifecycle callbacks, one of them is connectedCallback. It is called as soon as the WC is attached to dom. Lets add it! class WCTab extends HTMLElement { constructor() { super(); this.shadow = this.attachShadow({ mode: "open" }); } connectedCallback(){ console.log("connected!"); } } This prints connected! in console when the page is refreshed. Tab - Example Lets define how our tab component is going to be designed. Our WC will have each tab as div. The WC should define tab and its content as shown below. <wc-tab> <div name="Tab 1">Tab 1 content</div> <div name="Tab 2">Tab 2 content</div> <div name="Tab 3">Tab 3 content</div> </wc-tab> We are going to read the provided children as input and generate a UI to show them as tabs. it is possible to make each tab as its own custom element instead of div tag. We will stick with div for this example. Let's see how to access the children in our component. We are going to do this in our lifecycle method connectedCallback connectedCallback(){ let tabs = this.querySelectorAll("div"); console.log(tabs); } This is how we read the children. Unfortunately this does not work. connectedCallback is called before the children are attached to DOM. There is no simple way to read them as soon as they are attached. We go with MutationObserver. This observes changes for children and calls the given callback. connectedCallback() { let thisNode = this; let observer = new MutationObserver(function () { let tabs = thisNode.querySelectorAll("div"); console.log(tabs); }); // We are only interested in the children of // this component observer.observe(this, { childList: true }); }