{"id":6490,"date":"2018-03-10T14:29:27","date_gmt":"2018-03-10T13:29:27","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6490"},"modified":"2018-03-10T14:29:27","modified_gmt":"2018-03-10T13:29:27","slug":"les-ressources-du-web-37","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-37","title":{"rendered":"Les Ressources du Web #37"},"content":{"rendered":"<p>Cette semaine je vous propose une s\u00e9lection d&rsquo;outils pour vous simplifier la vie en CSS, JS, ou encore pour cr\u00e9er des gifs de qualit\u00e9, des tutoriels pour cr\u00e9er des effets anim\u00e9s funs et int\u00e9ressants et des ressources pour Sketch, en attendant un prochain article plus orient\u00e9 outils pour UX Designer :p (teasing)<\/p>\n<p><!--more--><\/p>\n<p>Retrouvez une liste de ressources graphiques, de codes CSS, HTML ou JS et tutoriels dans cette s\u00e9lection d&rsquo;outils et liens utiles des derniers jours ou semaines. Si vous voulez \u00eatre tenus inform\u00e9s plus fr\u00e9quemment des ressources que je d\u00e9gotte sur la toile, suivez-moi sur Twitter : <a href=\"https:\/\/twitter.com\/geoffreycrofte\">@geoffrey_crofte<\/a><\/p>\n<h2>Design et ressources graphiques<\/h2>\n<p>Quelques outils et articles pour vous aider dans vos t\u00e2ches de cr\u00e9ation au quotidien. Des conseils pour d\u00e9butants ou simplement de bons rappels pour nous tous et quelques outils pour vos pr\u00e9sentations.<\/p>\n<ul>\n<li><a href=\"http:\/\/ourownthing.co.uk\/gradpad.html\">GradPad<\/a> \u2013 un outil pour cr\u00e9er des d\u00e9grad\u00e9s simplement et obtenir le code CSS correspondant.<\/li>\n<li><a href=\"https:\/\/sindresorhus.com\/gifski\">Gifski<\/a> \u2013 un petit soft qui vous permet de pondre des gifs anim\u00e9s de qualit\u00e9 (ou dont vous pouvez contr\u00f4ler la qualit\u00e9)<\/li>\n<li><a href=\"https:\/\/medium.com\/refactoring-ui\/7-practical-tips-for-cheating-at-design-40c736799886\">7 Practical Tips for Cheating at Design<\/a> \u2013 des conseils graphiques pour am\u00e9liorer vos interfaces.<\/li>\n<li><a href=\"https:\/\/uxdesign.cc\/how-a-nightclub-saved-my-onboarding-design-f90a8e6daae\">Onboarding Design and Nightclub<\/a> \u2013 comparaison entre un nightclub et du onboarding pour am\u00e9liorer un design.<\/li>\n<li><a href=\"http:\/\/fonts.lol\/\">Fonts.lol<\/a> \u2013 des color-fonts en Open-Type SVG.<\/li>\n<\/ul>\n<h2>Ressources Sketch<\/h2>\n<p>J&rsquo;utilise de plus en plus Sketch et tente de ne pas multiplier les outils au quotidien pour arriver \u00e0 ce que je souhaite obtenir en terme de design et productivit\u00e9, faire du prototyping et de l&rsquo;animation sur Sketch serait vraiment cool :p<\/p>\n<ul>\n<li><a href=\"https:\/\/medium.com\/@nathangitter\/why-your-app-looks-better-in-sketch-3a01b22c43d7\">Why your app looks better in Sketch<\/a> \u2013 une explication sur les diff\u00e9rences entre Sketch et le rendu r\u00e9el (notamment dans le d\u00e9veloppement iOS, mais vous en aurez sur les navigateurs aussi)<\/li>\n<li><a href=\"https:\/\/medium.com\/sketch-app-sources\/paddy-buttons-a-really-simple-solution-to-a-problem-we-all-have-with-those-little-rascals-ca0eceee1766\">Paddy Buttons<\/a> \u2013 un plugin Sketch pour faciliter la gestion des boutons (espacement des boutons)<\/li>\n<li><a href=\"https:\/\/protowire.com\/\">Protowire<\/a> \u2013 pour cr\u00e9er des prototypes directement dans Sketch.<\/li>\n<\/ul>\n<h2>CSS &amp; Javascript<\/h2>\n<p>CSS \u00e9volue dans le bon sens et les API JS permettent de faire des choses super vite en se cassant beaucoup moins la t\u00eate. Pas mal de bons articles en ce moment tournent sur les CSS Variables.<\/p>\n<ul>\n<li><a href=\"https:\/\/blog.prototypr.io\/stunning-hover-effects-with-css-variables-f855e7b95330\">Gradient hover effect<\/a> \u2013 un effet de d\u00e9grad\u00e9 au survol en utilisant les CSS variables.<\/li>\n<li><a href=\"https:\/\/medium.freecodecamp.org\/everything-you-need-to-know-about-css-variables-c74d922ea855\">Everything you need to know about CSS variables<\/a> \u2013 le titre parle de lui-m\u00eame :p<\/li>\n<li><a href=\"https:\/\/medium.freecodecamp.org\/want-to-learn-css-variables-heres-my-free-8-part-course-f2ff452e5140\">Want to learn CSS Variables?<\/a> \u2013 un article pr\u00e9sentant un cours sur CSS Variables, je vous le conseille.<\/li>\n<li><a href=\"https:\/\/atomiks.github.io\/30-seconds-of-css\/\">30 Seconds of CSS<\/a> \u2013 quelques CSS snippets que vous pouvez comprendre et utiliser en moins de 30 secondes.<\/li>\n<li><a href=\"https:\/\/daverupert.com\/2018\/02\/cheapass-parallax\/\">Cheapass Parallax<\/a> \u2013 un effet parallax en quelques lignes de JS.<\/li>\n<\/ul>\n<h2>Trucs funs et inspiration<\/h2>\n<ul>\n<li><a href=\"https:\/\/codepen.io\/dsenneff\/full\/QajVxO\">Animated SVG Avatar<\/a> \u2014 un effet anim\u00e9 de login form vraiment sympathique utilisant GSAP.<\/li>\n<li><a href=\"https:\/\/scotch.io\/tutorials\/build-an-elastic-range-input-with-svg-and-animejs\">Elastic Range Input with SVG and anime.js<\/a> \u2013 un effet cool d&rsquo;animation \u00e9lastique d&rsquo;un range input vertical.<\/li>\n<li><a href=\"https:\/\/anvaka.github.io\/streamlines\/\">Streamlines<\/a> \u2013 un g\u00e9n\u00e9rateur random de lignes compl\u00e9tant l&rsquo;espace disponible vraiment fun.<\/li>\n<\/ul>\n<h2>Articles de fond<\/h2>\n<ul>\n<li><a href=\"https:\/\/m.signalvnoise.com\/interruption-is-not-collaboration-8dfb20731569\">Interruption is not collaboration<\/a> \u2013 un podcast sur le probl\u00e8me des interruptions en espaces de travail.<\/li>\n<li><a href=\"https:\/\/blog.logrocket.com\/the-increasing-nature-of-frontend-complexity-b73c784c09ae\">The increasing nature of frontend complexity<\/a> \u2013 un article sur le sujet de la complexit\u00e9 du front-end aujourd&rsquo;hui.<\/li>\n<\/ul>\n<p>C&rsquo;est tout pour cette fois. N&rsquo;h\u00e9sitez pas \u00e0 <strong>me partager<\/strong> des ressources sur <a href=\"https:\/\/twitter.com\/geoffreycrofte\">Twitter<\/a> si jamais vous en croisez des cools ou si <strong>vous \u00e9crivez<\/strong> \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cette semaine je vous propose une s\u00e9lection d&rsquo;outils pour vous simplifier la vie en CSS, JS, ou encore pour cr\u00e9er des gifs de qualit\u00e9, des tutoriels pour cr\u00e9er des effets anim\u00e9s funs et int\u00e9ressants et des ressources pour Sketch, en attendant un prochain article plus orient\u00e9 outils pour UX Designer :p (teasing)<\/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":[120,764,683,305],"coauthors":[597],"class_list":["post-6490","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","tag-animation","tag-css-variables","tag-sketch","tag-svg"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6490","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=6490"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6490\/revisions"}],"predecessor-version":[{"id":6499,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6490\/revisions\/6499"}],"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=6490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6490"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}