{"id":27882,"date":"2016-09-01T23:01:55","date_gmt":"2016-09-01T15:01:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27882"},"modified":"2025-04-21T19:48:29","modified_gmt":"2025-04-21T11:48:29","slug":"designers-developers-monthly-09-2016","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (September 2016)"},"content":{"rendered":"<p>We\u2019re back again with a handful of resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a desktop application, a few web applications, handy PHP and JavaScript libraries, and a couple of WordPress plugins. Let\u2019s check them out.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-27882-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-27882-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:\/\/yhatt.github.io\/marp\/\">Marp<\/a><\/h2>\n<p><strong>Marp<\/strong> is an editor to <strong>create presentations in Markdown<\/strong>. It has two panels: an Editor on the left and a Preview on the right, where you can view the slide output in real time. It\u2019s available in OS X, Windows, and Linux. It\u2019s a great alternative to a bloated software like PowerPoint.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Marp\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/marp.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sachinchoolur.github.io\/lightgallery.js\/\">LightGallery<\/a><\/h2>\n<p>A JavaScript to <strong>display image lightbox and gallery<\/strong>. The <em>lightbox interface<\/em> is equipped with a handful of buttons where you can zoom-in, zoom-out, download the image, and turn the image fullscreen. It is truly an all-in-one package JavaScript library in this category.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Light Gallery\" height=\"488\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/light-gallery.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/react-developer-tools\/fmkadmapgofadopljbjfkapdkoienihi?hl=en\">React Developer Tools<\/a><\/h2>\n<p><strong>React Developer Tools<\/strong> is a Google Chrome extension that allows us decode Reacts <strong>rendered components<\/strong> on the browser. Once installed, it adds a new tab in the DevTools where you can inspect the root, elements and debug React components as you would with regular HTML.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Developer Tools\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/react-devtools.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sharingbuttons.io\/\">SharingButtons<\/a><\/h2>\n<p><strong>SharingButtons<\/strong> is a <strong>sharing buttons generator<\/strong>. It currently supports a number of popular social sites such as Facebook, Twitter and Pinterests. The output unloads the JavaScripts bloats and can later be easily customized through CSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Sharing Buttons Generator User Interface\" height=\"488\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/sharingbuttons.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/camwiegert.github.io\/baffle\/\">Baffle<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Baffle Js Homepage\" height=\"488\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/baffle.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hyperterm.org\/\">HyperTerm<\/a><\/h2>\n<p><strong>HyperTerm<\/strong> is a <strong>terminal emulator<\/strong>, an application, built on top of HTML, CSS, and JavaScript. It is modular where developers can contribute, introducing modules that add new functionality. The app is currently only available for macOS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Hyper Term Dark Homepage\" height=\"488\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/hyperterm.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/paulkr.github.io\/overhang.js\/\">OverHang<\/a><\/h2>\n<p><strong>OverHang.js<\/strong> is a jQuery plugin to <strong>show instant notification<\/strong>. The plugin is customizable. You can set the text message in the notification, the colors, and how long it appears before it fades out.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Over Hang Code Snippet\" height=\"488\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/overhang.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/kosinix.github.io\/grafika\/\">Grafika<\/a><\/h2>\n<p><strong>Grafika<\/strong> is a collection of PHP functions that allows us to <strong>manipulate image<\/strong>. We can apply image filters like blur and sepia. We can also transform images like flipping, rotating and resizing.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Grafika Github Repository\" height=\"488\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/grafika.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/AdamMarsden\/simple-typography\">Simple Typography<\/a><\/h2>\n<p><strong>Simple Typography<\/strong> is a Sass library that resets Typography styling \u2013 such as font sizing and line height. It\u2019s another small library that you might want to utilize to <strong>make text on your website beautifully and proportionally sized<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Simple Typography\" height=\"488\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/simple-typography.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jekyll.github.io\/jekyll-admin\/\">Jekyll Admin<\/a><\/h2>\n<p><a href=\"https:\/\/www.hongkiat.com\/blog\/blog-with-jekyll\/\">Jekyll is a static blog generator<\/a>. This is an official Jekyll plugin that adds a GUI editor to write posts with Jekyll; this makes author post with Jekyll more intuitive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Jekyll Admin Interface\" height=\"422\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/jekyll.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/anime-js.com\/\">Anime.js<\/a><\/h2>\n<p><strong>Anime.js<\/strong> is a JavaScript library to <strong>perform fluid animation on the web<\/strong>. It applicable to regular HTML, SVG, CSS Transformations. Find the complete instruction to make use the most of it and some inspiring examples <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/juliangarnier\/anime\">in the documentation<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Anime Js Homepage\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/animejs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/Postleaf\/postleaf\">PostLeaf<\/a><\/h2>\n<p><strong>PostLeaf<\/strong> is a PHP-based <abbr title=\"Content Management System\">CMS<\/abbr> equipped with some handy features built-in. Front-end editing, backups, pages, posts, oEmbed, SEO, and navigation are things necessary that do the chore of maintaining websites easy.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Postleaf Responsivity In Multiple Screen Size\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/postleaf.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/alrra\/browser-logos\">Browsers Logos<\/a><\/h2>\n<p>A complete collection of all browser logos. You can find icons for popular browsers like Chrome, Firefox and Internet Explorer, including the icons of their mobile app. You can also find less popular browsers that you may have never heard before, such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blisk.io\/\">Blisk<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/iridiumbrowser.de\/\">Iridium<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/orbitum.com\/\">Orbitum<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"A Few Logo Of Popular Browsers\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/browser-logo.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/wa11y\/\">wA11y<\/a><\/h2>\n<p>A WordPress plugin to help us <strong>improve accessibility<\/strong> on a website. Once activated, the plugin will evaluate our websites with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tota11y.dev\/\">tota11y<\/a>, deliver feedbacks for violations that affect accessibility, and suggest solutions to fix it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Plugin Interface\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/wA11y.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/automatic-alternative-text\/\">Automatic Alternative Text<\/a><\/h2>\n<p>Another WordPress plugin worth mentioning, that improves website accessibility by <strong>adding <code>alt<\/code> text to images<\/strong> uploaded through WordPress Media manager. The generated \u201calt\u201d text is powered by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.microsoft.com\/cognitive-services\/en-us\/computer-vision-api\">Microsoft Computer API<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WordPress Media Library Interface\" height=\"402\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/auto-alt-text.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/projects.verou.me\/multirange\/\">Multi-range<\/a><\/h2>\n<p>A JavaScript library, a polyfill, for HTML 5.1 <code>multi-range<\/code> output which is currently is still poorly implemented in browsers. Lea Verou shared her story behind this library in her recent post, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lea.verou.me\/2016\/05\/introducing-multirange-a-tiny-polyfill-for-html5-two-handle-sliders\/\">Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders<\/a>, which is definitely worth reading.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Multi Range Logo In The Homepage\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/multirange.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/stripe-archive\/jquery.payment\">jQuery Payment<\/a><\/h2>\n<p>A jQuery plugin developed by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/stripe.com\/\">Stripe<\/a>, a payment processing service. This plugin makes <strong>developing a credit card form<\/strong> less terrifying. It supports numerous credit cards including Visa, Master Card Amex, UnionPay, and JCB.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"JQuery Payment\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/jquery-payment.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/trix-editor.org\/\">Trix Editor<\/a><\/h2>\n<p><strong>Trix<\/strong> is a <strong>WYSIWYG editor<\/strong> that we can utilize to produce content. Deploying trix is quick and easily extensible with new functionality to meet your need. You can find all the instructions <a href=\"https:\/\/www.hongkiat.com\/basecamp\/trix#readme\" rel=\"nofollow\">in the documentation<\/a> get up and running Trix on your web application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Trix Editor Interface\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/trix.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/ngfw\/Recipe\">Recipe<\/a><\/h2>\n<p><strong>Recipe<\/strong> is a collection of PHP to <strong>run common utility functions<\/strong> such as grab Gravatar image, generating a QR code, convert an array to an object, and much more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"QR Code With PHP Recipe Code Snippet\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/php-recipe.jpg\" width=\"750\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>We\u2019re back again with a handful of resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a desktop application, a few web applications, handy PHP and JavaScript libraries, and a couple of WordPress plugins. Let\u2019s check them out. Marp Marp is an editor to create&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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (September 2016) - Hongkiat<\/title>\n<meta name=\"description\" content=\"We&#039;re back again with a handful of resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a\" \/>\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-09-2016\/\" \/>\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 (September 2016)\" \/>\n<meta property=\"og:description\" content=\"We&#039;re back again with a handful of resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/\" \/>\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=\"2016-09-01T15:01:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:48:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/marp.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=\"8 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-09-2016\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (September 2016)\",\"datePublished\":\"2016-09-01T15:01:55+00:00\",\"dateModified\":\"2025-04-21T11:48:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/\"},\"wordCount\":791,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2016\\\/marp.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-09-2016\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (September 2016) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2016\\\/marp.jpg\",\"datePublished\":\"2016-09-01T15:01:55+00:00\",\"dateModified\":\"2025-04-21T11:48:29+00:00\",\"description\":\"We're back again with a handful of resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2016\\\/marp.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2016\\\/marp.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2016\\\/#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 (September 2016)\"}]},{\"@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 (September 2016) - Hongkiat","description":"We're back again with a handful of resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a","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-09-2016\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (September 2016)","og_description":"We're back again with a handful of resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-09-01T15:01:55+00:00","article_modified_time":"2025-04-21T11:48:29+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/marp.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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (September 2016)","datePublished":"2016-09-01T15:01:55+00:00","dateModified":"2025-04-21T11:48:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/"},"wordCount":791,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/marp.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-09-2016\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/","name":"Fresh Resources for Web Designers and Developers (September 2016) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/marp.jpg","datePublished":"2016-09-01T15:01:55+00:00","dateModified":"2025-04-21T11:48:29+00:00","description":"We're back again with a handful of resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/marp.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2016\/marp.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2016\/#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 (September 2016)"}]},{"@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-7fI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27882","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=27882"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27882\/revisions"}],"predecessor-version":[{"id":74001,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27882\/revisions\/74001"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=27882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=27882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=27882"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=27882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}