{"id":48970,"date":"2019-10-31T23:17:53","date_gmt":"2019-10-31T15:17:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=48970"},"modified":"2025-04-21T17:58:52","modified_gmt":"2025-04-21T09:58:52","slug":"designers-developers-monthly-10-2019","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (October 2019)"},"content":{"rendered":"<p>In this month\u2019s round of our Fresh Resource series, we\u2019ve put together a wide variety of tools, frameworks, and materials for our fellow web developers. We\u2019ve got React extensions, several PHP-based applications, a CSS library that will make you feel nostalgic, and a reference to help you improve your development skills. Without further ado, let\u2019s see the full list:<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-48970-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-48970-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:\/\/free-for.dev\/\">FreeForDev<\/a><\/h2>\n<p>FreeForDev is an amazing list of services that provide free tiers. The list is vast, ranging from Cloud Providers, Web Hosting, Source Code Repos, Code Quality Services, Monitoring, etc. I\u2019m sure many developers will find this vast useful, especially for those who have just gotten started and on budget.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Free For Dev\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/free-for-dev.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/tinacms\/tinacms\">TinaCMS<\/a><\/h2>\n<p>TinaCMS is a \u201cCMS\u201d based on the latest shiniest stacks today \u2014 React, Gatsby and Next.js. The CMS allows you to add fields on the website allowing you to edit your site content in real-time. TinaCMS supports a number of field editors, including the text, textarea, image, datepicker, and color. Not a fan of working with React.js? Soon it will also support <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/\">Vue.js<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gridsome.org\/\">Gridsome<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> setup.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Tina CMS\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/tinacms.jpg\" width=\"750\" height=\"480\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/cretueusebiu\/laravel-vue-spa\">Laravel Vue SPA<\/a><\/h2>\n<p>As the name implies, it is a framework for building Singla Page Application (SPA) with Laravel and Vue.js. It works with Laravel 6.0, which is the latest version to date, and it also comes Socialite to let you integrate with Social media sites like Twitter and Github. An overall immense framework that will save a lot of time on building SPA.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Laravel Vue SPA\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/laravel-vue-spa.jpg\" width=\"750\" height=\"480\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bookstackapp.com\/\">BookStackApp<\/a><\/h2>\n<p>A self-hosted CMS for organizing and storing information. It\u2019s a perfect platform to publishing documentation, notes or Wiki. It\u2019s free, open-source, built with Laravel, customizable, and you can host it in as low as  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/go\/do\">DigitalOcean<\/a> VPS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Book Stack App\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/bookstackapp.jpg\" width=\"750\" height=\"410\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/freshrss.org\/\">FreshRSS<\/a><\/h2>\n<p>A self-hosted application to read RSS feed. Built with PHP with very minimum requirements. FreshRSS is a good alternative to Saas like Feedly. With FreshRSS, you keep all your data, you can either install it in a very cheap web hosting or in a localhost with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mamp.info\/en\/\">MAMP<\/a> or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.wampserver.com\/en\/\">WAMP<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fresh RSS\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/freshrss.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nostalgic-css.github.io\/NES.css\/\">NES.css<\/a><\/h2>\n<p>A collection of CSS frameworks to build UI components such as buttons, forms, and inputs with 8-bit retro styles from NES (Nintendo).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"NES CSS\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/nes.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/formulae.brew.sh\/formula\/whois\">Whois<\/a><\/h2>\n<p>A command line utility to check a domain registration. It performs fast, and I find it a really good alternative compared to the web-based Whois website checker, which often is annoying with the popup ads and the Captcha verification.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Whois\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/whois.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/angular\/protractor\">Protractor<\/a><\/h2>\n<p>A End-to-end test framework built exclusively for Angular and AngularJS applications. It allows you to run a series of tests in a real browser and interact with the application like a normal user, which will ensure that your Angular app is working as expected.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Protractor\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/protractor.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/SortableJS\/Sortable\">Sortable<\/a><\/h2>\n<p>A JavaScript library to create a sortable interface. It\u2019s built with pure JavaScript without being attached to any dependency library. This allows it to seamlessly integrate into various frameworks like React.js and Vue.js.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Sortable\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/sortablejs.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/jaredpalmer\/tsdx\">TSDX<\/a><\/h2>\n<p>TSDX aims to improve the developer experience when setting up a TypeScript project. With just a single command, you can get up and ready to work on your project immediately, so you don\u2019t need to waste time setting up TypeScript, Rollup, Jest or other configurations.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"TSDX\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/tsdx.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/channel\/UC8bRyfU7ycLXnEBfvdorpUg\/videos\">JAMStack Conf<\/a><\/h2>\n<p>A collection of JAMStack Conf video in 2019. Lots of great talks from great speakers to keep up with the progress in the web industry.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"JAM Stack Conf\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/jamstackconf.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/bats-core\/bats-core\">Bats Core<\/a><\/h2>\n<p>Bash is one of my favorite languages. But I\u2019ve only figured out it now that we can run an automated test with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/bats-core\/bats-core\">Bats<\/a>. Much like in other programming languages like PHP and JavaScript, automated testing can help us to ensure that the program is functioning as expected.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bats Core\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/bats.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/theme-ui.com\/\">Theme UI<\/a><\/h2>\n<p>A JavaScript library for React.js applications to build consistent customizable UI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Theme UI\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/theme-ui.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/beizhedenglong\/rough-charts\">Rough Charts<\/a><\/h2>\n<p>A React.js component to draw sketchy rough charts. It\u2019s responsive and supports a number of common chart types, including Pie, Bar, and Line. If you\u2019d like to show Charts on your website that does not look boring, this might be a good one.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Rough Charts\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/rough-chart.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbuttercake.com\/\">Butter Cake<\/a><\/h2>\n<p>A modern CSS framework built with CSS Flexbox. It comes with a number of pre-defined UI components such as Buttons, Accordion, Breadcrumbs, Navigations, Forms, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Butter Cake\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/butter-cake.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/opensource.appbase.io\/reactivesearch\/\">Reactive Search<\/a><\/h2>\n<p>A UI component to building consistent search UI with ElasticSearch. Components include the search form with a suggestion list as well as the search filters. You can use it with React.js, Vue.js, and React Native.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Reactive Search\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/reactivesearch.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/rebassjs\/rebass\">ReBass<\/a><\/h2>\n<p>A collection of React components such as the Button, the Headings, and Forms built with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/styled-system\/styled-system\/blob\/master\/docs\/getting-started.md\">Styled System<\/a>. The styled system is a standardized React props to change styles. It makes customizing the component style quick, easy, and most consistent.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Re Bass\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/rebass.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cosmos.flatris.space\">React Cosmos<\/a><\/h2>\n<p>A UI component sandbox for React.js. It allows you to render the UI component in isolation. You can test each of your component properties, interact with it, and view it in different viewport sizes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Cosmos\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/react-cosmos.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/kimmobrunfeldt.github.io\/progressbar.js\/\">ProgressBar<\/a><\/h2>\n<p>This JavaScript library makes it easy to create a fancy progress bar on your website. You can create a classic straight-line progress bar, but you can also make it a circle, triangular, or custom shape like a heart shape, for example.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Progress Bar\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/progressbar.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/seek-oss\/treat\">Treat<\/a><\/h2>\n<p>A JavaScript library to write CSS-in-JS. Treat works slightly differently than the other CSS-in-JS. It compiles the CSS during the build time instead of during runtime in the browser. So in a way, it technically works similar to CSS Pre-processors \u2014 Sass or LESS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Treat\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/treat.jpg\" width=\"750\" height=\"463\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>In this month\u2019s round of our Fresh Resource series, we\u2019ve put together a wide variety of tools, frameworks, and materials for our fellow web developers. We\u2019ve got React extensions, several PHP-based applications, a CSS library that will make you feel nostalgic, and a reference to help you improve your development skills. Without further ado, let\u2019s&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2539],"topic":[],"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 (October 2019) - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this month&#039;s round of our Fresh Resource series, we&#039;ve put together a wide variety of tools, frameworks, and materials for our fellow web developers.\" \/>\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-10-2019\/\" \/>\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 (October 2019)\" \/>\n<meta property=\"og:description\" content=\"In this month&#039;s round of our Fresh Resource series, we&#039;ve put together a wide variety of tools, frameworks, and materials for our fellow web developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/\" \/>\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=\"2019-10-31T15:17:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T09:58:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/free-for-dev.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-10-2019\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (October 2019)\",\"datePublished\":\"2019-10-31T15:17:53+00:00\",\"dateModified\":\"2025-04-21T09:58:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/\"},\"wordCount\":923,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2019\\\/free-for-dev.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (October 2019) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2019\\\/free-for-dev.jpg\",\"datePublished\":\"2019-10-31T15:17:53+00:00\",\"dateModified\":\"2025-04-21T09:58:52+00:00\",\"description\":\"In this month's round of our Fresh Resource series, we've put together a wide variety of tools, frameworks, and materials for our fellow web developers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2019\\\/free-for-dev.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2019\\\/free-for-dev.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2019\\\/#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 (October 2019)\"}]},{\"@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 (October 2019) - Hongkiat","description":"In this month's round of our Fresh Resource series, we've put together a wide variety of tools, frameworks, and materials for our fellow web developers.","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-10-2019\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (October 2019)","og_description":"In this month's round of our Fresh Resource series, we've put together a wide variety of tools, frameworks, and materials for our fellow web developers.","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-10-31T15:17:53+00:00","article_modified_time":"2025-04-21T09:58:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/free-for-dev.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-10-2019\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (October 2019)","datePublished":"2019-10-31T15:17:53+00:00","dateModified":"2025-04-21T09:58:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/"},"wordCount":923,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/free-for-dev.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/","name":"Fresh Resources for Web Designers and Developers (October 2019) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/free-for-dev.jpg","datePublished":"2019-10-31T15:17:53+00:00","dateModified":"2025-04-21T09:58:52+00:00","description":"In this month's round of our Fresh Resource series, we've put together a wide variety of tools, frameworks, and materials for our fellow web developers.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/free-for-dev.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2019\/free-for-dev.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2019\/#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 (October 2019)"}]},{"@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-cJQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/48970","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=48970"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/48970\/revisions"}],"predecessor-version":[{"id":73880,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/48970\/revisions\/73880"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=48970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=48970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=48970"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=48970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}