{"id":6531,"date":"2018-06-20T08:55:13","date_gmt":"2018-06-20T06:55:13","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6531"},"modified":"2018-06-19T21:48:24","modified_gmt":"2018-06-19T19:48:24","slug":"les-ressources-du-web-39","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-39","title":{"rendered":"Les Ressources Du Web #39"},"content":{"rendered":"<p>A d\u00e9faut de vous proposer un article de fond (qui devrait bient\u00f4t arriver), voici une s\u00e9lection des derni\u00e8res ressources du web issues de ma veille quotidienne. Du Layout CSS, de quoi am\u00e9liorer vos images et leur chargement, des ressources graphiques \u00e0 gogo et des biblioth\u00e8ques bien utiles.<\/p>\n<p><!--more--><\/p>\n<p>Retrouvez une liste de ressources Sketch, Photoshop, d&rsquo;articles d&rsquo;inspiration sur du design, de codes CSS, HTML ou JS et tutoriels dans cette s\u00e9lection d&rsquo;outils et liens utiles des derni\u00e8res 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>CSS &amp; HTML<\/h2>\n<p>Explorez les Web Components, aml\u00e9iorez le chargement de vos images et leur aspect responsive, et rentrez dans les profondeurs des Layouts CSS.<\/p>\n<ul>\n<li><a href=\"https:\/\/pudding.cool\/process\/scrollytelling-sticky\/\">ScrollyTelling with Sticky<\/a> \u2013 un tr\u00e8s bon article sur la position: sticky;<\/li>\n<li><a href=\"https:\/\/engineering.mixpanel.com\/2018\/06\/12\/making-web-components-work\/\">Making Web Components Work<\/a> \u2013 cr\u00e9er des web component fonctionnels, un article de fond.<\/li>\n<li><a href=\"https:\/\/csswizardry.com\/2018\/06\/image-inconsistencies-how-and-when-browsers-download-images\/\">Image Inconsistencies<\/a> \u2013 un article pr\u00e9cis sur les incoh\u00e9rences dans le chargement des images en fonction des navigateurs.<\/li>\n<li><a href=\"https:\/\/medium.com\/9elements\/building-a-responsive-image-e4c6229fa1f6\">Building a Responsive Image<\/a> \u2013 comment construire une image SVG responsible avec des symboles r\u00e9utilisables.<\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2018\/05\/guide-css-layout\/\">Getting started with CSS Layout<\/a> \u2013 les layouts CSS dans cette grosse overview (30 min de lecture)<\/li>\n<\/ul>\n<h2>JS<\/h2>\n<p>jQuery vous manque ? Vous souhaitez en savoir plus sur les ServiceWorkers ? Construire des maps interactives gr\u00e2ce \u00e0 une API JS ? Lisez donc tout cela \ud83d\ude42<\/p>\n<ul>\n<li><a href=\"https:\/\/netflix.github.io\/pollyjs\/#\/README\">Polly.js<\/a> \u2013 un outil d&rsquo;enregistrement et de replay des interactions HTTP distribu\u00e9 par Netflix.<\/li>\n<li><a href=\"https:\/\/developer.apple.com\/documentation\/mapkitjs\">MapKit JS<\/a> \u2013 une API JS distribu\u00e9e par Apple pour int\u00e9grer des cartes interactives.<\/li>\n<li><a href=\"https:\/\/serviceworke.rs\/\">ServiceWorkers Cookbook<\/a> \u2013 un livre de recette pour ServiceWorkers fait par Mozilla.<\/li>\n<li><a href=\"https:\/\/github.com\/vladocar\/nanoJS\">NanoJS<\/a> \u2013 une biblioth\u00e8que light de manipulation de DOM \u00e0 la jQuery.<\/li>\n<\/ul>\n<h2>Tools and Dev<\/h2>\n<p>Du debug de vos applications mobiles, \u00e0 une meilleure visualisation de vos projets JS en passant par une vraie interrogation sur la complexit\u00e9 des developpements front-end. Cette s\u00e9lection devrait vous offrir quelques outils utiles.<\/p>\n<ul>\n<li><a href=\"https:\/\/fbsonar.com\/\">Sonar<\/a> \u2013 un outil de debug pour vos applications mobiles distribu\u00e9 par Facebook.<\/li>\n<li><a href=\"https:\/\/github.com\/kitze\/JSUI\">JSUI<\/a> \u2013 un outil pour maintenir vos projets JS de mani\u00e8re visuelle.<\/li>\n<li><a href=\"http:\/\/www.breck-mckye.com\/blog\/2018\/05\/why-is-front-end-development-so-unstable\/\">Why is Front-End Dev so instable?<\/a> \u2013 un article qui interroge sur l&rsquo;instabilit\u00e9 des devs front d&rsquo;aujourd&rsquo;hui.<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/hsl-hsla-is-great-for-programmatic-color-control\/\">HSL()\/HSLa() is great for programmatic color control<\/a> \u2013 passez tous \u00e0 HSL ! \ud83d\ude00<\/li>\n<li><a href=\"https:\/\/hadron.app\/\">Hadron<\/a> \u2013 une application pour coder et voir le r\u00e9sultat rapidement. Est cens\u00e9e faire le lien entre designer et d\u00e9veloppeur, mais une bonne base HTML et CSS est n\u00e9cessaire pour le designer.<\/li>\n<\/ul>\n<h2>Design &amp; Inspiration<\/h2>\n<p>Des fontes, de la ressource Sketch App, un peu d&rsquo;inspiration sur du design, de l&rsquo;UX portfolio et de l&rsquo;animation. <em>Have fun!<\/em><\/p>\n<ul>\n<li><a href=\"https:\/\/www.behance.net\/gallery\/66373913\/Kotori-Rose-Free-font\">Kotori Rose Font<\/a> \u2013 une fonte g\u00e9om\u00e9trique sans-serif d\u00e9licieuse.<\/li>\n<li><a href=\"https:\/\/freebiesbug.com\/psd-freebies\/planguru-ui-kit\/\">Planguru UI Kit<\/a> \u2013 un PSD\/Sketch d&rsquo;un kit pour de l&rsquo;<em>event planning<\/em>.<\/li>\n<li><a href=\"https:\/\/freebiesbug.com\/sketch-freebies\/flowchart-kit\/\">Flowchart 2.0<\/a> \u2013 un fichier Sketch pour du flowchart.<\/li>\n<li><a href=\"https:\/\/stephaniewalter.design\/\">St\u00e9phanie&rsquo;s UX Portfolio<\/a> \u2013 le portfolio \u00ab\u00a0UX Designer\u00a0\u00bb de St\u00e9phanie vient de sortir (<abbr lang=\"en\" title=\"Minimum Viable Product\">MVP<\/abbr>), allez y faire un tour pour votre inspiration. Content d&rsquo;avoir pris en charge le d\u00e9veloppement.<\/li>\n<li><a href=\"https:\/\/kissmyui.com\/tutorial\/creating-a-card-animation-with-principle\/\">Card Animation with Principle<\/a> \u2013 un tutoriel pas \u00e0 pas pour cr\u00e9er une animation de card avec Principle.<\/li>\n<li><a href=\"https:\/\/codepen.io\/shshaw\/full\/RyzaYY\/\">Oceanic Overlay AnImation Demo<\/a> \u2013 une belle d\u00e9mo d&rsquo;animation par @keyframers.<\/li>\n<\/ul>\n<h2>Tech, Fun and Misc<\/h2>\n<p>Curieux sur ce qui se fait \u00e0 droite \u00e0 gauche ? PWA pour du jeu vid\u00e9o, un OS libre pour une SmartWatch. C&rsquo;est par ici.<\/p>\n<ul>\n<li><a href=\"https:\/\/asteroidos.org\/\">AsteroidOS<\/a> \u2013 un OS pour SmartWatch, Open Source s&rsquo;il vous plait.<\/li>\n<li><a href=\"https:\/\/hacks.mozilla.org\/2018\/05\/progressive-web-games\/\">Progressive Web Games<\/a> \u2013 un petite exp\u00e9rimentation de Mozilla Hack sur une PWA pour un jeu.<\/li>\n<li><a href=\"https:\/\/www.joshwcomeau.com\/posts\/dynamic-bezier-curves\">Dynamic Bezier Curves explained<\/a> \u2013 un excellent article sur la construction des courbes de Bezier.<\/li>\n<li><a href=\"http:\/\/flopstarter.com\/\">Flopstarter<\/a> \u2013 un kickstarter bien bien fun \ud83d\ude00<\/li>\n<\/ul>\n<p>Bonne lecture !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A d\u00e9faut de vous proposer un article de fond (qui devrait bient\u00f4t arriver), voici une s\u00e9lection des derni\u00e8res ressources du web issues de ma veille quotidienne. Du Layout CSS, de quoi am\u00e9liorer vos images et leur chargement, des ressources graphiques \u00e0 gogo et des biblioth\u00e8ques bien utiles.<\/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":[29,482,52,768,683],"coauthors":[597],"class_list":["post-6531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","tag-font","tag-inspiration","tag-jquery","tag-pwa","tag-sketch"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6531","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=6531"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6531\/revisions"}],"predecessor-version":[{"id":6537,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6531\/revisions\/6537"}],"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=6531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6531"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}