Monthly Shaarli

All links of one month in a single page.

November, 2017

"Modern Asynchronous CSS Loading", Scott Jehl (@scottjehl) #NonCritical #CSS #WebPerf
thumbnail
"Designing For A Browserless Web", Mitch Lenton (@mitchquik) #PWA #UX
thumbnail

"What happens when we take the web browser out of web browsing?"

"accessibilityjs", a client side accessibility error scanner, by Github
thumbnail

Client side accessibility error scanner.

"Web Frameworks: Conclusions", Kit Kelly (@kitsonk) #Vue #Angular #React #Ember #Aurelia #Dojo

"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", Glenda Sims (@goodwitch) #a11y
thumbnail

Understanding WCAG 2.1: What to Expect

"A Comprehensive Guide To Web Design", Nick Babich (@101babich) #Design #BestPractices
thumbnail

A Comprehensive Guide To Web Design

"Who is mining? - Cryptocurrency mining URL checker", Diego Mariani (@0x13a) #Bitcoin (and other #CC)
thumbnail

whoismining.com checks if a website is secretly mining crypto currency abusing visitors CPU power

"Hooked and booked", Jeremy Keith (@adactio) #ABTesting #DarkPattern
thumbnail

"A/B testing is a great way of finding out what happens when you introduce a change. But it can’t tell you why."

"2018: 120fps and no jank", Surma (@DasSurma) #Animations #WebPerf
thumbnail
"The Cost Of JavaScript", Addy Osmani (@addyosmani) #javascript #webperf
thumbnail

less parse/compile + less transfer + less to decompress

"Google Chrome’s Color Contrast Debugger", Marcy Sutton (@marcysutton) #a11y #color
thumbnail

Chrome Canary’s developer tools have an experiment where you can debug color contrast right in the style inspector.

"Critical: Extract & Inline Critical-path CSS in HTML pages", by Addy Osmani (@addyosmani) #WebPerf

Critical extracts & inlines critical-path (above-the-fold) CSS from HTML

"The future of the #browser", Lin Clark (@linclark) for #btconf

"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."

#PerfMatters: Web Performance Conference – March 27-28, 2018 – Redwood City, CA #Conf
thumbnail
"Research with blind users on mobile devices", Ed Horsford (@edwardhorsford) #a11y
thumbnail

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.

"Advanced CSS-Only Form Styling", Jonathan Harrell (@HarrellofDurham) #Forms #CSS

"Learn about selectors both new and old that you can use to style form inputs based on requirement, validity and more."

"Load time is out!", Damien Jubeau (@DamienJubeau) #WebPerf

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!

.@insidefrontend, a front-end conf in Tokyo. Hoping there will be some #WebPerf!
"How to Build the Fastest Website in the World", Glynn Bird (@glynn_bird) #WebPerf

"Hopefully these ideas will help you reduce your page load times. Your visitors will thank you."

"Bring accessibility in your front-end projects easily", Mylene Chandelier (@CrazyCatLena) #a11y
thumbnail

"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."

"The Accessibility Cheatsheet", Ire Aderinokun (@ireaderinokun) #a11y
"Comparing Browser Page Load Time: An Introduction to Methodology", Dominik Strohmeier, Peter Dolanjski (@pdolanjski)
thumbnail

Explanation of their browser comparison methdology.

"We need to get people excited again about owning their data. For our sake and theirs." Christian Heilmann (@codepo8)

"We need to get people excited again about owning their data. For our sake and theirs."

"A Look at Angular Alongside Vue", John Papa (@john_papa) #framework
thumbnail

"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."

"AMP & Design : peut-on réellement reproduire les services mis en place sur nos sites ?", Myriam Breton (@MyriamGiry) #AMP
thumbnail

"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", Matt Southern (@MattGSouthern) #AMP #DarkPattern
thumbnail

Google to Go After Sites That Use AMPs as Teaser Pages

"When filters fail: These cases show we can’t trust algorithms to clean up the internet", Julia Reda (@Senficon)

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.

"How to Optimize the Critical Rendering Path in WordPress", Carlo Daniele (@carlodaniele) #Critical #WebPerf
thumbnail

"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."

Test the experimented latency of your website around the globe (Apex Software)
DeltaV Conference: Redefining Web Performance. 10-11 May 2018, London, UK. #WebPef #Conf
"Advanced SQL - window functions", Michał Konarski (@mjkonarski)

Window functions are my favorite advanced SQL feature. They simply allow to do aggregations without actually aggregating the result set.

"Inside Forbes: After 100 Years, Speeding Our Way Into The Now And The Next", Lewis DVorking (@lewisdvorkin) #webperf #press #pwa
thumbnail

"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."

"High Resolution Time Level 2", W3C

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 #Quality #Documentation

FRONTEND STYLE GUIDE
Kaliop Team Standards 2.0 — November 2017

"Lazy Loading Routes in #React", Yomi Eluwande (@yomieluwande) #WebPerf
thumbnail

"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."

"Le temps de chargement est mort !", Damien Jubeau #WebPerf
thumbnail

"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."

"From Zero to Hero – Web Performance", Sebastian Springer (@basti_springer) #WebPerf

"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."

"Why web typography really does matter", Richard Rutter (@clagnut) #Typography
thumbnail

Typography on the web matters because typography matters.

"I Watched All of the Chrome Dev Summit 2017 Videos So You Don’t Have To", Dan Fabulich (@dfabu)

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.

"Building Accessible Menu Systems", Heydon Pickering (@heydonworks) #a11y #navigation
thumbnail
  • 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.
"Introducing Progressive Web Apps: What They Might Mean for Your Website and SEO", Pete Watson-Wailes (@pwatsonwailes)
thumbnail

"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™"

"WPO Stats", Tammy Everts (@Tammy Everts) and Tim Kadlec (@tkadlec)
"Advice From A 19 Year Old Girl & Software Developer", Lydia Hallie (@lydia_hallie) #Programming #Life #Balance
"Friendships and respect", Stéphane Deschamp (@accessiblestef) #Friendship #Network #Respect

"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."

"23 Minutes of Work for Better Font Loading", Zach Leatherman (@zachleat) #fonts #webperf
thumbnail

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!

"Egoless Programming", Bertrand Le Foulgoc. #PairProgramming

"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 ?"

"HTTP/2 PUSH vs HTTP Preload", Inian Parameshwaran (@everConfusedGuy) #H2 #WebPerf

Definitions, use cases and short diagram to use either preload or push for better HTTP/2 performance.

"Magento vs. Shopify. What eCommerce Platform to Use?", Dmitriy Nesterov

Pros and Cons of Two majors e-commerce solutions

"The Front-End Checklist", David Dias (@thedaviddias) #Quality
thumbnail

The Front-End Checklist Application is perfect for modern websites and meticulous developers!

"What is the Service Worker Cache Storage Limit?", Chris Love (@ChrisLove) #WebPerf #PWA #Cache

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.

"De l’état du marché du développement", Jean-Baptiste Dusseault (@BodySplash) #Dev #RH
"Medium is only an edge server of your POSSE CDN, your own blog is the origin", Nicolas Hoizey (@nhoizey) #ContentManagement #Governance

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…", Melody Kramer (@mkramer)
thumbnail

"How to design for low-bandwidth users: a conversation with members of Wikimedia’s Global Reach, Audiences, and Performance teams"

"Performance Timeline Level 2", W3C

This specification extends the High Resolution Time specification by providing methods to store and retrieve high resolution performance metric data.

"Improving performance with background data prefetching", @Instagram Engineering #WebPerf #UX #Offline

"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"
"#RWD Podcast #66 : Grid Layout, Ecommerce Performance, and IphoneX", Justin Avery #WebPerf

Grid Layout, Ecommerce Performance, and IphoneX

"Against an Increasingly User-Hostile Web", Parmal Satyal (@parimalsatyal) #Web #Values

"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?"

"Building a Fast Search Experience", Elliot Sumner for AutoTrader's Blog (@AutoTrader) #WebPerf #UX #Search
thumbnail

"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."

"Intégrer facilement de l’a11y dans votre projet front-end", Mylène Chandelier (@CrazyCatLena) #a11y
thumbnail

"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."