{"id":29545,"date":"2017-03-23T23:01:28","date_gmt":"2017-03-23T15:01:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29545"},"modified":"2025-04-21T19:19:00","modified_gmt":"2025-04-21T11:19:00","slug":"designers-developers-monthly-03-2017","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (March 2017)"},"content":{"rendered":"<p>The <a href=\"https:\/\/www.hongkiat.com\/blog\/web-designers-essential-command-lines\/\">Command Line Interface (CLI)<\/a> has become an essential tool for streamlining and automating web development workflows. That\u2019s why this month\u2019s collection features several powerful CLI tools you can install locally or run on your server.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-29545-1\">\n\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/fresh-resources-developers\/\" target=\"_blank\" class=\"ref-block__link\" title=\"Read More: Click Here for More Resources\" rel=\"bookmark\"><span class=\"screen-reader-text\">Click Here for More Resources<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/related\/tag-fresh-resources-developers.jpg\" }'>\n\t\t\t<noscript>\n<style>.no-js #ref-block-tax-29545-1 .ref-block__thumbnail {\n\t\t\t\t\tbackground-image: url( \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/related\/tag-fresh-resources-developers.jpg\" );\n\t\t\t\t}<\/style>\n<p>\t\t\t<\/p><\/noscript>\n\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Click Here for More Resources<\/h4>\n<div class=\"ref-description\">\n<p>Check out our complete collection of hand-picked tools for designers and developers.<\/p>\n<\/div><\/div>\n<\/div>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/google\/guetzli\">Guetzli<\/a><\/h2>\n<p>A new encoder from Google that <strong>allows to compress image down by up to 35%<\/strong> from the initial size while retaining the quality. It is quite a breakthrough given that similar open source encoders, such as <strong>JPEGOptim and jpegtran, are capped to only 20% on avarage<\/strong>. I can see that there will be a number of apps and plugins for CMS platform integrating Guetzli to optimize JPEG files.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Guetzli\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/guetzli.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/kamranahmedse\/developer-roadmap\">Developer Roadmap<\/a><\/h2>\n<p>As the name implies, Developer Roadmap is an <strong>infographic of journey of being a Web Developer<\/strong>. There are three courses Front-end, Back-end, and DevOps. These roadmaps are like, well, a map; and are a great reference to see <strong>where we\u2019re currently at, what we might have missed, and where we\u2019re going next<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Developer Roadmap\" height=\"447\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/web-developer-roadmap.jpg\" width=\"702\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.netlify.com\/\">Netlify CMS<\/a><\/h2>\n<p>SmashingMagazine has recently made a <strong>bold move to ditch WordPress<\/strong> and try something new entirely with a new CMS called Netlify CMS. It is a new CMS built on top of React.js and can be <strong>integrated with any static site generator like Jekyll, Hugo, and MiddleMan<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Netlify CMS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/netlifycms.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/chromium\/badssl.com\">BadSSL<\/a><\/h2>\n<p>It\u2019s a <strong>website to check your SSL configuration<\/strong>. BadSSL is a handy tool to perform debugging and errors over SSL installed on your site.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"BadSSL\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/badssl.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/ireade\/alix\">Alix<\/a><\/h2>\n<p>Alix is a <strong>Chrome extension that allows you to audit your website accesibility<\/strong>. Once installed and enabled, the plugin will add an overlay box over a number of elements on the page <strong>which pose warning or errors<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Alix\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/alix.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/jeromeetienne\/AR.js\">AR.js<\/a><\/h2>\n<p>AR.js is <strong>JavaScript libraries unlike the others<\/strong>. This library enables us to create Augmented Reality using Web technology, and <strong>surprisingly runs really fast on mobile phones<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"AR.js\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/arjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/unsplash.github.io\/react-trend\/\">React Trend<\/a><\/h2>\n<p>It\u2019s a <strong>react component from Unsplash to create lovely Line chart typically for showing trends<\/strong>. The component is configurable; you can set the line thickness, color, gradients, and the curve smoothness. You can simply use the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/unsplash.github.io\/react-trend\/\">GUI<\/a> to <strong>conveniently generate the component code<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Trend\" height=\"474\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/react-trend.jpg\" width=\"495\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/Nightonke\/Gitee\">Gitee<\/a><\/h2>\n<p>A <strong>macOS application to monitor your Github activity right from your desktop<\/strong>, Gitee adds a new item on the status bar showing numbers of stars, followers, and notification. In addition, you can also <strong>view charts of your push and commits on a repository as well as trending repository<\/strong> on the current month and week. It is Github on Desktop in a nutshell.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Gitee\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/gitee.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/captainsafia\/goops\">Goops<\/a><\/h2>\n<p>Goops is a <strong>handy CLI that will analyze your project directory<\/strong> and determine the directories and files to add in the <code>.gitignore<\/code>. The CLI can be installed via NPM. Once installed, type <code>goops<\/code> and done.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Goops\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/goops.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/imbrianj\/debugCSS\">Debug CSS<\/a><\/h2>\n<p>DebugCSS is a <strong>CSS drop-in utility that allows you to analyze and validate your CSS output on the browser<\/strong>. It works quite similar to Alix, when you load the debugCSS stylesheet or use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/imbrianj.github.io\/debugCSS\/\">the bookmarklet<\/a>, it <strong>highlights the elements on the page that pose errors or warnings<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Debug CSS\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/debug-css.jpg\" width=\"697\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/Zulko\/eagle.js\">EagleJS<\/a><\/h2>\n<p>EagleJS is a <strong>JavaScript library to create presentation<\/strong> similar to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/hakimel\/reveal.js\">RevealJS<\/a>. EagleJS is differ in some ways; it is built using Vue.js, a JavaScript MVC framework, and use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/pugjs.org\/api\/getting-started.html\">Pug<\/a> <strong>as the templating system to build the slide<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"EagleJS\" height=\"401\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/eagle-js.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootstraptour.com\/\">BootstrapTour<\/a><\/h2>\n<p>A <strong>JavaScript library to build pop-up guides using a Bootstrap component<\/strong>. The popup guides usually appear for new user to walk them through the application interface, new features, and for showing tips. <strong>It is a perfect library if your site is built with Bootstrap as well<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bootstrap Tour\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/bootstraptour.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mozbrick.github.io\/\">Brick<\/a><\/h2>\n<p>Brick is <strong>a JavaScript library designed to build web application UI<\/strong>. You\u2019ll find some common ones like Calendar, Menu, and Form among the bundled components, It also comes with a <strong>\u201cstorage-indexeddb\u201d<\/strong> component to allow you to <strong>store data on the client-side using IndexedDB<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Brick\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/brick.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/ovity\/octotree\">OctoTree<\/a><\/h2>\n<p>OctoTree is a nice utility that allows to browse source codes and files on Github with Tree structure as in an IDEs or code editors. It comes as an add-on for Chrome, Safari, Firefox, and Opera, and available on their official add-on repository. Octotree supports Private and Enterprise Github repository.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"OctoTree\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/octotree.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/sindresorhus\/notifier-for-github\">Github Notification<\/a><\/h2>\n<p>Another useful Github extension for Chrome. Once installed you will be able to receive notification even if you\u2019re currently not on Github pages. A great plugin if you want to stay in the loop with your repositories.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Github Notification\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/github-notification.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/deployer.org\/\">Deployer<\/a><\/h2>\n<p>Deployer is a tool to deploy your PHP sites. It works with a number of popular frameworks and platforms including WordPress, Drupal, Magento, Laravel, and CodeIgniter. With this tool, you can compose your own recipes, a piece of command to run during deployment. It comes with <strong>Rollback<\/strong> feature which enable you to go back to previous version in case of failures.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Deployer\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/deployer.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/phpstan\/phpstan\">PHPStan<\/a><\/h2>\n<p>A CLI that to scan PHP files to find errors without executing the runtime. This means that you do not need a full-stack PHP environment to debug the PHP files on your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"PHPStan\" height=\"384\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/phpstan.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/nginx-boilerplate\/nginx-boilerplate\">NGINX Boilerplate<\/a><\/h2>\n<p>A collection of common Nginx configurations which include Backend Caching, connection and requests rate limit, and some other best practices to boost your site for speed and tune it up for traffic rush.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"NGINX Boilerplate\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/nginx-boilerplate.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/eustasy\/bubbly\">Bubbly<\/a><\/h2>\n<p>Bubbly is a great command line that you can install on your server to generate, manage, and renew certificate with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/letsencrypt.org\/\">Let\u2019s Encrypt<\/a>. Doplying SSL is now getting so much easier.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bubbly\" height=\"406\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/bubbly.jpg\" width=\"690\"><\/figure>\n<hr>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-02-2017\/\">Fresh Resources for Web Designers and Developers (February 2017)<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>The Command Line Interface (CLI) has become an essential tool for streamlining and automating web development workflows. That\u2019s why this month\u2019s collection features several powerful CLI tools you can install locally or run on your server. Guetzli A new encoder from Google that allows to compress image down by up to 35% from the initial&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2539],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (March 2017) - Hongkiat<\/title>\n<meta name=\"description\" content=\"The Command Line Interface (CLI) has become an essential tool for streamlining and automating web development workflows. That&#039;s why this month&#039;s\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fresh Resources for Web Designers and Developers (March 2017)\" \/>\n<meta property=\"og:description\" content=\"The Command Line Interface (CLI) has become an essential tool for streamlining and automating web development workflows. That&#039;s why this month&#039;s\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-23T15:01:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:19:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/guetzli.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (March 2017)\",\"datePublished\":\"2017-03-23T15:01:28+00:00\",\"dateModified\":\"2025-04-21T11:19:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/\"},\"wordCount\":910,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-03-2017\\\/guetzli.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (March 2017) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-03-2017\\\/guetzli.jpg\",\"datePublished\":\"2017-03-23T15:01:28+00:00\",\"dateModified\":\"2025-04-21T11:19:00+00:00\",\"description\":\"The Command Line Interface (CLI) has become an essential tool for streamlining and automating web development workflows. That's why this month's\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-03-2017\\\/guetzli.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-03-2017\\\/guetzli.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-03-2017\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fresh Resources for Web Designers and Developers (March 2017)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fresh Resources for Web Designers and Developers (March 2017) - Hongkiat","description":"The Command Line Interface (CLI) has become an essential tool for streamlining and automating web development workflows. That's why this month's","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (March 2017)","og_description":"The Command Line Interface (CLI) has become an essential tool for streamlining and automating web development workflows. That's why this month's","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-03-23T15:01:28+00:00","article_modified_time":"2025-04-21T11:19:00+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/guetzli.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (March 2017)","datePublished":"2017-03-23T15:01:28+00:00","dateModified":"2025-04-21T11:19:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/"},"wordCount":910,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/guetzli.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/","name":"Fresh Resources for Web Designers and Developers (March 2017) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/guetzli.jpg","datePublished":"2017-03-23T15:01:28+00:00","dateModified":"2025-04-21T11:19:00+00:00","description":"The Command Line Interface (CLI) has become an essential tool for streamlining and automating web development workflows. That's why this month's","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/guetzli.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2017\/guetzli.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-03-2017\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fresh Resources for Web Designers and Developers (March 2017)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7Gx","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29545"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29545\/revisions"}],"predecessor-version":[{"id":73961,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29545\/revisions\/73961"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29545"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}