{"id":27531,"date":"2016-08-03T21:01:30","date_gmt":"2016-08-03T13:01:30","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27531"},"modified":"2025-04-21T18:44:20","modified_gmt":"2025-04-21T10:44:20","slug":"designers-developers-monthly-08-2016","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (August 2016)"},"content":{"rendered":"<p>In this article, we feature a list of frameworks and tools that are <strong>geared toward web development<\/strong>. Interestingly, I\u2019ve found a few of these tools and frameworks coming from behemoth corporations like Microsoft and Alibaba.<\/p>\n<p>This is a good sign, as more companies are now contributing to open-source and helping shape a better Web. Let\u2019s take a look at what\u2019s in store for this month\u2019s compilation.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-27531-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-27531-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.cutestrap.com\/\">CuteStrap<\/a><\/h2>\n<p>A UI framework built on top of Sass. It comes with all the most common web interfaces, like forms, navigations, and buttons, which should be sufficient in many cases. If you find popular frameworks like Bootstrap and Foundation overwhelming, <strong>Cutestrap<\/strong> might be a great alternative for you.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CuteStrap\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/cutestrap.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/html5test.com\/\">HTML5 Test<\/a><\/h2>\n<p><strong>HTML5 Test<\/strong> is an online tool that will test how far a browser supports the latest HTML5 specifications. It\u2019s a handy tool for those involved in debugging and testing modern web applications.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"HTML5 Test\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/html5test.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/browser-calories\/pdkibgfjegigkoaleelbkdpkgceljfco\">Browser Calories<\/a><\/h2>\n<p><strong>Browser Calories<\/strong> is a Chrome extension that measures a webpage weight. It scans the files loaded and their contribution to the total weight of the page. A great tiny tool to help you optimize your website performance.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Browser Calories\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/browser-calories.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/weexapp.com\/\">Weex<\/a><\/h2>\n<p><strong>Weex<\/strong> is a framework from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.alibaba.com\/\">Alibaba<\/a> to build mobile apps with just HTML, CSS and JavaScript. It comes with Modules, UI components, its own DevTools, and CLI that is designed for mobile environments and to speed up development.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Weex\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/weex.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.microsoft.com\/en-us\/mwf\/design-resources\">Microsoft Web Framework (MWF)<\/a><\/h2>\n<p>A framework from Microsoft, the UI components in <strong>MWF<\/strong> is built based on the Microsoft Modern design language: flat, clean, and minimalistic. This framework, aside from the UI components, also gives direction on the use of Colors, Typography and Animation.  I think Material Design Lite  has finally met an equal contender.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Microsoft Web Framework\" height=\"390\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/getmwf.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vitalcss.com\/\">Vital<\/a><\/h2>\n<p><strong>Vital<\/strong> is a framework with a very pleasing minimal interface. It is lightweight, has no JavaScript, and natively <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/rouge.jneen.net\/\">Rogue<\/a> \u2013 a syntaxhiglighter based on Ruby.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vital\" height=\"390\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/vital.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/madebysource.com\/\">Fontea<\/a><\/h2>\n<p><strong>Fontea<\/strong> is a free Photoshop extension to easily manage and apply hundreds of Google Fonts. You can search the font from inside Photoshop, preview, and apply the font straight into your design \u2013 streamlining your workflow.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fontea\" height=\"390\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/fontea.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cloudfour.github.io\/drizzle\/\">Drizzle<\/a><\/h2>\n<p>This is a  tool that enables you to build UI patterns or style guides for your website. It will generate things like the colors, basic styles, or layout for components as well as the code snippet. A <a href=\"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/\">style guide<\/a> generator like <strong>Drizzle<\/strong> will allow you to stay consistent with your website styles.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Drizzle\" height=\"390\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/drizzle.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/intercoolerjs.org\/\">InterCooler<\/a><\/h2>\n<p><strong>InterCoolerJS<\/strong> is a JavaScript library that makes applying AJAX on your website as easy as adding HTML attributes. It comes with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/intercoolerjs.org\/docs.html\">an extensive guide<\/a> and plenty of examples to help you get started on using the tool.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"InterCooler\" height=\"390\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/intercooler.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/arunmichaeldsouza.github.io\/picla\/\">Picla<\/a><\/h2>\n<p><strong>Picla<\/strong> is a jQuery plugin to show image labels retrieved from the image <code>alt<\/code> attribute. It provides a few options to let you add custom styling and motion to the label. Picla can be installed as your website dependency with <a href=\"https:\/\/www.hongkiat.com\/blog\/bower-package-manager\/\">Bower<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Picla\" height=\"390\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/picla.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/marcelodolza\/iziModal\">IziModal<\/a><\/h2>\n<p>Here is a  jQuery plugin to show <em>modal<\/em> popups. <strong>IziModal<\/strong> has lots of options for personalization. You can, for example, customize the animation, text content, and colors. It is lightweight, responsive, and retina-ready.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"IziModal\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/izimodal.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/sahat\/megaboilerplate\">MegaBoilerplate<\/a><\/h2>\n<p><strong>MegaBoilerplate<\/strong> is a generator to setup a development stack quickly. Go to the website and select which tools and libraries (Node.js, HTML5, Vanilla JavaScript, and Electron) you will use as your website base. It will compile and configure all the things you need in a zipped package, ready for download.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"MegaBoilerplate\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/megaboilerplate.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/howlerjs.com\/\">Howler<\/a><\/h2>\n<p>A JavaScript library to display modern <a href=\"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/\">audio player<\/a> using Web Audio API, <strong>Howler<\/strong> works in browsers as old as IE9, and supports many audio codecs like MP3, WEBM, WAV. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/goldfire\/howler.js#features\">Lots of features<\/a>, modular, and works with no external library.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Howler\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/howler.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/corbindavenport\/superembed.js\">SuperEmbed<\/a><\/h2>\n<p><strong>SuperEmbed<\/strong> is a tiny JavaScript library that makes embedded objects responsive, while maintaining the original ratio. It supports a wide range of sources, including Youtube, Flickr, Vine, VideoPress, and DailyMotion. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jsfiddle.net\/8w7Lhtyt\/\">See the demo<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"SuperEmbed\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/superembedjs.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nosir.github.io\/cleave.js\/\">CleaveJS<\/a><\/h2>\n<p><strong>Cleave<\/strong> is JavaScript library that automatically formats values in the input. It can, for example, add a thousand separators in currency input, add space in Credit Card number input, or add <code>\/<\/code> in date input. Use this library to serve a better user experience.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CleaveJS\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/cleave.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/flippingtypical.com\/\">Flipping Typical<\/a><\/h2>\n<p><strong>FlippingTypical<\/strong> allows you to view all the fonts installed on your system. I find this app to be more convenient than using the <strong>FontBook<\/strong> app in macOS. I type random text and see which of the fonts on my system look best.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Flipping Typical\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/flatpickr.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/lighttable.com\/\">LightTable<\/a><\/h2>\n<p>A new IDE that I think is worth exploring. It started as a KickStarter project, backed by Matt Mullenweg (WordPress founder), and finally went open source. You can watch <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=52SVAMM3V78\">this video<\/a> to get an idea of how cool this IDE is.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"LightTable\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/light-table.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/compressor.io\/\">Compressor<\/a><\/h2>\n<p><strong>Compressor<\/strong> is a web app that compresses image files down to the tiniest size without losing visual quality. It supports JPG, GIF, PNG, and SVG as well. This app is free.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Compressor\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/compressor.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-edge\/tools\/staticscan\/\">Microsoft Site Scan<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Microsoft Site Scan\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/staticscan.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/disable-blogging\/\">Disable Blogging<\/a><\/h2>\n<p>This plugin, as the name implies, will remove blogging features like Posts, Comments and Feeds. It is the right plugin for you if you do not need the blogging feature in WordPress.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Disable Blogging\" height=\"385\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/disable-blogging.jpg\" width=\"700\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>In this article, we feature a list of frameworks and tools that are geared toward web development. Interestingly, I\u2019ve found a few of these tools and frameworks coming from behemoth corporations like Microsoft and Alibaba. This is a good sign, as more companies are now contributing to open-source and helping shape a better Web. Let\u2019s&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 (August 2016) - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this article, we feature a list of frameworks and tools that are geared toward web development. Interestingly, I&#039;ve found a few of these tools and\" \/>\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-08-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 (August 2016)\" \/>\n<meta property=\"og:description\" content=\"In this article, we feature a list of frameworks and tools that are geared toward web development. Interestingly, I&#039;ve found a few of these tools and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-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-08-03T13:01:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:44:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/cutestrap.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-08-2016\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (August 2016)\",\"datePublished\":\"2016-08-03T13:01:30+00:00\",\"dateModified\":\"2025-04-21T10:44:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/\"},\"wordCount\":873,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-08-2016\\\/cutestrap.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-08-2016\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (August 2016) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-08-2016\\\/cutestrap.jpg\",\"datePublished\":\"2016-08-03T13:01:30+00:00\",\"dateModified\":\"2025-04-21T10:44:20+00:00\",\"description\":\"In this article, we feature a list of frameworks and tools that are geared toward web development. Interestingly, I've found a few of these tools and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2016\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-08-2016\\\/cutestrap.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-08-2016\\\/cutestrap.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-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 (August 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 (August 2016) - Hongkiat","description":"In this article, we feature a list of frameworks and tools that are geared toward web development. Interestingly, I've found a few of these tools and","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-08-2016\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (August 2016)","og_description":"In this article, we feature a list of frameworks and tools that are geared toward web development. Interestingly, I've found a few of these tools and","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-08-03T13:01:30+00:00","article_modified_time":"2025-04-21T10:44:20+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/cutestrap.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-08-2016\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (August 2016)","datePublished":"2016-08-03T13:01:30+00:00","dateModified":"2025-04-21T10:44:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/"},"wordCount":873,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/cutestrap.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-08-2016\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/","name":"Fresh Resources for Web Designers and Developers (August 2016) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/cutestrap.jpg","datePublished":"2016-08-03T13:01:30+00:00","dateModified":"2025-04-21T10:44:20+00:00","description":"In this article, we feature a list of frameworks and tools that are geared toward web development. Interestingly, I've found a few of these tools and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2016\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/cutestrap.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2016\/cutestrap.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-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 (August 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-7a3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27531","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=27531"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27531\/revisions"}],"predecessor-version":[{"id":73944,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27531\/revisions\/73944"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=27531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=27531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=27531"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=27531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}