Using Composer With WordPress — Smashing Magazine
▻https://www.smashingmagazine.com/2019/03/composer-wordpress
Intégration de Composer dans Wordpress : problèmes techniques et solutions existantes. De nombreuses similitudes avec SPIP mais des solutions déja opérationnelles (entre autre un serveur packagist spécifique)
Don’t Use The Placeholder Attribute
▻https://www.smashingmagazine.com/2018/06/placeholder-attribute
“The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Let’s clarify why you need to stop using it.”
The p element placed between the label and input elements acts as a replacement for a placeholder attribute.
Cool, c’est ce que propose #SPIP dans sa nomenclature depuis longtemps...
By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience. aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
On pourrait suivre ce conseil pour améliorer la chose dans le plugin saisies.
I Used The Web For A Day With JavaScript Turned Off
▻https://www.smashingmagazine.com/2018/05/using-the-web-with-javascript-turned-off
“The web is a hostile, unpredictable environment, which is why many developers follow the principle of progressive enhancement to build their sites up from a core experience of semantic HTML, layering CSS and unobtrusive JavaScript on top of that.”
A Guide To The State Of Print Stylesheets In 2018
▻https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018
Testing print stylesheets can be something of a bore, typically requiring using print preview or printing to a PDF repeatedly. However, browser DevTools have made this a little easier for us. Both Chrome and Firefox have a way to view the print styles only.
#Firefox : Open the Developer Toolbar then type media emulate print at the prompt.
Using SSE Instead Of WebSockets For Unidirectional Data Flow Over HTTP/2
▻https://www.smashingmagazine.com/2018/02/sse-websockets-data-flow-http2
“When it comes to data delivery from the server to the client, we are limited to two general approaches: client pull or server push. As a simple example with any web application, the client is the web browser. When the website in your browser is asking the server for data, this is called client pull. The reverse, when the server is proactively pushing updates to your website, it is called server push.”
#ServerSentEvents_push_server_client_communication_HTTP2_WebSocket_clevermarks
Des media queries pour savoir si l’usager en est réduit à viser grossièrement avec ses gros doigts boudinés, ou s’il peut piquer précisément comme une abeille :
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
▻https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018
@media (pointer:coarse) {
.which-pointer::after {
content: "You have a coarse pointer, are you on a touchscreen device?";
}
}
@media (pointer:fine) {
.which-pointer::after {
content: "You have a fine pointer, are you using a mouse or trackpad?";
}
}
Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver
▻https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api
“In this article, we are going to go out of the scroll darkness and talk about the modern way of lazy-loading resources. Not just lazy-loading images, but loading any asset for that matter. More so, the technique we are going to talk about today is capable of much more than just lazy-loading assets: We will be able to provide any type of deferred functionality based on the elements’ visibility to users.”
A Sneak-Peek Inside The Southeast Asian Web Community
▻https://www.smashingmagazine.com/2017/12/on-the-road-with-mozilla
“here’s a little recap of our journey to the Southeast Asian web community and some things we learned along the way.”
Progressively Enhancing #CSS Layout: From #Floats To #Flexbox To #Grid
▻https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid
When you open the demo, you’ll find yourself on the home page of a website with a very basic layout. You can adjust the slider in the top left to enhance the experience. The layout switches from being very basic to being a float-based layout to being a flexbox layout and, finally, to being one that uses grid.
▻https://s.codepen.io/matuzo/debug/Emddvx
In the following sections, I’m going to show you how I built parts of the demo and why some things just work out of the box.
Using #CSS #Grid: Supporting Browsers Without Grid
▻https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid
When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.
In this article, I explore approaches to dealing with #browser_support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?
A Brief Overview On #Responsive #Navigation Patterns
In this article, I want to look specifically at the issue of responsive navigation. We will first talk about information architecture, then the purpose of navigation, and finally we will look at three responsive navigation patterns that have served well over time.
▻https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns
▻https://bradfrost.github.io/this-is-responsive/patterns.html#navigation
Creating Secure Password Resets With JSON Web Tokens
▻https://www.smashingmagazine.com/2017/11/safe-password-resets-with-json-web-tokens
“When a user of your application has forgotten their password, it can and should be reset securely. To accomplish a secure password reset, I will demonstrate how to use JSON Web Tokens (JWT) to generate a URL-safe token.”
XRespond – Virtual Device Lab
I came across Matt Kersley’s Responsive Web Design Testing Tool ▻http://mattkersley.com/responsive and was blown away. It cut my development time in half. Even though the app was quite basic, it quickly became indispensable, and I continued to use it for several years.
It was very much to my surprise that I never saw this brilliant concept taken any further. This, combined with the lack of features, set me on a journey to create the open-source virtual device lab XRespond.
via ▻https://www.smashingmagazine.com/2017/09/xrespond-building-responsive-websites-simpler
#responsive #outil #test
#Fluid #Responsive #Typography With #CSS Poly Fluid Sizing
▻https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing
Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.
That’s called a trendline. It’s a way to find an interpolated font-size value for any viewport width, based on the data provided.
The are several methods for determining the slope and y-intercept. When multiple values are involved, a common method is the Least Squares fit:
You can use the trendline equation like this:
h1 {
font-size: calc({slope}*100vw + {y-intercept}px);
}
Once you find your slope and y-intercept you just plug them in! 
Ya des gens qui sont pétés du bulbe quand même. :D
Et une preuve de plus que le métier d’intégrateurice n’a rien à envier en complexité aux devs « backend ». :)
Ouais, alors bon, faut quand même un petit niveau de math !
J’ai calculé ma pente, mais le y-intercept, c’est autre chose... c’est quoi les Y et X avec une barre dessus dans cette formule :
Note pour plus tard : penser à mieux écouter les cours de math...
Using A Static Site Generator At Scale: Lessons Learned – Smashing Magazine
▻https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned
Static site generators are pretty en vogue nowadays. It is as if developers around the world are suddenly realizing that, for most websites, a simple build process is easy enough to render the last 20 years of content management systems useless. All right, that’s a bit over the top. But for the average website without many moving parts, it’s pretty close!
Mavo: A new, approachable way to create Web applications
▻https://mavo.io
Mavo helps you turn your static HTML into reactive web applications without a single line of programming code and no server backend.
Developed at MIT CSAIL and led by Lea Verou.
introduction:
▻https://www.smashingmagazine.com/2017/05/introducing-mavo
Ça tue le game du #CMS, ça oblige en tout cas à repenser beaucoup de choses…
Mavo is a language that extends HTML to describe applications that manage, store, and transform data
la doc officielle : ▻https://mavo.io/docs
#mavo #application #portable #js #html
Projet d’un labo du MIT (dont Lea Verou), avec même une étude utilisateur pour valider le concept, review scientifique et tout. Z’ont pas fait les choses à moitié…
Encore un truc à apprendre. :)
oui mais contrairement à d’autres trucs, c’est très très facile
▻https://bl.ocks.org/Fil/bd34bc50c53608fc1ab6f3472e065769
without a single line of programming code
Hum... J’ai cru lire du code JS dans l’exemple ci-dessus.
Bah non, l’exemple écrit par @fil c’est du JS de D3 qui interagit avec Mavo.
Creating One Browser Extension For All Browsers: Edge, Chrome, Firefox, Opera, Brave And Vivaldi
▻https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi
“It’s awesome to see that, today, using our regular JavaScript, CSS and HTML skills, we can build great extensions using the very same code base and across all browsers!”
Redesigning The Paris Metro Map
▻http://feedproxy.google.com/~r/SmashingMagazine/~3/0-vrCcFLs24
When I first visited Paris, it took me a while to get oriented and put together a route using the official map of the Paris metro. That’s all it took to spark the flame inside me to redraw it according to an entirely different set of principles. The goal was extremely ambitious, but why not try?
In this article, I will attempt to describe the principal solutions involved in the development of my own version of the Paris metro map. But for a moment, I’ll just jump ahead to the result.
Merci, c’est intéressant, j’ai vu une initiative similaire pour le métro de Londres ! #joli en tout cas.
J’ai retrouvé ça. Il y a eu des précédents.
Et je copie le lien de la carte de ton article, au cas où ça serait supprimé, on aurait toujours la miniature.
Redesigning The Paris Metro Map - Constantinе Konovalov
▻https://www.smashingmagazine.com/2017/01/redesigning-the-paris-metro-map
I am unable to discuss the entire process that went into the creation of this new map, because it took me around two and a half years to complete, and an article of that length would bore even the most committed of readers. In this light, I will cover only the principal graphical solutions. At the end of the report, I have included a time-lapse video of the entire creation process.
avec une #vidéo du #processus que je n’arrive pas à intégrer ici, mais qui est cool
le site : ▻http://metromap.fr
Understanding Critical CSS
▻https://www.smashingmagazine.com/2015/08/understanding-critical-css
“The web is slow, yet there are a few simple strategies to make websites faster. One of them is inlining critical CSS into the of your pages, yet how exactly do you do it if your site contains hundreds of pages, or even worse, hundreds of different templates? You can’t do it manually. Dean Hume explains an easy way to get it done. If you’re a seasoned web developer, you might find the article obvious and self-explanatory, but it’s a good piece to show to your clients and junior developers for sure.”