Coder Survival Guide

Coder Survival Guide

5839 bookmarks
Newest
Formation écoconception
Formation écoconception
[vidéo sous-titrée en direct]Pourquoi et comment écoconcevoir des services publics numériques.Objectifs : • Connaître et mesurer les impacts environnementaux...
·youtube.com·
Formation écoconception
Is it Plausible to stop using Google Analytics?
Is it Plausible to stop using Google Analytics?
Google Analytics, or GA, has been the industry standard web analytics tool for about as long as there have been analytics tools. Nearly every brief that we receive as a digital agency specifies that Google Analytics must be installed. And there is rarely any debate around whether it’s the best tool for the job. For […]
·wholegraindigital.com·
Is it Plausible to stop using Google Analytics?
(1) Post | LinkedIn
(1) Post | LinkedIn
Vers des applications un peu plus écoresponsables. Présentation à Domolandes (26/10/2021).
·linkedin.com·
(1) Post | LinkedIn
Elite Designers and Sustainability
Elite Designers and Sustainability
Design is a elite culture, with elite participants. They belong to that half of America and other countries that generally benefited from the economy in the last 40 years, while the other half has …
·sustainablevirtualdesign.wordpress.com·
Elite Designers and Sustainability
Lighthouse Simulator
Lighthouse Simulator
See how different network speeds affect site speed metrics. This tool is based on the simulated throttling feature in Lighthouse.
·debugbear.com·
Lighthouse Simulator
John Wanamaker – we now know which half of your ad money is wasted!
John Wanamaker – we now know which half of your ad money is wasted!
In one of the most famous quotes in advertising, John Wanamaker is reputed to have said: Half the money I spend on advertising is wasted; the trouble is I don’t know which half. Since about 2014, companies like Google and comScore, and organizations like the Internet Advertising Bureau have started to report on ad viewability,…
·beta.grbn.org·
John Wanamaker – we now know which half of your ad money is wasted!
Optimizing your AWS Infrastructure for Sustainability, Part I: Compute | Amazon Web Services
Optimizing your AWS Infrastructure for Sustainability, Part I: Compute | Amazon Web Services
As organizations align their business with sustainable practices, it is important to review every functional area. If you’re building, deploying, and maintaining an IT stack, improving its environmental impact requires informed decision making. This three-part blog series provides strategies to optimize your AWS architecture within compute, storage, and networking. In Part I, we provide success criteria […]
·aws.amazon.com·
Optimizing your AWS Infrastructure for Sustainability, Part I: Compute | Amazon Web Services
Is “software eco-design” a solution to reduce the environmental impact of electronic equipments? | Request PDF
Is “software eco-design” a solution to reduce the environmental impact of electronic equipments? | Request PDF
Request PDF | On Sep 1, 2016, Marc Vautier and others published Is “software eco-design” a solution to reduce the environmental impact of electronic equipments? | Find, read and cite all the research you need on ResearchGate
·researchgate.net·
Is “software eco-design” a solution to reduce the environmental impact of electronic equipments? | Request PDF
Characterization of the energy consumption of websites: Impact of website implementation on resource consumption | Request PDF
Characterization of the energy consumption of websites: Impact of website implementation on resource consumption | Request PDF
Request PDF | On Jan 1, 2014, Olivier Philippot and others published Characterization of the energy consumption of websites: Impact of website implementation on resource consumption | Find, read and cite all the research you need on ResearchGate
·researchgate.net·
Characterization of the energy consumption of websites: Impact of website implementation on resource consumption | Request PDF
Marketing digital Responsable | Le Manifeste et le Référentiel
Marketing digital Responsable | Le Manifeste et le Référentiel
Découvrez le projet Marketing Digital Responsable : manifeste et référentiel. Ancrer des pratiques responsables au sein des équipes marketing pour définir des standards respectueux des utilisatrices et utilisateurs.
·marketingdigitalresponsable.org·
Marketing digital Responsable | Le Manifeste et le Référentiel
State of Green Software
State of Green Software
A new report that brings global insights and data from industry leaders and researchers to the forefront to reduce software's harm to Earth and increase investment in decarbonizing software at scale.
·stateof.greensoftware.foundation·
State of Green Software
A Web Component Intro with Example
A Web Component Intro with Example
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 }); }
·blog.rasvi.io·
A Web Component Intro with Example
EcoSonar | Home
EcoSonar | Home
EcoSonar the ecodesign and accessibility audit tool to minimize web carbon footprint easily
·ecosonar.org·
EcoSonar | Home
Note d'analyse : Planifier la décarbonation du système numérique en France - The Shift Project
Note d'analyse : Planifier la décarbonation du système numérique en France - The Shift Project
Share:Nous avons le plaisir de vous présenter notre nouvelle note d’analyse : « Planifier la décarbonation du système numérique en France : cahier des charges ». Elle fait suite à la participation du Shift Project aux groupes de travail lancés par le Haut Comité du Numérique Ecoresponsable (HCNE) pour proposer une feuille de route de décarbonation du […]
·theshiftproject.org·
Note d'analyse : Planifier la décarbonation du système numérique en France - The Shift Project