Monthly Shaarli
November, 2017
"What happens when we take the web browser out of web browsing?"
Client side accessibility error scanner.
"We have tried to answer the unanswerable: What framework should I use? […] A framework is nothing more than an embodiment of some patterns, integration of some technologies, and source code to help make our web applications easier to build and maintain."
Understanding WCAG 2.1: What to Expect
A Comprehensive Guide To Web Design
whoismining.com checks if a website is secretly mining crypto currency abusing visitors CPU power
"A/B testing is a great way of finding out what happens when you introduce a change. But it can’t tell you why."
less parse/compile + less transfer + less to decompress
Chrome Canary’s developer tools have an experiment where you can debug color contrast right in the style inspector.
Critical extracts & inlines critical-path (above-the-fold) CSS from HTML
"The browser needs to get faster. The first browser was created almost 30 years ago. Since then, the browser has moved from its past as a simple document viewer towards a future as a fully-featured application platform. But those applications are testing the limits of current browsers, especially on devices like smartphones. To support those applications, browsers need to adapt to modern hardware."
Using a screen reader by touch is different than using it by keyboard - our research found that there are different usage patterns and new design challenges to think about.
"Learn about selectors both new and old that you can use to style form inputs based on requirement, validity and more."
To successfully manage your website performance, you first have to adopt a reliable and rigorous measuring tool – as Dareboost of course! Then, identify and use a combination of several performance indicators, meeting your objectives. If you would have to keep a single one, It should be the Speed Index!
"Hopefully these ideas will help you reduce your page load times. Your visitors will thank you."
"Here are the methods I put in place on all new projects I work on even if accessibility is not in the scope. As you can see, it’s quick to set up and does not ask to dive into repositories or have a big knowledge on the subject."
Explanation of their browser comparison methdology.
"We need to get people excited again about owning their data. For our sake and theirs."
"I spent a few days on and off learning parts of Vue to write a small app. I wrote the same app with Angular. I'm sharing my experience of working through Vue for the first time to help others that may be curious about the JavaScript framework landscape."
"Le parcours utilisateur e-commerce est donc faisable et réalisable en AMP. Votre page produit ou catégorie s’affichera dans les premiers résultats dans le moteur de recherche Google, la performance d’affichage et la navigation entre les pages seront améliorées pour une meilleure satisfaction de vos clients et sans doute plus d’achats sur mobile !"
Google to Go After Sites That Use AMPs as Teaser Pages
Installing censorship infrastructure that surveils everything people upload and letting algorithms make judgement calls about what we all can and cannot say online is an attack on our fundamental rights.
"The Critical Rendering Path Optimization is a process of improvement and measurement that requires a clear understanding of every task the browser performs to convert code into pixels and so to render a page on the screen. You can learn more about Critical Rendering Path in Google’s optimization guide."
Window functions are my favorite advanced SQL feature. They simply allow to do aggregations without actually aggregating the result set.
"First came a commitment to writing high-quality code. That required our programmers to think like minimalists. After that we moved to what the industry calls continuous deployment, or non-stop micro-product releases of new features, updates, maintenance and more. Real-time and comprehensive QA are also part of the process. Gone is that enterprise tech ethos of drumroll-release dates that are many months if not years apart. For the PWA, our journalists needed to stretch themselves beyond a century-old reliance on the 800-word story."
This specification defines an API that provides the time origin, and current time in sub-millisecond resolution, such that it is not subject to system clock skew or adjustments.
FRONTEND STYLE GUIDE
Kaliop Team Standards 2.0 — November 2017
"We can do that by utilizing Lazy Loading. Lazy loading is a great way to optimize your site, and it does that by splitting your code at logical breakpoints, and then loading it once the user has done something that requires, or will require, a new block of code. This speeds up the initial load of the application and lightens its overall weight as some blocks may never even be loaded."
"Trop souvent le temps de chargement est source de discussions et de débats entre clients et prestataires, entre décideurs et équipes techniques.
S’il ne fait aucun doute de la nécessité de faire de la vitesse de chargement un sujet stratégique et d’y impliquer tous les acteurs de la chaîne de valeur d’un projet web, il est absolument nécessaire de choisir des indicateurs pertinents et stables. On ne peut améliorer que ce que l’on mesure, et cette mesure doit être fiable."
"Nobody likes to wait for web pages to load in the browser. The longer it takes, the more dissatisfied the users become. Slow web pages lead to a higher bounce rate and the loss of customers. To solve this kind of problems can be very hard sometimes. Before you even start to optimise your page, you have to understand the workflows a browser performs in order to display a page on the screen."
Typography on the web matters because typography matters.
tl;dr: Google wants you to build PWAs, reduce JavaScript file size, use Web Components, and configure autofill. They announced only a handful of features around payments, authentication, Android Trusted Web Activities, Chrome Dev Tools, and the Chrome User Experience Report.
- Don’t use ARIA menu semantics in navigation menu systems.
- On content heavy sites, don’t hide structure away in nested dropdown-powered navigation menus.
- Use aria-expanded to indicate the open/closed state of a button-activated navigation menu.
- Make sure said navigation menu is next in focus order after the button that opens/closes it.
- Never sacrifice usability in the pursuit of JavaScript-free solutions. It’s vanity.
"Progressive Web Apps. Ah yes, those things that Google would have you believe are a combination of Gandhi and Dumbledore, come to save the world from the terror that is the Painfully Slow Website™"
"I do not promote their work because they are my friends, no ; actually it’s the other way around : we became friends because of mutual respect and admiration for each other’s work."
The above steps can serve as a shortlist of things you can quickly do to make an improvement to your site. It doesn’t have to be the best—just make it better!
"Prenez le temps de sonder votre égo, à quel niveau se trouve-t-il ? Avez vous remarqué comme il pouvait changer en fonction des situations, donc des actions de chacun dans l’équipe ?"
Definitions, use cases and short diagram to use either preload or push for better HTTP/2 performance.
Pros and Cons of Two majors e-commerce solutions
The Front-End Checklist Application is perfect for modern websites and meticulous developers!
Understanding how much storage is available to your application is important when planning your experience. You need to find a good balance between caching everything and caching responsibly.
Medium is only an edge server of your POSSE CDN, your own blog is the origin
"How to design for low-bandwidth users: a conversation with members of Wikimedia’s Global Reach, Audiences, and Performance teams"
This specification extends the High Resolution Time specification by providing methods to store and retrieve high resolution performance metric data.
"Through data analysis and user research, we’ve come up with a few principles that represent the major pain points and areas for improvement:
- Offline is a status, not an error
- The offline experience is seamless
- Build trust through clear communication"
Grid Layout, Ecommerce Performance, and IphoneX
"Do we want the web to be open, accessible, empowering and collaborative? Free, in the spirit of CERN’s decision in 1993 or the open source tools it's built on? Or do we want it to be just another means of endless consumption, where people become eyeballs, targets and profiles? Where companies use your data to control your behaviour and which enables a surveillance society — what do we want?"
"This post demonstrates some of the changes we did to improve our search experience. Combined with a number of optimisations on the back end to improve the performance of trade search, we were able to get the search results to appear below one second, even when searching through nearly half a million vehicles. In a future post, we will look at what changes were needed on the server side to improve search performance."
"Voici les méthodes que je mets en place sur tous les nouveaux projets sur lesquels je travaille même si l’accessibilité n’est pas dans le scope. Comme vous pouvez le constater, c’est rapide à mettre en place et ne demande pas de se plonger dans des référentiels ou d’avoir une connaissance approfondie sur le sujet."