{"id":6098,"date":"2017-01-03T11:55:47","date_gmt":"2017-01-03T10:55:47","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=6098"},"modified":"2017-01-03T11:55:47","modified_gmt":"2017-01-03T10:55:47","slug":"les-ressources-du-web-29","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-29","title":{"rendered":"Les Ressources du Web #29"},"content":{"rendered":"<p>Pas facile de trouver du temps pour synth\u00e9tiser ma veille ces derniers temps, notamment avec les f\u00eates, les vacances \u00e0 pr\u00e9parer (parce qu&rsquo;il faut bien en prendre quand m\u00eame). Voici donc une synth\u00e8se sur plusieurs semaines avec de tr\u00e8s bonnes ressources JS (tutoriels et scrips), ergo, ressources et inspirations vari\u00e9es.<\/p>\n<p><!--more--><\/p>\n<h2>S&rsquo;il fallait n&rsquo;en retenir qu&rsquo;un<\/h2>\n<p><a href=\"https:\/\/www.august.com.au\/blog\/animating-scenes-with-webgl-three-js\/\" target=\"_blank\"><img decoding=\"async\" class=\"aligncenter wp-image-6139 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/12\/Animating-scenes_Header.jpg\" width=\"820\" height=\"356\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/12\/Animating-scenes_Header.jpg 820w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/12\/Animating-scenes_Header-300x130.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/12\/Animating-scenes_Header-768x333.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/12\/Animating-scenes_Header-600x260.jpg 600w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.august.com.au\/blog\/animating-scenes-with-webgl-three-js\/\">Animating Scenes with with WebGL and Three.js<\/a> pour son potentiel \u00e0 \u00ab\u00a0effet wahou\u00a0\u00bb et son tutoriel me semble \u00eatre une bonne ressource dans le lot que je vous propose pour cette fois. D\u00e9mystifier un peu la chose \u00e0 travers la biblioth\u00e8que Three.js vous permettra d&rsquo;aborder les animations en WebGL plus sereinement.<\/p>\n<h2>JavaScript<\/h2>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/lazy-loading-responsive-adsense-ads\/\">Lazy Loading Responsive Adsense Ads<\/a> \u2013 une astuce et un script pour le lazy load responsive de publicit\u00e9s Adsense.<\/li>\n<li><a href=\"https:\/\/vocajs.com\/\">VocaJS<\/a> \u2013 une biblioth\u00e8que JavaScript de manipulation de cha\u00eene de caract\u00e8res.<\/li>\n<li><a href=\"https:\/\/bitsofco.de\/an-overview-of-client-side-storage\/\">Overview of Client-Side Storage<\/a> \u2013 un excellent article sur les mani\u00e8res de stocker des donn\u00e9es locales chez l&rsquo;utilisateur (navigateur).<\/li>\n<li><a href=\"https:\/\/pawelgrzybek.com\/siema\/\">Siema<\/a> \u2013 une biblioth\u00e8que super l\u00e9g\u00e8re sans style ni d\u00e9pendance pour cr\u00e9er un carrousel.<\/li>\n<li><a href=\"https:\/\/medium.com\/samsung-internet-dev\/how-to-take-payments-on-the-web-with-the-payment-request-api-a523f6fc7c1f#.o5nl8xmg9\">Request Payment API<\/a> \u2013 l&rsquo;API Request Payment pour recevoir des paiements depuis le web.<\/li>\n<li><a href=\"https:\/\/www.august.com.au\/blog\/animating-scenes-with-webgl-three-js\/\">Animating Scenes with WebGL<\/a> \u2013 un tutoriel pour animer une sc\u00e8ne avec WebGL et Three.js.<\/li>\n<li><a href=\"https:\/\/www.boxfactura.com\/pulltorefresh.js\/\">PullToRefresh.js<\/a> \u2013 ajouter la fonctionnalit\u00e9 pull-to-refresh avec ce script JS simple.<\/li>\n<\/ul>\n<h2>CSS<\/h2>\n<ul>\n<li><a href=\"http:\/\/cssreference.io\/\">CSS Reference<\/a> \u2013 Un guide visuel pour les propri\u00e9t\u00e9s CSS.<\/li>\n<li><a href=\"https:\/\/csspeeper.com\/\">CSS Peeper<\/a> \u2013 Un visualiseur sexy des propri\u00e9t\u00e9s CSS.<\/li>\n<li><a href=\"http:\/\/codepen.io\/davidkpiano\/full\/woZNbB\/\">CSS Snow Fox<\/a> \u2013 Une jolie d\u00e9mo juste pour le fun.<\/li>\n<\/ul>\n<h2>Ergonomie<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2016\/11\/true-lies-of-optimistic-user-interfaces\">True Lies of Optimistic UI<\/a> \u2013 de tr\u00e8s bon conseils sur le design de processus optimistes.<\/li>\n<li><a href=\"https:\/\/medium.com\/el-passion-blog\/principle-4-little-tricks-to-share-your-idea-in-an-effective-prototype-e73bd323899c#.fqw3fg3ac\">Share Ideas in Effective Prototypes<\/a> \u2013 l&rsquo;utilisation de Principle pour partager ses id\u00e9es d&rsquo;animation dans des prototypes.<\/li>\n<li><a href=\"https:\/\/uxplanet.org\/how-to-communicate-hidden-gestures-in-mobile-app-e55397f4006b#.srpohbfgr\">Communicate Hidden Gestures in app<\/a> \u2013 comment communiquer les actions cach\u00e9es \u00e0 faire dans une application.<\/li>\n<li><a href=\"https:\/\/blog.prototypr.io\/how-contrast-works-in-ui-design-21bf75a5a2bf\">How contrast works in UI Design<\/a> \u2013 un article sur le contraste dans le webdesign.<\/li>\n<\/ul>\n<h2>Inspiration &amp; Astuces<\/h2>\n<ul>\n<li><a href=\"https:\/\/pixelbuddha.net\/freebie\/free-christmas-line-icon-set\">Christmas Line Icons Set<\/a> \u2013 un kit d&rsquo;ic\u00f4nes sur la th\u00e9matique de No\u00ebl.<\/li>\n<li><a href=\"http:\/\/www.onextrapixel.com\/2016\/11\/22\/20-typography-animations-experiments-and-small-solutions-for-your-next-web-project\/\">20 typo animations<\/a> \u2013 20 exemples et exp\u00e9rimentations d&rsquo;animations typographiques.<\/li>\n<li><a href=\"http:\/\/www.blogduwebdesign.com\/inspiration\/calendriers-avent-interactifs-annee-2016\/2332\">Calendriers de l&rsquo;avent<\/a> \u2013 une s\u00e9lection de calendriers interactifs.<\/li>\n<li><a href=\"https:\/\/medium.com\/sketch-app-sources\/creating-a-card-animation-in-principle-7745ea602de5#.h41f099g0\">Card Animation in Principle<\/a> \u2013 un tutoriel de cr\u00e9ation d&rsquo;une animation avec Sketch et Principle.<\/li>\n<li><a href=\"https:\/\/blog.sindresorhus.com\/macos-tips-tricks-13046cf377f8#.7wcqz8q3g\">MacOS Tips &amp; Tricks<\/a> \u2013 quelques fonctions cach\u00e9es sur MacOS.<\/li>\n<li><a href=\"https:\/\/uxplanet.org\/a-design-yearbook-of-2016-22ff9c81bd8\">A Design Yearbook of 2016<\/a> \u2013 un r\u00e9cap du design en 2016.<\/li>\n<li><a href=\"http:\/\/webdesignerwall.com\/trends\/design-trends-2016-expect-2017\">Design Trends 2016 &amp; 2017<\/a> \u2013 les tendances design de 2016 et \u00e0 quoi s&rsquo;attendre en 2017.<\/li>\n<\/ul>\n<h2>Ressources<\/h2>\n<ul>\n<li><a href=\"https:\/\/pixelbuddha.net\/freebie\/free-christmas-line-icon-set\">Mobile Friendly Checker<\/a> \u2013 un petit contr\u00f4le d&rsquo;optimisation mobile de votre site par Google.<\/li>\n<li><a href=\"http:\/\/www.onextrapixel.com\/2016\/11\/22\/20-typography-animations-experiments-and-small-solutions-for-your-next-web-project\/\">Sketch Symbol Best Practices<\/a> \u2013 une mani\u00e8re de g\u00e9rer ses symboles sur Sketch.<\/li>\n<li><a href=\"https:\/\/meowni.ca\/font-style-matcher\/\">Font Style Matcher<\/a> \u2013 un outil pour v\u00e9rifier la correspondance de deux fontes au moment du <abbr title=\"Flash Of Unstyled Content\">FOUC<\/abbr>.<\/li>\n<li><a href=\"https:\/\/projects.lukehaas.me\/regexhub\/\">Useful Regex Patterns<\/a> \u2013 des expressions r\u00e9guli\u00e8res bien utiles r\u00e9unies sur ce site web.<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/checklist\">Progressive Web App Checklist<\/a> \u2013 une checklist pour votre Web App propos\u00e9e par Google.<\/li>\n<li><a href=\"http:\/\/matthewpalmer.net\/rocket\/\">Rocket Emoji<\/a> \u2013 un acc\u00e8s \u00e0 des emojis en auto-suggestion pendant que vous tapez, partout sur votre Mac.<\/li>\n<li><a href=\"https:\/\/docsify.js.org\/#\/\">Docsify<\/a> \u2013 g\u00e9n\u00e9rez une documentation simplement avec cet outil.<\/li>\n<\/ul>\n<p>Bonne lecture \u00e0 vous et excellente ann\u00e9e 2017 !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pas facile de trouver du temps pour synth\u00e9tiser ma veille ces derniers temps, notamment avec les f\u00eates, les vacances \u00e0 pr\u00e9parer (parce qu&rsquo;il faut bien en prendre quand m\u00eame). Voici donc une synth\u00e8se sur plusieurs semaines avec de tr\u00e8s bonnes ressources JS (tutoriels et scrips), ergo, ressources et inspirations vari\u00e9es.<\/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":[297,125,472,554,578],"coauthors":[597],"class_list":["post-6098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","tag-ergonomie","tag-javascript","tag-ressources-2","tag-ui","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6098","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=6098"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6098\/revisions"}],"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=6098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6098"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}