HTTP/3 From A To Z: Core Concepts — Smashing Magazine
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 }); }
What does refurbished means for the environment? | Back Market
Buying refurbished tech and electronics can impact more than just your savings. We now have scientific proof that refurbished electronics help the planet.
Alors que la vague métavers engloutit le monde, difficile de ne pas boire la tasse… Cette étude entend aider les marques à voir le métavers à moitié plein et à identifier leurs opportunités sur le sujet.
Les serveurs proxy et reverse proxy pour les débutants | IT-Connect
Dans ce tutoriel, nous allons aborder les notions de proxy et reverse proxy de manière théorique, car ce sont deux notions très importantes en informatique.
Le mystère Satoshi : enquête sur l'inventeur du bitcoin | ARTE
À l’ère d’Internet, un groupe d’informaticiens, les Cypherpunks, cherche à coder une monnaie électronique anonyme et autonome, libre, directe, sans intermédi...
The performance of web sites and applications can be significantly improved by reusing previously fetched resources. Web caches reduce latency and network traffic and thus lessen the time needed to display resource representations. HTTP caching makes Web sites more responsive.
We have no privacy on the web anymore. Our data is stored with many third-parties, some even sell it behind our backs. Solid aims to put all our data in a si...
Searching the green web with Searx - The Green Web Foundation
We all search the web. And as we become more aware about our climate changing, we want to use greener products and services too. But how can you find them? We recently finished a project with the open source privacy protecting search engine Searx, to turn it into a green open source privacy protecting search… Read More »Searching the green web with Searx
You might have heard people say that functional programming is more academic, and real engineering is done in imperative style. I’m going to show you that real engineering is functional, and …
Des expériences pour mieux appréhender la croissance exponentielle
Albert Bartlett (1923-2013), professeur de physique à l’Université du Colorado, et qui a donné à partir des années 70 plus de 17209 conférences sur le thème: « arithmétique, population et énergie », ne cessait de répéter:
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
Take free Jamstack courses and complete missions about React, Vue, Angular, Next.js and more! See your progress and earn rewards as you go. Get started today!
A General Introduction to Cloud Computing | DigitalOcean
This conceptual article provides an introduction to the history, features, benefits, and risks of cloud computing. It is part of the Cloud Computing curriculum, which includes beginner-friendly, hands-on tutorials for setting up and securing servers,
This article provides a comprehensive overview of content delivery networks (CDNs). In addition, it explains how to choose, configure, and optimize a CDN setup.
