{"id":57901,"date":"2021-10-31T18:01:09","date_gmt":"2021-10-31T10:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=57901"},"modified":"2025-04-21T19:52:06","modified_gmt":"2025-04-21T11:52:06","slug":"designers-developers-monthly-10-2021","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (October 2021)"},"content":{"rendered":"<p>We\u2019ve been running this series for several years now, and it feels like we never run out of <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/fresh-resources-developers\/\">great new resources<\/a> for designers and developers. In this round of the series, we have tools, articles, and tutorials that both backend <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/web-developers\/\">PHP developers and front-end developers<\/a> would appreciate.<\/p>\n<p>We\u2019ve got a resource to get a dummy logo, a tool to generate image mockups, a GUI tool to scaffold your next cool application with Laravel, and much more.<\/p>\n<p>Let\u2019s jump in to get the full list.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-57901-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-57901-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:\/\/showcode.app\/\">Showcode<\/a><\/h2>\n<p>A web application that allows you to <strong>nicely present your code with an image<\/strong>. You can customize the background color, the code editor frame, and the size.<\/p>\n<p>It supports many programming languages such as <strong>PHP, JavaScript, as well as templating languages like Twig<\/strong>. A handy tool to share code beautifully.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Showcode\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/showcodeapp.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/revoltphp\/event-loop\">EventLoop<\/a><\/h2>\n<p>With PHP8, PHP got a boost of improvements including <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/php.watch\/versions\/8.1\/fibers\">Fiber<\/a> that\u2019s coming to PHP8.1. This addition allows PHP to manage concurrency operation natively, and enables the developer to build a ramework on top of it such as to build \u201cEvent Loop\u201d.<\/p>\n<p>Event Loop is a <strong>mechanism that will allow PHP to perform a non-blocking I\/O process<\/strong>. There are not many references for Event Loop on PHP, at the moment, but you can look into the same concept <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/learn\/asynchronous-work\/event-loop-timers-and-nexttick\">from the Node.js reference<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Event Loop\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/event-loop.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/area17\/blast\">Laravel Storybook<\/a><\/h2>\n<p>This library integrates Storybook \u2013 a popular application to manage UI and design system \u2013 into Laravel. With it, you can <strong>render unit of your Larvel components using the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laravel.com\/docs\/8.x\/blade\">Blade templating<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"\">Storybook Server<\/a><\/strong> right within your Laravel app.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Laravel Storybook\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/laravel-blast-storybook.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/microsoft\/vscode-webview-ui-toolkit\">VSCode WebView UI<\/a><\/h2>\n<p>A <strong>UI and design library for Visual Studio Code (VSCode) editor<\/strong>. It has a simple interface for the editor like the button, select, text area, and input. A great resource if you plan to build an extension for VSCode and maintain consistency of your extension with the editor.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"VSCode WebView UI\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/vscode-uikit.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laravel.initializer.dev\/\">Laravel Initializer<\/a><\/h2>\n<p>A web application to <strong>generate a scaffold with Laravel<\/strong>. It enables you to generate the bare Laravel framework, \u201cBreeze\u201d that\u2019s already bundled with some utilities (e.g. user authentication, UI framework), and \u201cJetstream\u201d which is a more advanced upgraded version of Breeze.<\/p>\n<p>On top of that, you can also set the stack such as the database \u2014 whether you\u2019d like to choose <strong>MySQL or PosgreSQL, Authentication method, Storage, Cache<\/strong>, and even the Payment system.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Laravel Initializer\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/laravel-initializer.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/php-flasher.github.io\/\">PHP Flasher<\/a><\/h2>\n<p>A framework to <strong>manage a notification system with PHP<\/strong>. It allows you to show various types of notifications simultaneously, render notifications from JSON, and even <strong>send notification to the OS<\/strong>. If you\u2019re a developer who is very comfortable with PHP, you will definitely appreciate this framework.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"PHP Flasher\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/php-flasher.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/logoipsum.com\/\">LogoIpsum<\/a><\/h2>\n<p>A <strong>collection of free dummy logos<\/strong> you can display on your mockup, template, or dummy website and application. It has quite a handful of collection that\u2019s <strong>designed to fit in any UI or graphic style<\/strong>. You can customize the styles, color, and download each logo as SVG.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Logo Ipsum\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/logipsum.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mjml.io\/\">MJML<\/a><\/h2>\n<p>MJML is a <strong>markup that aims to make it easier when composing layout for email templates<\/strong>. It takes out the complexity of email templates with its own HTML custom element.<\/p>\n<p>You can start adding the component. The doc is pretty comprehensive if you\u2019ve just gotten started. And then you can compile the markup with the <code>yarn build<\/code> to get the real output you can send to emails.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"MJML\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/mjml.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/learn\/css\/\">Learn CSS<\/a><\/h2>\n<p>An initiaive from Google Developer to provide a comprehensive resource to learn CSS. It covers the <strong>fundamentals of CSS such as Box Model, Selectors, Cascade, and Inheritance and Specificity<\/strong> that gives a solid foundation of how CSS works. Helpful for both beginners and advanced-level front-end developers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Learn CSS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/learn-css-dev.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/vitebook\/vitebook\">ViteBook<\/a><\/h2>\n<p>ViteBook aims to provide an alternative to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/storybook.js.org\/\">Storybook<\/a> \u2014 a popular open-source tool to manage UI and design systems. Built on top of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vitejs.dev\/\">Vite.js<\/a>, its key focus is performance. ViteBook is currently in early WIP. I\u2019m looking forward to how it will evolve.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vite Book\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/vitebook.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/markjaquith\/encute\">Encute<\/a><\/h2>\n<p>Encute is a <strong>PHP library to load and manage scripts and styles on WordPress<\/strong> with Object-oriented Programming (OOP) pattern. So we get a nicer syntax plus it adds some additional features. For example, you can enqueue script with \u201cdefer\u201d or \u201casync\u201d load, and load it as a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Modules\">\u201cmodule\u201d<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Encute\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/wp-encute.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/twbs\/icons\">Bootstrap Icons<\/a><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a> used to include FontAwesome icon in its bundle. It has now created its own official set of icons. The set contains <strong>more than 1.300 icons with each icon offered in two different styles, outline and filled style<\/strong>, and comes with two format font icons, and SVG. Like Bootstrap, these icons are free FOREVER.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bootstrap Icons\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/bootstrap-icons.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/open-ui.org\/\">Open-UI<\/a><\/h2>\n<p>An initiative and collaborative effort from web developers and engineers to create a <strong>standard user interface with an open specification that developer can adopt and implement<\/strong> regardless of the platform used on the website.<\/p>\n<p>It is currently a work in progress. I\u2019m looking forward to how this will affect web development in the future.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Open UI\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/open-ui.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/woltapp\/blurhash\">Blurhash<\/a><\/h2>\n<p>An algorithm to <strong>generate a \u201cblur\u201d representation of an image<\/strong>. This gives you a small beautiful image that you can use as a placeholder while the real image is loaded fully. No more ugly empty boxes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Blurhash\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/blurhash.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jakearchibald.com\/2021\/cors\/\">CORS<\/a><\/h2>\n<p>Have you encountered CORS error on your website? Are you wondering how that happens and how to fix it properly? This article provides all the answers with detailed in-depth explanations.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CORS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/cors-playground.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/uttesh\/mo\">Mo<\/a><\/h2>\n<p>Mo is a handy <strong>CLI utility that allows you to find unused Node<\/strong>.js modules from, your computer system. It will also examine memory usage and provide you an option to remove it from your computer if you want. It\u2019s a great way to <strong>free up some disk space in your computer<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mo\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/mo.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bundlers.tooling.report\/\">Bundlers Tooling Report<\/a><\/h2>\n<p><strong>\u201cBundlers Tooling Report\u201d<\/strong> provides a detailed report of features of a bundler. There are several on the list such as Webpack, Browserify, Rollup, and Parcel. If you\u2019re not sure which one is would be fit in your application, this report should help you.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bundlers Tooling Report\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/tooling-report.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mantine.dev\/\">Mantine<\/a><\/h2>\n<p>A set of more than <strong>120 components to build modern web and application with React<\/strong>. Aside of components, it also provides a list of custom React Hooks that can be handy in a lot of situations such as to access the DOM reference, performing \u201cdebounced\u201d function, state management, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mantine\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/mantine.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/keystonejs.com\/\">KeystoneJS<\/a><\/h2>\n<p>An <strong>open-source Node.js-based Headless CMS<\/strong>. It helps developers build applications or sites with custom datamodel faster. You simply need to describe the schema and it will automatically provide you the UI as well as GraphQL API to access the data on the front-end.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Keystone JS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/keystonejs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lorem.space\/\">LoremSpace<\/a><\/h2>\n<p>A <strong>tool to generate dummy images or mockups<\/strong>. Instead of generating random images, it allows you to choose the theme of the image. Such as the \u201cmovie\u201d will generate the list image movie poster image, \u201calbum\u201d to generate music album cover, and \u201cgame\u201d to generate game cover images. You can select that would fit in the theme of your website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Lorem Space\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/lorem-space.jpg\" width=\"750\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>We\u2019ve been running this series for several years now, and it feels like we never run out of great new resources for designers and developers. In this round of the series, we have tools, articles, and tutorials that both backend PHP developers and front-end developers would appreciate. We\u2019ve got a resource to get a dummy&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 2021) - Hongkiat<\/title>\n<meta name=\"description\" content=\"We&#039;ve been running this series for several years now, and it feels like we never run out of great new resources for designers and developers. In this\" \/>\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-2021\/\" \/>\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 2021)\" \/>\n<meta property=\"og:description\" content=\"We&#039;ve been running this series for several years now, and it feels like we never run out of great new resources for designers and developers. In this\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/\" \/>\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=\"2021-10-31T10:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:52:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/showcodeapp.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=\"6 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-2021\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (October 2021)\",\"datePublished\":\"2021-10-31T10:01:09+00:00\",\"dateModified\":\"2025-04-21T11:52:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/\"},\"wordCount\":1158,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2021\\\/showcodeapp.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-2021\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (October 2021) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2021\\\/showcodeapp.jpg\",\"datePublished\":\"2021-10-31T10:01:09+00:00\",\"dateModified\":\"2025-04-21T11:52:06+00:00\",\"description\":\"We've been running this series for several years now, and it feels like we never run out of great new resources for designers and developers. In this\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2021\\\/showcodeapp.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2021\\\/showcodeapp.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2021\\\/#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 2021)\"}]},{\"@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 2021) - Hongkiat","description":"We've been running this series for several years now, and it feels like we never run out of great new resources for designers and developers. In this","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-2021\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (October 2021)","og_description":"We've been running this series for several years now, and it feels like we never run out of great new resources for designers and developers. In this","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-10-31T10:01:09+00:00","article_modified_time":"2025-04-21T11:52:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/showcodeapp.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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (October 2021)","datePublished":"2021-10-31T10:01:09+00:00","dateModified":"2025-04-21T11:52:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/"},"wordCount":1158,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/showcodeapp.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-2021\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/","name":"Fresh Resources for Web Designers and Developers (October 2021) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/showcodeapp.jpg","datePublished":"2021-10-31T10:01:09+00:00","dateModified":"2025-04-21T11:52:06+00:00","description":"We've been running this series for several years now, and it feels like we never run out of great new resources for designers and developers. In this","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/showcodeapp.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2021\/showcodeapp.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2021\/#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 2021)"}]},{"@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-f3T","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57901","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=57901"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57901\/revisions"}],"predecessor-version":[{"id":74015,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57901\/revisions\/74015"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=57901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=57901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=57901"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=57901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}