{"id":6856,"date":"2019-08-04T15:54:13","date_gmt":"2019-08-04T13:54:13","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6856"},"modified":"2025-12-18T21:38:44","modified_gmt":"2025-12-18T20:38:44","slug":"les-ressources-du-web-44","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-44","title":{"rendered":"Les Ressources du Web #44"},"content":{"rendered":"<p>UX \/ UI, CSS, HTML, JavaScript, Accessibilit\u00e9 et tout plein de pixels et animations dans cette s\u00e9lection. Apprenez <span lang=\"en\">Grid Layout<\/span> tout en vous amusant, d\u00e9couvrez en plus sur CSS Variables et Font Variable. J&rsquo;ai aussi une s\u00e9lection de <span lang=\"en\">Digital Artists<\/span> pour rendre cette s\u00e9lection un peu moins technique. Amusez-vous bien !<\/p>\n<p><!--more--><\/p>\n<p class=\"message\"><strong>Rester \u00e0 jour <\/strong>: Toutes ces ressources sont partag\u00e9es r\u00e9guli\u00e8rement tous les jours sur mon compte <span lang=\"en\">Twitter<\/span>. <a href=\"https:\/\/twitter.com\/geoffreycrofte\">Suivez-moi<\/a> si vous souhaitez des news r\u00e9guli\u00e8res.<\/p>\n<h2>UX \/ UI Design<\/h2>\n<ul>\n<li><a lang=\"en\" href=\"https:\/\/uxdesign.cc\/the-spectrum-of-digital-design-roles-in-2018-3286390a9966\" hreflang=\"en\">The spectrum of Design Roles in 2018<\/a> &#8211; Un article de 2018 qui m&rsquo;a aid\u00e9 pour ma refonte de portfolio en cours.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.userflows.design\/\" hreflang=\"en\">Userflows.design<\/a> &#8211; Une s\u00e9lection de Userflows and la vie r\u00e9elle sur des produits existants.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/stephaniewalter.design\/blog\/myriams-seo-sxo-links-for-july-2019\/\" hreflang=\"en\">Myriam&rsquo;s SEO, SXO and everything in between<\/a> &#8211; Une s\u00e9lection de ressources SEO par Myriam.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/blog.fontawesome.com\/introducing-duotone\/\" hreflang=\"en\">Duotone Icons by Font Awesome<\/a> &#8211; J&rsquo;aime la mani\u00e8re dont ils ont trait\u00e9 la possibilit\u00e9 de personnalisation des couleurs et opacit\u00e9 (CSS Variables).<\/li>\n<li><a lang=\"en\" href=\"https:\/\/medium.com\/devsdesign\/4-reasons-why-you-should-design-without-color-first-c0e38180f689\" hreflang=\"en\">4 reasons why you should design without colors<\/a> &#8211; Un bon rappel de l&rsquo;importance de la couleur.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.smashingmagazine.com\/2019\/07\/build-sketch-plugin-javascript-html-css-part-1\/\" hreflang=\"en\">How to build a Sketch plugin<\/a> &#8211; HTML, CSS et JS pour vous aider \u00e0 construire un plugin Sketch.<\/li>\n<\/ul>\n<h2>CSS, HTML et JS<\/h2>\n<p>Les Fontes Variables sont quelque chose aujourd&rsquo;hui. Elles vous aident \u00e0 construire des produits plus lisibles avec tr\u00e8s peu d&rsquo;impact sur la performance. Dans cette s\u00e9lection, <span lang=\"en\">CSS Grid<\/span> et <span lang=\"en\">CSS Variables <\/span>(<span lang=\"en\">Custom Properties<\/span>) sans de la partie \u00e9galement. Enfin, quelques biblioth\u00e8ques et astuces en JS pour vous aider \u00e0 construire des interfaces accessibles et responsive.<\/p>\n<h3>S\u00e9lection CSS &amp; SVG<\/h3>\n<p>Apprenez <span lang=\"en\">Grid Layout<\/span> tout en vous amusant, et apprenez-en plus sur les CSS Variables et Fontes Variables gr\u00e2ce \u00e0 cette s\u00e9lection.<\/p>\n<ul>\n<li><a lang=\"en\" href=\"https:\/\/www.producthunt.com\/posts\/flexbox-ninja\" hreflang=\"en\">Flexbox\u00b7ninja on Produchunt<\/a> &#8211; J&rsquo;ai mis <a href=\"https:\/\/geoffreycrofte.com\/flexbox-ninja\">Flexbox\u00b7ninja<\/a> sur <span lang=\"en\">Producthunt<\/span>, venez me soutenir.<\/li>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/apprendre-le-positionnement-en-samusant-partie-2-grid-layout\">Apprendre le positionnement en s&rsquo;amusant<\/a> &#8211; Une s\u00e9lection de ressources pour apprendre Grid Layout par St\u00e9phanie Walter sur ce blog.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/scotch.io\/tutorials\/debugging-css-grid-with-firefox-dev-tools\" hreflang=\"en\">Debugging CSS Grid<\/a> &#8211; avec Firefox dev tools.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/codepen.io\/jpamental\/pen\/MGEPEL\" hreflang=\"en\">Font Variable Demo<\/a> &#8211; Une page utilisant 1 fonte variable de 84 ko \u00e0 la place de 18 fichiers de 288 ko.<\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/07\/css-custom-properties-cascade\/\">CSS Custom Properties, the cascade<\/a> &#8211; Pour ceux qui d\u00e9testent la cascade, \u00e7a ne va pas s&rsquo;am\u00e9liorer.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/nytimes.github.io\/svg-crowbar\/\" hreflang=\"en\">SVG Crowbar<\/a> &#8211; Un <span lang=\"en\">bookmarklet<\/span> pour Chrome qui extrait les n\u0153uds SVG et les styles l&rsquo;accompagnant depuis un document HTML pour le t\u00e9l\u00e9charger en tant que fichier SVG.<\/li>\n<\/ul>\n<h3>S\u00e9lection JavaScript &amp; Accessibility<\/h3>\n<p>JavaScript vous aide dans cette s\u00e9lection avec l&rsquo;UX, l&rsquo;accessibilit\u00e9 et la performance.<\/p>\n<ul>\n<li><a lang=\"en\" href=\"https:\/\/hiddedevries.nl\/en\/blog\/2019-07-22-meaning-without-markup-accessibility-object-model\" hreflang=\"en\">Accessibility Object Model<\/a> &#8211; Ajouter du sens sans markup.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.scottohara.me\/note\/2019\/07\/12\/reduced-motion-video.html\" hreflang=\"en\">Reduced motion auto-play video<\/a> &#8211; R\u00e9flexion sur l&rsquo;auto-play des vid\u00e9os et la pr\u00e9f\u00e9rence de \u00ab\u00a0reduced motion\u00a0\u00bb.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.sergeikriger.com\/slides\/csscamp-2019\/\" hreflang=\"en\">Time Control Web Accessibility<\/a> &#8211; Les slides de Sergei \u00e0 propos de l&rsquo;accessibilit\u00e9 web des \u00e9l\u00e9ments qui apparaissent \u00e0 l&rsquo;\u00e9cran.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/chriscavs.github.io\/bounds-demo\/\" hreflang=\"en\">Bound.js<\/a> &#8211; Une biblioth\u00e8que sans d\u00e9pendance pour d\u00e9tecter les limites d&rsquo;un \u00e9l\u00e9ment. A utiliser pour du <span class=\"css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0\"><span lang=\"en\">lazyloading<\/span>, des changements d&rsquo;\u00e9tat ou de l&rsquo;<span lang=\"en\">infinite scroll<\/span> par exemple. Vraiment l\u00e9ger (1 ko).<br \/>\n<\/span><\/li>\n<\/ul>\n<h2>Quelques outils<\/h2>\n<p>2 outils al\u00e9atoires sans aucun lien entre eux pour vous aider avec la RGPD (en anglais), et pour partager des vid\u00e9os utiles. Al\u00e9atoire, je vous le disais.<\/p>\n<ul>\n<li><a lang=\"en\" href=\"https:\/\/www.loom.com\/\" hreflang=\"en\">Loom<\/a> &#8211; Un nouvel outil pour partager des vid\u00e9os, vous pouvez m\u00eame avoir votre t\u00eate sur les vid\u00e9os en m\u00eame temps qu&rsquo;un partage d&rsquo;\u00e9cran.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/design.cnil.fr\/en\" hreflang=\"en\">GDPR Design by CNIL<\/a> &#8211; Un communaut\u00e9 anglophone pour vous aider \u00e0 designer avec la RGPD en t\u00eate.<\/li>\n<\/ul>\n<h2>Demo, Folio &amp; Inspiration<\/h2>\n<p>J&rsquo;ai eu pas mal d&rsquo;illustration, d&rsquo;art, de design de personnage et de d\u00e9mo dans ma s\u00e9lection du mois. Je les <a href=\"https:\/\/twitter.com\/geoffreycrofte\">partage sur Twitter<\/a>.<\/p>\n<ul>\n<li><a lang=\"en\" href=\"https:\/\/dribbble.com\/urancd\" hreflang=\"en\">Uran Dribbble Portfolio<\/a> &#8211; Un portfolio d&rsquo;illustrateur que j&rsquo;ai d\u00e9couvert la semaine derni\u00e8re.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/matruecannabis.com\/en\" hreflang=\"en\">MA True Cannabis<\/a> &#8211; Animated website inspiration.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/codepen.io\/seanfree\/full\/MdRJvp\" hreflang=\"en\">Musical Particule III<\/a> &#8211; Choisissez une musique et laissez les particules danser pour vous.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/paveldogreat.github.io\/WebGL-Fluid-Simulation\/\" hreflang=\"en\">WebGL Fluid Simulation<\/a> &#8211; Une d\u00e9mo fun que vous devez essayer.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/twitter.com\/pix_bun\/status\/1148716853537017856\" hreflang=\"en\">Airi&rsquo;s arts<\/a> &#8211; Un artiste que j&rsquo;ai d\u00e9couvert pendant #portfolioday sur Twitter.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/twitter.com\/hntrluc\/status\/1148743373894721541\" hreflang=\"en\">Hunter&rsquo;s arts<\/a> &#8211; Un charac. designer que j&rsquo;ai d\u00e9couvert pendant #portfolioday sur Twitter.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/twitter.com\/SeerStuff\/status\/1148689175744356352\" hreflang=\"en\">Ronald&rsquo;s illustrations<\/a> &#8211; Un Digital Artist que j&rsquo;ai d\u00e9couvert pendant #portfolioday sur Twitter.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/twitter.com\/pix_bun\/status\/1148716853537017856\" hreflang=\"en\">Chun Lo&rsquo;s drawings<\/a> &#8211; Un artiste que j&rsquo;ai d\u00e9couvert pendant #portfolioday sur Twitter.<\/li>\n<li><a lang=\"en\" href=\"https:\/\/thepisforpenis.com\/slaughterhouse-starlets\" hreflang=\"en\">Slaughterhouse Starlets<\/a> &#8211; Des illustrations sanglantes fun.<\/li>\n<\/ul>\n<p>Sonnez-moi sur <a href=\"https:\/\/twitter.com\/geoffreycrofte\">Twitter<\/a> si vous souhaitez partager votre travail !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UX \/ UI, CSS, HTML, JavaScript, Accessibilit\u00e9 et tout plein de pixels et animations dans cette s\u00e9lection. Apprenez Grid Layout tout en vous amusant, d\u00e9couvrez en plus sur CSS Variables et Font Variable. J&rsquo;ai aussi une s\u00e9lection de Digital Artists pour rendre cette s\u00e9lection un peu moins technique. Amusez-vous bien !<\/p>\n","protected":false},"author":4,"featured_media":7121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"1","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[50],"tags":[85,764,806],"coauthors":[597],"class_list":["post-6856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","tag-accessibilite","tag-css-variables","tag-font-variable"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=6856"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6856\/revisions"}],"predecessor-version":[{"id":8924,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6856\/revisions\/8924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/7121"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6856"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}