{"id":6561,"date":"2018-08-06T20:52:20","date_gmt":"2018-08-06T18:52:20","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6561"},"modified":"2018-09-09T14:45:29","modified_gmt":"2018-09-09T12:45:29","slug":"les-ressources-du-web-40","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/actualites-diverses\/les-ressources-du-web-40","title":{"rendered":"Les Ressources du Web #40"},"content":{"rendered":"<p>Une s\u00e9lection des derni\u00e8res semaines de l&rsquo;actualit\u00e9 du web (et quelques vieux articles en rappel de bonnes pratiques) pour faire le tour de l&rsquo;UX, l&rsquo;UI, le d\u00e9veloppement Front-end et quelques actualit\u00e9s diverses et retours d&rsquo;exp\u00e9rience. Illustration, gradients, couleurs, typographie et tutoriels sont au rendez-vous.<\/p>\n<p><!--more--><\/p>\n<h2>S&rsquo;il fallait n&rsquo;en retenir qu&rsquo;un<\/h2>\n<p><img decoding=\"async\" class=\"alignnone wp-image-6567 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/08\/undrawio-illustrations.png\" alt=\"UnDraw.co\" width=\"2536\" height=\"1398\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/08\/undrawio-illustrations.png 2536w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/08\/undrawio-illustrations-300x165.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/08\/undrawio-illustrations-768x423.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/08\/undrawio-illustrations-600x331.png 600w\" sizes=\"(max-width: 2536px) 100vw, 2536px\" \/><\/p>\n<p>UnDraw.co propose une s\u00e9rie d&rsquo;illustrations vectorielles dont une partie de la couleur est \u00e9ditable pour vous permettre d&rsquo;ajouter ces illustrations sur votre site \u00e0 la couleurs de votre charte graphique. Ces illustrations sont d&rsquo;excellente qualit\u00e9 visuelle mais aussi au niveau du code, facilement \u00e9ditable via Illustrator ou Sketch. La license MIT vous permet d&rsquo;en faire presque ce que vous voulez sans citer l&rsquo;auteure (<a href=\"https:\/\/twitter.com\/NinaLimpi\">Katerina Limpitsouni<\/a>). Le code est fourni par <a href=\"https:\/\/twitter.com\/anges244\">Aggelos Gesoulis<\/a>.<\/p>\n<h2>HTML &amp; CSS<\/h2>\n<p>Apprenez HTML\/CSS dans un super tutoriel d\u00e9taill\u00e9. CSS Exclusions, Flexbox et Grid n&rsquo;auront plus de secret pour vous. Vous allez voir que tout cela est complexe mais pas infranchissable. Quelques astuces et exp\u00e9rimentations vous sont aussi propos\u00e9es dans cette s\u00e9lection HTML et CSS.<\/p>\n<ul>\n<li><a href=\"https:\/\/internetingishard.com\/\">Interneting is Hard<\/a> \u2013 apprendre le HTML et CSS facilement et progressivement.<\/li>\n<li><a href=\"https:\/\/www.chenhuijing.com\/blog\/css-exclusions-with-queen-bey\/#%F0%9F%92%BB\">CSS Exclusions with Queen Bey<\/a> \u2013 plongez dans les entrailles de CSS Exclusions.<\/li>\n<li><a href=\"https:\/\/benfrain.com\/the-frustrations-of-using-css-shapes-and-css-exclusions\/\">Frustration of using CSS Exclusions<\/a> \u2013 un deuxi\u00e8me article expliquant les frustrations d&rsquo;utiliser CSS Exclusions.<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/the-peculiar-magic-of-flexbox-and-auto-margins\/\">Auto-margin magic with Flexbox<\/a> \u2013 de l&rsquo;utilisation des margin: auto; dans Flexbox.<\/li>\n<li><a href=\"https:\/\/codepen.io\/MartijnCuppens\/full\/GZWgaQ\/\">Double-click with CSS only<\/a> \u2013 une petite technique utilisant 2 \u00e9lements, un jeu de superposition et une animation pour simuler le double clic en CSS uniquement.<\/li>\n<li><a href=\"https:\/\/medium.freecodecamp.org\/the-complete-illustrated-flexbox-tutorial-d35c085dbf35?gi=71cf6dc5d165\">The complete illustrated Flexbox tutorial<\/a> \u2013 un tr\u00e8s bon tutoriel sur Flexbox.<\/li>\n<li><a href=\"http:\/\/labs.jensimmons.com\/\">The lab of Jen Simmons<\/a> \u2013 un lab actuellement exploit\u00e9 pour des exp\u00e9rimentations sur Grid Layout.<\/li>\n<\/ul>\n<h2>JavaScript<\/h2>\n<p>Plongez au coeur des performances JS et de nouvelles API, expliqu\u00e9es en d\u00e9tail par des experts dans leur domaine.<\/p>\n<ul>\n<li><a href=\"https:\/\/frontendnews.io\/editions\/2018-08-01-copy-and-paste-clipboard-api\">The Clipboard API crashcourse<\/a> \u2013 un excellent article sur l&rsquo;API Clipboard pour faire des copier\/coller.<\/li>\n<li><a href=\"https:\/\/medium.com\/@addyosmani\/the-cost-of-javascript-in-2018-7d8950fbb5d4\">The Cost of JavaScript<\/a> \u2013 un article sur la performance et le co\u00fbt des biblioth\u00e8ques JavaScript trop riches.<\/li>\n<li><a href=\"https:\/\/github.com\/apexcharts\/apexcharts.js\">ApexCharts.js<\/a> \u2013 une biblioth\u00e8que JS pour cr\u00e9er de jolies <em>charts<\/em>.<\/li>\n<li><a href=\"https:\/\/medium.com\/vue-mastery\/the-best-explanation-of-javascript-reactivity-fea6112dd80d\">The Best Explanation of JavaScript Reactivity<\/a><\/li>\n<\/ul>\n<h2>Ressources UX<\/h2>\n<p>Quand vient le moment de faire de la qualit\u00e9 sur nos interfaces pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur, voici une s\u00e9lection d&rsquo;articles pour vous y aider.<\/p>\n<ul>\n<li><a href=\"https:\/\/gibbon.co\/uxdesign\/ux-quantitative-survey\">UX Quantitative Survey<\/a> \u2013 de la recherche utilisateur \u00e0 travers des Quantative Surveys de qualit\u00e9.<\/li>\n<li><a href=\"https:\/\/uxdesign.cc\/design-better-forms-96fadca0f49c\">Design Better Forms<\/a> \u2013 un article de 2016, mais un bon rappel, vu qu&rsquo;on est toujours pas capable de faire des formulaires convenables en 2018 \ud83d\ude00<\/li>\n<li><a href=\"https:\/\/www.nngroup.com\/articles\/toggle-switch-guidelines\/\">Toggle Switch Guidelines<\/a> \u2013 Nielsen &amp; Norman Group fait un petit topo sur les Toggle Switches.<\/li>\n<li><a href=\"https:\/\/uxdesign.cc\/queer-ux-experience-8aa0289b6a8\">10 Steps for a better queer user experience<\/a> \u2013 un article sur l&rsquo;inclusivit\u00e9 et comment l&rsquo;int\u00e9grer \u00e0 vos projets.<\/li>\n<\/ul>\n<h2>Ressources UI<\/h2>\n<p>Cette s\u00e9lection se trouve entre jolies fontes, choix de couleurs, illustrations et conseils pour la cr\u00e9ation d&rsquo;un Design System.<\/p>\n<ul>\n<li><a href=\"https:\/\/weblog.redisdead.net\/main\/category\/Crea\/Fontes\">RedisDead Fontes<\/a> \u2013 de jolies fontes faites main par Laurence Vagner (<a href=\"https:\/\/twitter.com\/hellgy\">@hellgy<\/a>).<\/li>\n<li><a href=\"https:\/\/undraw.co\/illustrations\">UnDraw.co<\/a> \u2013 des illustrations pour tous les contextes faites en SVG et dont les couleurs sont \u00e9ditables.<\/li>\n<li><a href=\"https:\/\/medium.com\/oscar-tech\/six-lessons-learned-by-creating-a-design-system-at-a-fast-moving-start-up-30ba8458fa20\">Six lessons learned by creating a design system at a fast-moving start-up<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/codyhouse\/create-your-design-system-part-1-typography-7c630d9092bd\">Create your design system: Part 1 \u2013 Typography<\/a><\/li>\n<li><a href=\"http:\/\/bradfrost.com\/blog\/post\/pattern-variations\/\">Pattern variations<\/a> \u2013 les variations de composants dans un design system.<\/li>\n<li><a href=\"https:\/\/hihayk.github.io\/wheel\/\">Color Wheel Generator<\/a> \u2013 un g\u00e9n\u00e9rateur de palette plut\u00f4t fun.<\/li>\n<li><a href=\"https:\/\/webkul.github.io\/coolhue\/\">Cool gradients selection<\/a> \u2013 une s\u00e9lection de d\u00e9grad\u00e9s de couleurs vraiment sympa.<\/li>\n<\/ul>\n<h2>Autres ressources en vrac<\/h2>\n<ul>\n<li><a href=\"https:\/\/alf.io\/\">Alf.io<\/a> \u2013 un syst\u00e8me de r\u00e9servation de ticket Open Source.<\/li>\n<li><a href=\"https:\/\/blog.mozilla.org\/opendesign\/evolving-the-firefox-brand\/\">Firefox re-branding<\/a> \u2013 deux propositions de rebranding de Firefox par Mozilla.<\/li>\n<li><a href=\"https:\/\/medium.com\/@Pinterest_Engineering\/a-one-year-pwa-retrospective-f4a2f4129e05\">Pinterest PWA retrospective<\/a> \u2013 une r\u00e9trospective d&rsquo;un an avec une PWA par Pinterest.<\/li>\n<li><a href=\"https:\/\/marieguillaumet.com\/deux-ans-plus-tard\/\">Deux ans plus tard<\/a> \u2013 Marie nous fait un retour sur la \u00ab\u00a0libert\u00e9 d&rsquo;expression\u00a0\u00bb sur les r\u00e9seaux sociaux.<\/li>\n<li><a href=\"https:\/\/twitter.com\/kimgoodwin\/status\/1020029572266438657\">Am I mansplanning ?<\/a> \u2013 un petit flowchart pour savoir si vous n&rsquo;\u00eates pas en train de <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Mansplaining\">Mainsplain<\/a>.<\/li>\n<li><a href=\"https:\/\/twitter.com\/techinsider\/status\/1019654032757936128\">A 3D Printed Home in less thant 24h<\/a> \u2013 une maison en moins de 24h \u00e7a vous dit ?<\/li>\n<\/ul>\n<p>Bonne lecture \u00e0 tous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Une s\u00e9lection des derni\u00e8res semaines de l&rsquo;actualit\u00e9 du web (et quelques vieux articles en rappel de bonnes pratiques) pour faire le tour de l&rsquo;UX, l&rsquo;UI, le d\u00e9veloppement Front-end et quelques actualit\u00e9s diverses et retours d&rsquo;exp\u00e9rience. Illustration, gradients, couleurs, typographie et tutoriels sont au rendez-vous.<\/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":[63],"tags":[],"coauthors":[597],"class_list":["post-6561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-actualites-diverses"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6561","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=6561"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6561\/revisions"}],"predecessor-version":[{"id":6576,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6561\/revisions\/6576"}],"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=6561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6561"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}