How much HTML, CSS, and JavaScript can we really afford? More than in years past, but much less than front-end developers are burdening experiences with.
A tool that brings attention and understanding to how color contrast can affect people with different visual impairments.
A creative coding lesson. How the SVG ViewBox works
Recently I made a wall calendar with 12 request waterfalls for a conference, highlighting different web performance issues. This article goes through these waterfalls one by one and explains what they show.
Essentially, there are multiple different ways in which we can attribute a certain task to other tasks or to the party that initiated it.
Those different ways are not always obvious, because for the straightforward case, they all kinda give you the same answer. As a result, it took me a while to wrap my head around their differences, and I’m hoping to save someone some time by outlining them.
A tool for drawing sassy UML diagrams based on syntax. Provides instant feedback and has a customizable styling.
Submagic is an AI for content creators that generates amazing captions with emojis for short-form content in under 2 minutes. Create your captions and skyrocket your video engagement.
HAR files are JSON-formatted archive files used to log web browser interactions. Developers and IT professionals often use the performance data in HAR files to troubleshoot issues. We want to make it possible to troubleshoot with HAR files without the threat of a stolen session. The HAR File Sanitzer will remove sensitive data using “clientside” logic.
It depends.
[…] I filed an issue on the WhatWG's HTML working standard asking the WhatWG to reinstate the feature in the HTML spec, which received some nice discussion from the community.
[…] What happens now is the change has made its way into the respective browsers' backlogs, which is awesome, but there's no indication of a timeline or priority for when the changes will be made.
[…] That is, if you're able to use streaming video protocols, by all means, do that!
Great explanation on how to generate and use as a background the smallest possible legitimate LCP image placeholder while waiting for our full-resolution image to arrive. While I admire the thoroughness of the article, I'm overcome by a feeling of sadness: I absolutely believe that this should be the role of a progressive image format, and not the shenanigans of front-end developers.
Read JavaScript for Web Designers by Mat Marquis online. A detailed yet approachable tour around this essential language: pick up syntax rules, the fundamentals of scripting, and much more.
Find people to follow on Mastodon by expanding your follow graph.
Saying no is hard, but it's also essential for your sanity. Here are some templates for how to say no - so you can take back your life.
In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty 0 characters all lined up in a row).
But the width of the 0 character differs from font to font. So when our web font was swapped, the width of 1ch changed, which impacted our layout
Découvrez la science et les techniques pour réussir la mousse au chocolat
There’s an tendency at times for organizations to treat performance as a checklist of sorts, particularly as we’ve seen the core web vitals metrics bring more attention to performance than ever before. You try to tick the box on those metrics to get them green, then call it a day. (This organization, to their great credit, did not do that.)
But none of that matters if those metrics aren’t painting a complete picture of how users interact with our sites.
Performance, like accessibility, is not about conformance.
It’s not about a checklist.
It’s not even about simply making things fast.
It’s about providing a better experience for the people using our sites and applications to make sure they can efficiently accomplish their goals. Doing that requires that we pay close attention to what those goals are, how they are trying to achieve them, and then making sure that the way we measure performance matches up.
Shadé Zahrai is a global peak performance educator with a knack for blending research, best practices, and moral underpinnings into actionable strategies that supercharge success.
As the co-founder and director of Influenceo Global, a positive-leadership hub she runs with husband Faysal, she trained and transformed leaders and teams - from spirited startups to iconic Fortune-500s. Their mantra? Invigorate cultures, amplify change-readiness, fortify engagement, and fuel performance.
With her courses, over 4 million learners have tapped into their potential. Her educational videos? They've been viewed over a staggering 100 million times and counting!
Right now as a scholar-practitioner, she's diving into a PhD that explores personality and career performance.
Shadé's mission is to help people get unstuck and confidently take charge of their life and career with ease and simplicity.
How you order elements in the <head> can have an effect on the (perceived) performance of the page.
This script helps you identify which elements are out of order.
A beautiful letter to progressive enhancement.
One of the hardest questions to answer related to Core Web Vitals is how to masure them in a Single-Page Application (SPA).
A map of accessibility laws by country/region.
While implementing third-party resources has downsides for performance and you should self-host your assets when possible, sometimes relying on external files is unavoidable. But be warned — using them can sometimes cause real headaches.
The only thing React is better at than other front-end frameworks is being popular. So how long will that self-perpetuating cycle continue?
Numéros de téléphone réserver aux œuvres de fiction :
- 01 99 00
- 02 61 91
- 03 53 01
- 04 65 71
- 05 36 49
- 06 39 98
Décision n° 2018-0881 du 24 juillet 2018 de l'Autorité de régulation des communications électroniques et des postes établissant le plan national de numérotation et ses règles de gestion
New web services are being built to a self-defeatingly low UX and performance standard, and existing experiences are now pervasively re-developed on unspeakably slow, JS-taxed stacks. At a business level, this is a disaster, raising the question: why are new teams buying into stacks that have failed so often before?
An updated overview of image loading optimization methods to improve LCP.
I guess the point I’m making in a way here is that I could never win a “dev race” because it takes me ages to even get to the point of writing code and that’s been the case for a lot of years now. The benefit to being like this though is I get to put out fires before they even start.
See also CSS tricks
Drag-and-drop a trace (or select a file)
We'll upload it and give you a shareable URL, with the Chrome DevTools Performance Panel…
Traces expire after 90 days. 🕶
In short, we wanted our list of top web performance recommendations to focus on:
- Recommendations we believe will have the largest real-world impact
- Recommendations that are relevant and applicable to most sites
- Recommendations that are realistic for most developers to implement
Priority Hints are used to indicate to the browser the relative priority of a resource. I take a deep dive into how you can improve your Largest Contentful Paint by using fetchpriority.
Designing, developing or leading a web project (or an app) have inherent constraints, and adding to them might take time and resources you do not have. On the other hand, avoiding non-quality can bring you much in lost revenue through better position on search engines, better compatibility, speed and accessibility leading to a lesser quit rate, or better word-of-mouth following great after-sale service.
A tree view (collapsible list) can be created using only html and css, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.
La microtypographie, bien appliquée sur votre site Web peut grandement améliorer la lisibilité. Regardons de plus près comment ça fonctionne !
For technical teams I advise to additionally track LCP(FE), or the Front End Component of LCP.
If nothing else, my hope is that this post helped shed some light on the fact that LCP is, by its very nature, a dynamic metric that is heavily dependent on user behavior. You can’t always know ahead of time what the LCP element is going to be for a given page, so it’s important that your optimization techniques can handle a range of possible outcomes, and adapt accordingly.
Le jeu de l'organisation de l’amélioration de l’accessibilité (OAA) vous guide dans la mise en accessibilité de votre service numérique.
Basé sur la dernière version du référentiel général d'amélioration de l'accessibilité (RGAA 4.1) vous pouvez :
- Faire un audit rapide (25 critères)
- Faire un audit complémentaire (50 critères)
- Faire un audit complet, dit de conformité (106 critères)
- Générer vos rapports d’audit et vos déclarations d’accessibilité
When measuring web performance, we often try to get a single number that we can trend over time. This may be the median page load time, hero image time, page speed score, or core web vitals score. But is it really that simple?
– Collect user errors
– Normalize & De-duplicate
– Cluster similar errors
– Measure User Impact
– Handle Script Error
When it comes to error handling, it truly is a team sport
Creating a performance story can only start with the data. Having a better understanding of your app’s state and continuously measuring and monitoring it is key to making sure you can ship the most impactful results to your users.
via Perf NL (https://calibreapp.com/newsletter)
Accessibility is a holistic practice that touches every aspect of creating a digital experience. This means it is also a backend web development consideration
via Perf NL (https://calibreapp.com/newsletter)
Finding out how browser and proxy caches behave (and misbehave)
You probably heard about the stories of Walmart that increased their conversion rate by 2% for every less second their page would take to load. While we found a clear correlation between page…
Progressive enhancement. Because sometimes your JavaScript just won’t work.
J’affirme ici que la non-qualité a des effets beaucoup plus graves sur la vie de ces populations. J’affirme que non, nous ne sommes pas égaux devant la non-qualité et que oui, si l’on se soucie vraiment de ces personnes, il est de notre devoir de proposer des contenus, des services, accessibles, sûrs, faciles à utiliser, simples, fiables, sobres et performants.
In this post, I want to look at ways to help mitigate and work around [the fact that site-speed is nondeterministic & most metrics are not atomic]. We’ll be looking mostly at the latter scenario, but the same principles will help us with the former. However, in a sentence: