{"id":6006,"date":"2016-11-16T11:33:09","date_gmt":"2016-11-16T10:33:09","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=6006"},"modified":"2016-11-16T11:35:51","modified_gmt":"2016-11-16T10:35:51","slug":"les-ressources-du-web-28","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-28","title":{"rendered":"Les Ressources du Web #28"},"content":{"rendered":"<p>Mon temps de veille \u00e9tait assez r\u00e9duit ces derni\u00e8res semaines, mais voici malgr\u00e9 tout une s\u00e9lection d&rsquo;articles, astuces et ressources, avec pas mal de JS pour enrichir vous sites web ou web app, quelques effets sympa en CSS et une flop\u00e9e d&rsquo;outils, ressources et liens d&rsquo;inspirations pour vous accompagner dans vos cr\u00e9ations graphiques.<\/p>\n<p><!--more--><\/p>\n<h2>S&rsquo;il fallait n&rsquo;en retenir qu&rsquo;un<\/h2>\n<p>Cette fois je retiendrais de ma s\u00e9lection ce premier article d&rsquo;une s\u00e9rie de 3 (d\u00e9j\u00e0 publi\u00e9s) pour vous accompagner dans la construction d&rsquo;une <a href=\"https:\/\/bitsofco.de\/bitsofcode-pwa-part-1-offline-first-with-service-worker\/\">progressive web app<\/a>.<\/p>\n<p><a href=\"https:\/\/bitsofco.de\/bitsofcode-pwa-part-1-offline-first-with-service-worker\/\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6095\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/11\/bitsofco-app.png\" alt=\"bitsofco-app\" width=\"780\" height=\"453\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/11\/bitsofco-app.png 780w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/11\/bitsofco-app-300x174.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/11\/bitsofco-app-768x446.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/11\/bitsofco-app-600x348.png 600w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/a><br \/>\nVous \u00e9voluerez au fil de l&rsquo;article dans un univers utilisant les outils Gulp, Handlebars, SASS et Babel afin de construire une web app proposant du \u00ab\u00a0offline first\u00a0\u00bb et des fonctionnalit\u00e9s simples afin de plonger dans ce monde entre deux eaux.<\/p>\n<p>Place \u00e0 la s\u00e9lection.<\/p>\n<h2>JavaScript<\/h2>\n<ul>\n<li><a href=\"https:\/\/github.com\/coderitual\/odoo?utm_source=codropscollective\">Odoo.js<\/a> \u2013 Un odom\u00e8tre anim\u00e9 et fluide en SVG avec effet de flou de mouvement.<\/li>\n<li><a href=\"http:\/\/benhowdle.im\/grade\/\">Grade.JS<\/a> \u2013 Un effet de d\u00e9grad\u00e9 reprenant 2 couleurs dominantes d&rsquo;une photo.<\/li>\n<li><a href=\"http:\/\/tutorialzine.com\/2016\/08\/working-with-the-javascript-battery-api\/\">Working With Battery API<\/a> \u2013 Un article sur l&rsquo;utilisation de la Battery API.<\/li>\n<li><a href=\"http:\/\/thenewcode.com\/1124\/Rotating-Elements-To-Mouse-and-Touch-Locations-Using-JavaScript?utm_source=codropscollective\">Rotating elements using mouse and touch position<\/a> \u2013 Un article proposant un script pour faire tourner un \u00e9l\u00e9ment suivant la position de la souris ou du doigt.<\/li>\n<li><a href=\"http:\/\/meandmax.github.io\/lory\/\">Lory<\/a> \u2013 un script de slideshow \u00e9volutif et responsive.<\/li>\n<li><a href=\"https:\/\/github.com\/Easyfood\/pageAccelerator\">Page Accelerator<\/a> \u2013 acc\u00e9l\u00e9rez le chargement de vos pages web gr\u00e2ce \u00e0 ce script.<\/li>\n<li><a href=\"https:\/\/dollarshaveclub.github.io\/reframe.js\/\">Reframe.js<\/a> \u2013 rendez les \u00e9l\u00e9ments non-responsives responsives, simplement.<\/li>\n<li><a href=\"https:\/\/osrec.github.io\/currencyFormatter.js\/\">currencyFormatter<\/a> \u2013 un script pour formater des valeurs mon\u00e9taires en multilingue.<\/li>\n<li><a href=\"http:\/\/adrianmejia.com\/blog\/2016\/10\/19\/Overview-of-JavaScript-ES6-features-a-k-a-ECMAScript-6-and-ES2015\/\">JavaScript ES6 features<\/a> \u2013 un tour d&rsquo;horizon de l&rsquo;\u00e9volution de JS et de ES6 plus particuli\u00e8rement.<\/li>\n<li><a href=\"https:\/\/bitsofco.de\/bitsofcode-pwa-part-1-offline-first-with-service-worker\/\">Build a Progressive Web App<\/a> \u2013 une s\u00e9rie de 3 articles sur le d\u00e9veloppement d&rsquo;une progressive web app.<\/li>\n<li><a href=\"http:\/\/www.onextrapixel.com\/2016\/11\/16\/8-javascript-libraries-for-interactive-map-visualizations\/\">8 JavaScript Librairies for Map Visualizations<\/a> \u2013 une s\u00e9lection de scripts pour cr\u00e9er des maps interactives.<\/li>\n<\/ul>\n<h2>WordPress<\/h2>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/slate-admin-theme\/screenshots\/\">Slate Admin Theme<\/a> \u2013 un th\u00e8me WordPress repens\u00e9 et all\u00e9g\u00e9 visuellement pour votre admin<\/li>\n<li><a href=\"https:\/\/woocommerce.com\/connect\/\">WooCommerce Connect<\/a> \u2013 un plugin pour se connecter aux services de WooCommerce. (<em>Shipping Rate &amp; Labels<\/em> pour le moment, en pleine \u00e9volution)<\/li>\n<li><a href=\"http:\/\/www.mailpoet.com\/mailpoet-3-beta\/\">MailPoet 3 Beta<\/a> \u2013 la version 3 du c\u00e9l\u00e8bre MailPoet est en beta depuis fin octobre.<\/li>\n<\/ul>\n<h2>CSS &amp; Animations<\/h2>\n<ul>\n<li><a href=\"http:\/\/blog.typekit.com\/2016\/08\/17\/flexible-typography-with-css-locks\/\">Flexible Typography with CSS Locks<\/a> \u2013 Une id\u00e9e d&rsquo;impl\u00e9mentation de taille de texte et hauteur de ligne en fonction de l&rsquo;\u00e9cran de consultation.<\/li>\n<li><a href=\"https:\/\/ihatetomatoes.net\/how-to-create-css-glitch-effect\/\">CSS Glitch Effect<\/a> \u2013 un tutoriel pour cr\u00e9er un effet \u00ab\u00a0Glitch\u00a0\u00bb en CSS.<\/li>\n<li><a href=\"https:\/\/medium.com\/bitmatica-lab\/svg-line-animation-for-the-uninitiated-5a65d91c6044\">SVG Line Animation<\/a> \u2013 une initiation \u00e0 l&rsquo;animation de vecteur (SVG + CSS) \u00e0 lire absolument.<\/li>\n<li><a href=\"https:\/\/medium.freecodecamp.com\/explained-css-pseudo-classes-cef3c3177361\">Explained CSS Pseudo classes<\/a> \u2013 une explication des pseudo classes avec plein d&rsquo;images.<\/li>\n<li><a href=\"https:\/\/zellwk.com\/blog\/responsive-grid-system\/\">How To build a Responsive Grid System<\/a> \u2013 la construction d&rsquo;une grille responsive en d\u00e9tail.<\/li>\n<\/ul>\n<h2>Outils, Inspiration &amp; Ressources graphiques<\/h2>\n<ul>\n<li><a href=\"https:\/\/vectr.com\">Vectr<\/a> \u2013 un \u00e9diteur de fichiers vectoriel en ligne et t\u00e9l\u00e9chargeable gratuit et intuitif.<\/li>\n<li><a href=\"http:\/\/origami.design\">Origami Studio<\/a> \u2013 l&rsquo;outil pour vos prototypes (interactivit\u00e9 et animation au rendez-vous)<\/li>\n<li><a href=\"https:\/\/thimble.mozilla.org\/fr\/\">Thimble<\/a> \u2013 un \u00e9diteur HTML libre de Mozilla pour aider \u00e0 l&rsquo;enseignement.<\/li>\n<li><a href=\"http:\/\/www.onextrapixel.com\/2016\/10\/05\/20-codepen-solutions-for-awesome-mouse-effects\/\">20 Mouse Effects<\/a> \u2013 une liste de 20 id\u00e9es d&rsquo;effet aux mouvements de la souris. (et leur code)<\/li>\n<li><a href=\"https:\/\/www.pixelsurplus.com\/freebies\/traveler\">Traveler Font<\/a> \u2013 une \u00ab\u00a0Western Typeface\u00a0\u00bb plut\u00f4t styl\u00e9e.<\/li>\n<li><a href=\"https:\/\/pixelbuddha.net\/freebie\/inspirational-ui-elements-free-download\">15 Inspirational UI<\/a> \u2013 des interfaces pour votre inspiration \u00e0 t\u00e9l\u00e9charger gratuitement<\/li>\n<li><a href=\"http:\/\/graphicburger.com\/space-iconography-36-free-icons\/\">36 Space Icons<\/a> \u2013 des ic\u00f4nes \u00ab\u00a0outline\u00a0\u00bb sur le sujet de l&rsquo;espace \u00e0 t\u00e9l\u00e9charger gratuitement<\/li>\n<li><a href=\"https:\/\/devfreebooks.github.io\/\">DevFreeBooks<\/a> \u2013 des livres gratuits sur le sujet du d\u00e9veloppement Web. (n&rsquo;oubliez pas de donner ;p)<\/li>\n<li><a href=\"https:\/\/medium.com\/@kollinz\/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8\">Hamburger Menu Alternative<\/a> \u2013 des menus mobiles alternatifs aux \u00ab\u00a0burger\u00a0\u00bb menu.<\/li>\n<\/ul>\n<p>Et vous vous avez remarqu\u00e9 quoi de beau sur la toile ces derniers temps ?<br \/>\nBonne exploration !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mon temps de veille \u00e9tait assez r\u00e9duit ces derni\u00e8res semaines, mais voici malgr\u00e9 tout une s\u00e9lection d&rsquo;articles, astuces et ressources, avec pas mal de JS pour enrichir vous sites web ou web app, quelques effets sympa en CSS et une flop\u00e9e d&rsquo;outils, ressources et liens d&rsquo;inspirations pour vous accompagner dans vos cr\u00e9ations graphiques.<\/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-6006","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\/6006","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=6006"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6006\/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=6006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6006"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}