{"id":6582,"date":"2018-10-29T23:00:41","date_gmt":"2018-10-29T22:00:41","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6582"},"modified":"2018-10-29T23:00:41","modified_gmt":"2018-10-29T22:00:41","slug":"les-ressources-du-web-41","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-41","title":{"rendered":"Les Ressources du Web #41"},"content":{"rendered":"<p>En pleine pr\u00e9paration de cours, d&rsquo;articles, et de talks sur des sujets comme CSS, l&rsquo;UX, ou du retour d&rsquo;exp\u00e9rience sur certains projets, j&rsquo;ai du mal \u00e0 trouver du temps pour \u00e9crire sur ce blog, mais pour vous voici une s\u00e9lection des derni\u00e8res ressources CSS, JS, des d\u00e9mo bien sympa et des ressources en design \u00e0 t\u00e9l\u00e9charger ainsi que des guides divers et vari\u00e9s.<\/p>\n<p><!--more--><\/p>\n<p>Apr\u00e8s avoir fait un <em>teasing<\/em> sur mon occupation, sachez que je relayerai sur ce blog mes interventions prochaines sous forme de transcript ou d&rsquo;articles. N&rsquo;h\u00e9sitez pas \u00e0 <a href=\"https:\/\/twitter.com\/geoffreycrofte\">me suivre sur Twitter<\/a> si vous souhaitez avoir plus rapidement les liens que je partage, plus de fraicheur dans l&rsquo;actualit\u00e9 du tech et design.<\/p>\n<h2>S&rsquo;il devait n&rsquo;en rester qu&rsquo;un<\/h2>\n<p>Si je devais s\u00e9lectionner une ressource parmi celle que je vous propose, je dirais que <a href=\"https:\/\/pepsized.com\/demo\/beer-slider-responsive-accessible-before-after-slider-demo\/\">Beer Slider<\/a> propose un script bien con\u00e7u et facile \u00e0 prendre en main, avec un design de base \u00e9l\u00e9gant.<\/p>\n<p><a href=\"https:\/\/pepsized.com\/demo\/beer-slider-responsive-accessible-before-after-slider-demo\/\"><img decoding=\"async\" class=\"alignnone wp-image-6586 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/10\/beerslider.jpg\" alt=\"\" width=\"958\" height=\"483\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/10\/beerslider.jpg 958w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/10\/beerslider-300x151.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/10\/beerslider-768x387.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/10\/beerslider-600x303.jpg 600w\" sizes=\"(max-width: 958px) 100vw, 958px\" \/><\/a><\/p>\n<h2>\u00a0JavaScript<\/h2>\n<p>Apprenez \u00e0 deboguer comme un pro dans votre navigateur, \u00e0 distribuer les bonnes ressources au bon moment en cas de r\u00e9seau un peu faiblard, \u00e0 construire des PWA ou cr\u00e9er des transitions fluides entre les pages d&rsquo;un site AJAX.<\/p>\n<ul>\n<li><a href=\"https:\/\/dev.to\/addyosmani\/adaptive-serving-using-javascript-and-the-network-information-api-331p\">Adaptive Serving using Network Information API<\/a> \u2013 un excellent article d&rsquo;optimisation de d\u00e9livraison de media en fonction de la qualit\u00e9 du r\u00e9seau.<\/li>\n<li><a href=\"https:\/\/medium.com\/datadriveninvestor\/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff\">How to stop using console.log() to debug<\/a> \u2013 comment utiliser l&rsquo;outil de debug de votre navigateur pour d\u00e9boguer vos scripts JS.<\/li>\n<li><a href=\"https:\/\/pepsized.com\/demo\/beer-slider-responsive-accessible-before-after-slider-demo\/\">Beer Slider<\/a> \u2013 un slider pour afficher un diff. d&rsquo;images avant\/apr\u00e8s en vanilla JS.<\/li>\n<li><a href=\"https:\/\/dogstudio.github.io\/highway\/\">Highway.js<\/a> \u2013 une biblioth\u00e8que JS pour construire des transitions entre des pages sur une logique AJAX.<\/li>\n<li><a href=\"https:\/\/pwa.cafe\/\">PWA Builder<\/a> \u2013 un assistant en ligne de commande pour cr\u00e9er votre PWA en quelques \u00e9tapes.<\/li>\n<\/ul>\n<h2>CSS<\/h2>\n<p>Devenez ma\u00eetres du layout responsive et apprenez-en plus sur les pseudo-class en CSS gr\u00e2ce \u00e0 cette petite s\u00e9lection de ressources.<\/p>\n<ul>\n<li><a href=\"https:\/\/callmenick.com\/dev\/floated-labels-with-placeholder-shown\/\">CSS-Only Floating Label<\/a> \u2013 en utilisant la pseudo-class placeholder-shown.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Layout_cookbook\">CSS Layout Cookbook<\/a> \u2013 MDN propose des exemples de layout de page.<\/li>\n<li><a href=\"https:\/\/codepen.io\/shshaw\/full\/pOVKjb\">CSS Transform Origin Demo<\/a> \u2013 de l&rsquo;importance du point de transformation d&rsquo;origine.<\/li>\n<\/ul>\n<h2>D\u00e9mo<\/h2>\n<p>Quelques d\u00e9monstrations pour l&rsquo;effet wahou, entre animation, capacit\u00e9 de reconnaissance faciale et petites astuces colorim\u00e9triques en JS.<\/p>\n<ul>\n<li><a href=\"https:\/\/tdhooper.github.io\/dragon-snake\/preview\/\">Dragon Snake Animation<\/a> \u2013 une animation WebGL assez impressionnante.<\/li>\n<li><a href=\"https:\/\/codepen.io\/meodai\/full\/RerqjG\/\">Random Color Harmonies<\/a> \u2013 des harmonies de couleurs calcul\u00e9es en JS.<\/li>\n<li><a href=\"https:\/\/zaidalyafeai.github.io\/face-segmentation\/\">Realtime Face Segmentation<\/a> \u2013 une reconnaissance des parties du visage en live.<\/li>\n<\/ul>\n<h2>Design &amp; Guide &amp; Ressources \u00e0 t\u00e9l\u00e9charger<\/h2>\n<p>D&rsquo;une plateforme Open Source pour la vente de produits num\u00e9riques, \u00e0 des conseils et templates pour le design d&rsquo;e-mail, en passant par des article de fond et des sujets de conf\u00e9rence sur la performance et la psychologie dans le design.<\/p>\n<ul>\n<li><a href=\"https:\/\/fr.sendinblue.com\/blog\/design-templates-emails\/\">Design d&#8217;email<\/a> \u2013 des templates d&rsquo;e-mail \u00e0 t\u00e9l\u00e9charger et un guide tr\u00e8s bien structur\u00e9.<\/li>\n<li><a href=\"https:\/\/ccsearch.creativecommons.org\/\">CCSearch<\/a> \u2013 des images en Creative Commons propos\u00e9es (index\u00e9es) par CreativeCommons.<\/li>\n<li><a href=\"https:\/\/www.zipsell.org\/\">Zipsell<\/a> \u2013 une plateforme Open Source pour la vente de produits num\u00e9riques.<\/li>\n<li><a href=\"https:\/\/heydesigner.com\/blog\/the-power-of-i-dont-know-in-product-design\/\">The Power of \u00ab\u00a0I don&rsquo;t know\u00a0\u00bb in product design<\/a> \u2013 savoir qu&rsquo;on ne sait pas en design ouvre le champ des possibles.<\/li>\n<li><a href=\"https:\/\/alistapart.com\/article\/psychology-of-design\">The psychology of design<\/a> \u2013 ou pourquoi les designers devraient ajouter une corde \u00ab\u00a0connaissances en psychologie\u00a0\u00bb \u00e0 leur arc.<\/li>\n<li><a href=\"https:\/\/stephaniewalter.design\/fr\/blog\/lux-au-service-de-la-performance-de-vos-interfaces-conference-welovespeed-2018\/\">l&rsquo;UX au service de la performance<\/a> \u2013 un talk de St\u00e9phanie Walter donn\u00e9 r\u00e9cemment pour We\u2764\ufe0fSpeed.<\/li>\n<\/ul>\n<p>Excellente lecture et n&rsquo;oubliez pas de passer sur <a href=\"https:\/\/twitter.com\/geoffreycrofte\">Twitter<\/a> si vous voulez \u00eatre les premiers \u00e0 choper ces informations \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En pleine pr\u00e9paration de cours, d&rsquo;articles, et de talks sur des sujets comme CSS, l&rsquo;UX, ou du retour d&rsquo;exp\u00e9rience sur certains projets, j&rsquo;ai du mal \u00e0 trouver du temps pour \u00e9crire sur ce blog, mais pour vous voici une s\u00e9lection des derni\u00e8res ressources CSS, JS, des d\u00e9mo bien sympa et des ressources en design \u00e0 [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":5931,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[50],"tags":[],"coauthors":[597],"class_list":["post-6582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6582","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=6582"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6582\/revisions"}],"predecessor-version":[{"id":6588,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6582\/revisions\/6588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/5931"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6582"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}