Passer de node-sass à dart sass - Alsacreations
▻https://www.alsacreations.com/astuce/lire/1865-Passer-de-node-sass-a-dart-sass.html
Howto pour le passage de node-sass (obsolète désormais) à dart-sass
Pour la correction automatique de la syntaxe des divisions dans les feuilles de style SCSS, voir le script
sass-migrator : ▻https://sass-lang.com/documentation/cli/migrator
#SASS #SCSS #dart-sass #node #migration #division #sass-migrator
Corriger le problème de hauteur 100% (100vh) sur mobile - Alsacreations
▻https://www.alsacreations.com/astuce/lire/1831-corriger-le-probleme-de-hauteur-100vh-sur-mobile.html
2 contournements (CSS ou JS) du bogue de Safari sur le calcul du 100vh
(comme Microsoft avec IE6 il y a quelques années, Apple se sent suffisamment en position de force sur les navigateurs mobiles pour faire n’importe quoi et si possible non compatible avec les standards...)
Le hack de cette solution, c’est le @support pour détecter uniquement Safari (et en théorie, ce genre de chose c’est mal…). Sans cela, dans mon expérience, la valeur -webkit-fill-available est détectée par Chrome (au lieu d’être ignorée), mais qui la met à zéro, ce qui casse totalement la maquette.
/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
body {
/* The hack for Safari */
min-height: -webkit-fill-available;
}
}
Géolocalisation en HTML5 - Alsacreations
▻https://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html
Exemple de code pour récupérer les coordonnées GPS + altitude dans une appli web (JS + HTML5)
La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
▻https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html
Utiliser les media query en javascript
Voir aussi :
– la doc MDN : ▻https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
– des exemples : ▻https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Tester_les_media_queries
STRONG, B, I, EM : quelle balise utiliser et pourquoi ? - Alsacreations
▻https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html
Mémo pour l’utilisation des balises inline : mise en évidence et/ou présentation
#sémantique #balise #html
Éléments HTML5 de structure - romy.tetue.net
▻http://romy.tetue.net/elements-html-5-de-structure
Le mémo de romy.tetue.net pour l’organisation de la structure d’une page en HTML5
Sur les imbrications section/article voir aussi : ▻https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Sur la structuration implicite du plan des éléments de la page généré par ces balises, voir : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document
Responsive Images : comprendre srcset et sizes - Alsacreations
▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web
#srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS
Bonnes pratiques en CSS : BEM et OOCSS - Alsacreations
▻https://www.alsacreations.com/article/lire/1641-Bonnes-pratiques-en-CSS--BEM-et-OOCSS.html
Présentation de la méthode BEM pour le nommage et l’organisation des CSS.
La convention de nommage « officielle » BEM : ▻https://en.bem.info/methodology/naming-convention
Compléments à la méthode BEM : BEMIT : ▻https://www.bearstudio.fr/blog/bemit
Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout :
concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
Exemples : ►https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout
Données sémantiques, structurées et associées, le choix JSON-LD - Alsacreations
▻https://www.alsacreations.com/article/lire/1780-donnees-semantiques-structurees-associees-le-choix-JSON-LD.html
JSON-LD est une adaptation de JSON qui permet de servir des données associées (utilisant un vocabulaire défini par avance) et structurées sur le Web.
Successeur des microformats / microdatas HTML5, semble bien parti pour devenir LE format des données sémantiques sur le web.
Voir aussi :
– la doc de Google dev pour les « données structurées » en tant qu’élément fondamental dans le référencement d’un site : ▻https://developers.google.com/search/docs/guides/intro-structured-data
– la dernière version de la spécification du w3c : ▻https://w3c.github.io/json-ld-syntax
#JSON-LD #données_structurées #microformat #microdata #référencement #web_sémantique
Les couleurs et l’accessibilité - Alsacreations
▻https://www.alsacreations.com/actu/lire/811-couleurs-accessibilite-contraste.html
En France, la proportion de daltoniens est d’environ 8% chez les hommes et 0,45% chez les femmes (source Wikipédia). Plus de 10% de la population masculine est daltonienne dans le monde, et affectée par une perception des couleurs déficiente. Il existe différentes formes de cécité des couleurs : rouge-vert, vert-brun, et ainsi de suite... Bien entendu, il est très difficile, voire impossible d’éviter de mettre sur son site toutes les couleurs qui pourraient être mal perçues.
Cependant, il est à la portée de tout le monde de faire en sorte que les pages soient lisibles par tous, quel que soit le handicap visuel. La première méthode et la plus simple à mettre en œuvre est l’emploi d’un contraste élevé entre l’arrière plan et les couleurs utilisées pour le contenu de la page.
L’élément
▻https://www.alsacreations.com/actu/lire/1776-Lelement-ltmaingt.html
Depuis quelques années, HTML propose un meilleur découpage sémantique des pages et applications web ...
L’élément
▻https://www.alsacreations.com/actu/lire/1776-element-main-html5.html
Depuis quelques années, HTML propose un meilleur découpage sémantique des pages et applications web ...
Lodash
►https://lodash.com
Une bibliothèque JavaScript pour manipuler des données en ajoutant des instructions natives :
- pour des tableaux, objets, chaînes de texte
- pour tester et manipuler des valeurs
- pour créer des fonctions composites
Au contraire de jQuery elle n’est pas prévue pour manipuler le DOM HTML mais de se concentrer sur les structures du langage.
Voir aussi :
- une présentation rapide en français : ▻https://www.alsacreations.com/outils/lire/1746-Lodash.html
- la doc officielle : ▻https://lodash.com/docs
Très très bien.
On peut aussi n’en utiliser que des morceaux selon ses besoins, sans charger tout le core.
Permet aussi de faire de la #programmation_fonctionnelle avec map, filter etc.
Optimisez vos polices web - Alsacreations
▻https://www.alsacreations.com/article/lire/1741-Optimisez-vos-polices-web.html
Gestion des polices web : bonnes pratiques, optimisations, formats, stratégies de chargement...
Présente aussi la (nouvelle) spécification W3C « rel=preload » pour précharger les ressources d’une page (cf ▻https://developer.mozilla.org/fr/docs/Web/HTML/Pr%C3%A9charger_du_contenu)
Ressources supplémentaires :
- une collection de webfont optimisées : ▻https://github.com/alsacreations/webfonts
- le guide complet de toutes les alternatives pour la gestion des polices dans les pages web (en anglais) : « A Comprehensive Guide to Font Loading Strategies » : ►https://www.zachleat.com/web/comprehensive-webfonts
CSS Grid Layout arrive, préparez-vous ! – La Tête dans le Flux
▻https://blog.goetter.fr/2016/11/30/css-grid-layout-arrive-preparez-vous/comment-page-1/#comment-616
En résumé :
Grid Layout est un module de positionnement parfait pour construire ses templates et ses grilles, bref l’architecture globale de la page
Flexbox est parfait pour les composants qui constituent l’intérieur de nos gabarits : navigations, sliders, fiches produits, etc.
L’idée serait de pouvoir se passer de bootstrap pour gérer les grilles dans les pages HTML...
Voir aussi :
– comparatif de toutes les possibilités pour des grilles en CSS : float, inline-block, table-cell, columns, flexbox, grid ▻https://blog.goetter.fr/2014/10/27/le-point-sur-les-grilles-en-css
Grid layout :
– le positionnement par grid layout : ▻http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html
– le site de référence pour grid layout, page des exemples : ►http://gridbyexample.com/examples
– des exemples avancés d’utilisation de grid layout : ▻https://blog.goetter.fr/2016/01/02/grid-layout-vers-la-grille-parfaite
– une sélection de références par le gourou d’Alsacréation : ▻https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.htm
– plein d’exemples de layout basés sur grid : ►https://gridbyexample.com/examples
– l’outil de développement de Firefox spécialisé pour l’inspection des grilles : ►https://www.mozilla.org/en-US/developer/css-grid
Flexbox :
– revue exhaustive des caractéristiques de flex : ▻https://chriswrightdesign.com/experiments/flexbox-adventures
– une présentation complète et progressive de flexbox : ▻https://la-cascade.io/flexbox-guide-complet
– exploration des possibilités de CSS flexbox (flex, flex-item, order...) : ►http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
– un générateur de code pour les propriétés flex : ▻http://the-echoplex.net/flexyboxes
– des exemples de grilles en flex : ►https://philipwalton.github.io/solved-by-flexbox
Et pour la norme :
– Flexible box : ▻https://www.w3.org/TR/css-flexbox-1
– Grid layout : ▻https://www.w3.org/TR/css-grid-1
#css, #flex, #flexbox, #grid, #grid_layout, #grille #bootstrap
Du zoning au mockup, itinéraire d’une maquette web - romy.tetue.net
►http://romy.tetue.net/zoning-mockup-maquette-web
Du zoning au mockup, itinéraire d’une maquette web en passant par le moodboard, le wireframe, les style tiles et le prototype
Il n’est pas toujours évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux [] à avoir déjà vécu une situation d’incompréhension à cause de ce vocabulaire. Les termes « zoning » et « mock-up », en particulier, ont des significations différentes selon les personnes [] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de « wireframe »… Pour mieux s’y retrouver, commençons par mettre les bons mots sur les choses.
Les explications (toujours !) claires et précises de Tetue pour les différents stades d’élaboration d’une interface utilisateur, d’un site... Avec des références d’outils utilisés pour chaque phase.
Sur le même sujet mais avec des étapes et des définitions de termes légèrement différentes : ▻https://www.alsacreations.com/article/lire/1183-mockup-rough-maquette-zoning.html