{"id":69449,"date":"2023-09-22T21:01:08","date_gmt":"2023-09-22T13:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=69449"},"modified":"2023-09-27T17:59:26","modified_gmt":"2023-09-27T09:59:26","slug":"designers-developers-monthly-09-2023","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (September 2023)"},"content":{"rendered":"<p>Welcome back to the September edition of our <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/fresh-resources-developers\/\">monthly roundup<\/a>, where we showcase valuable resources for web developers. In this installment, we mainly focus on <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/vercel\/next.js\">Next.js<\/a> and its surrounding ecosystem. We have handpicked a variety of tools, libraries, and updates that will elevate your Next.js projects and keep you ahead in the realm of front-end development.<\/p>\n<p>So, let\u2019s dive right into the list without further delay.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2023\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (August 2023)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (August 2023)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-08-2023.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-68812 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-08-2023.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Fresh Resources for Web Designers and Developers (August 2023)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tFind top-notch PHP libraries and JavaScript tools to simplify your coding life.\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/v0.dev\/\">v0<\/a><\/h2>\n<p>v0 is an AI-generated UI system developed by <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/vercel.com\/\">Vercel<\/a>. After you input a prompt, you\u2019ll receive three AI-crafted UI choices made with <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/ui.shadcn.com\/\">Shadcn UI<\/a> and <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tailwind-css\/\">Tailwind CSS<\/a>. You can pick one, copy its code, or customize it by adjusting individual UI components. v0 aims to simplify your development workflow, enabling you to create and integrate beautiful UIs effortlessly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/v0.jpg\" alt=\"v0 AI-generated UI system\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/dprint.dev\/\">Dprint<\/a><\/h2>\n<p>Dprint is a robust command-line tool for automated <a href=\"https:\/\/www.hongkiat.com\/blog\/beautify-codes-online\/\">code formatting<\/a>. Developed in <a href=\"https:\/\/www.rust-lang.org\/\">Rust<\/a>, it provides a flexible platform for various code-formatting tasks. One of its unique features is its plugin architecture, which utilizes <a href=\"https:\/\/webassembly.org\/\">WebAssembly<\/a>. You can import these plugins from URLs or your local filesystem. The plugins, including the official ones, are highly customizable, allowing you to adjust code formatting to your particular needs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/dprint.jpg\" alt=\"Dprint command-line tool\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/design-system.service.gov.uk\/components\/\">UK Gov Design System<\/a><\/h2>\n<p>The UK government arguably has one of the best official websites. Their development team offers a vast array of reusable UI elements designed to support a multitude of applications. While you may not directly use this design system on your site, there\u2019s a wealth of knowledge to glean from it \u2013 especially concerning <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-tools-for-designers\/\">accessibility<\/a> and UI consistency.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/gov-uk-ds.jpg\" alt=\"UK Gov Design System\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener nofollow\" target=\"_blank\" href=\"https:\/\/tx.shadcn.com\/\">Taxonomy<\/a><\/h2>\n<p>Taxonomy is a sample <a href=\"https:\/\/nextjs.org\/blog\/next-13\">Next.js 13<\/a> project that comes with several modern features like authentication, subscriptions, API routes, and static pages. Additionally, it incorporates a blog and thorough documentation created with <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/contentlayer.dev\">Contentlayer<\/a> and MDX. It serves as an excellent inspiration for setting up a full-stack Next.js application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/taxonomy.jpg\" alt=\"Taxonomy Next.js 13 project\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/medusajs\/medusa\">Medusa<\/a><\/h2>\n<p>Medusa offers a suite of open-source modules and tools geared towards streamlining the development of e-commerce applications, including online stores and marketplaces. These modules cover essential functionalities like Inventory, Cart, Checkout, Orders, and Products. The best part? You can easily customize them to suit your specific needs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/medusa.jpg\" alt=\"Medusa e-commerce toolkit\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/steven-tey\/dub\">Dub<\/a><\/h2>\n<p>Dub is an open-source link management solution built on technologies like Vercel Edge Functions, Upstash Redis, and PlanetScale MySQL. It offers a simplified approach to creating, sharing, and tracking short links. With features like built-in analytics, custom domain support, <a href=\"https:\/\/www.hongkiat.com\/blog\/google-sheets-create-qrcode\/\">QR code generation<\/a>, and OG image proxy, Dub streamlines the management of short links.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/dub.jpg\" alt=\"Dub link management tool\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/garmeeh\/next-seo\">Next SEO<\/a><\/h2>\n<p><strong>Next SEO<\/strong> makes SEO metadata management in Next.js applications a breeze. It allows you to easily add title tags, meta descriptions, and more. This enhances your website\u2019s SEO and simplifies metadata customization on each page.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/next-seo.jpg\" alt=\"Next SEO tool for metadata management\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/next-intl-docs.vercel.app\/\">Next Intl<\/a><\/h2>\n<p><strong>Next Intl<\/strong> simplifies the task of adding internationalization to Next.js apps. It offers a robust yet straightforward API for handling multiple languages, and includes features like ICU message syntax for rich text, and date, time, and number formatting. It\u2019s both type-safe and efficient, thanks to its hooks-only API.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/next-intl.jpg\" alt=\"Next Intl for internationalization\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/nuejs.org\/\">Nue.js<\/a><\/h2>\n<p>Nue.js is a lightweight JavaScript library aiming to simplify web development. It offers an alternative to popular frameworks like React and Vue. By eliminating complexities like hooks and props, Nue.js makes web development more accessible to those with a basic understanding of HTML, CSS, and JavaScript. Though still under development, it shows promise for the future.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/nuejs.jpg\" alt=\"Nue.js JavaScript library\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/juliencrn\/usehooks-ts\">useHooks<\/a><\/h2>\n<p><strong>useHooks-ts<\/strong> is a library of custom React hooks crafted in TypeScript. It provides utilities for common React development tasks. You\u2019ll find hooks like <code>useEffectOnce<\/code> for running code only once, <code>useScript<\/code> for script loading, and many more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/usehooks-ts.jpg\" alt=\"useHooks custom React hooks\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/iamvishnusankar\/next-sitemap\">Next Sitemap<\/a><\/h2>\n<p><code>Next Sitemap<\/code> is a specialized tool for generating SEO-friendly sitemaps for Next.js projects. It integrates smoothly with Next.js and supports all types of page rendering, including static, pre-rendered, dynamic, and server-side pages. The tool offers various customization options for tailoring sitemap structure and content.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/next-sitemap.jpg\" alt=\"Next Sitemap tool\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/pankod\/superplate\">Superplate<\/a><\/h2>\n<p>Superplate is a ready-to-use frontend boilerplate for React and Next.js, complete with TypeScript support. It includes an array of popular libraries like React Testing Library, styled-components, React Query, Axios, and Prettier. The CLI interface simplifies project setup and removes the need for additional configurations. Truly superb!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/superplate.jpg\" alt=\"Superplate frontend boilerplate\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/notion-avatar.vercel.app\/\">Notion Avatar<\/a><\/h2>\n<p>If you\u2019re interested in crafting a unique online persona, Notion Avatar is an online tool that lets you create avatars similar to those found in <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.notion.so\/\">Notion<\/a>. It offers a multitude of customization options, such as different face shapes, noses, mouths, eyes, eyebrows, glasses, hairstyles, beards, facial details, and accessories.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/notion-avatar.jpg\" alt=\"Notion Avatar creation tool\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/floatui.com\/\">FloatUI<\/a><\/h2>\n<p>FloatUI is a free, open-source collection of modern UI components and templates for React, and soon for Vue, built with Tailwind CSS. It provides well-designed components and ready-to-use templates, speeding up development for projects of any scale.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/floatui.jpg\" alt=\"FloatUI components and templates\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.reacti.me\">Reactime<\/a><\/h2>\n<p><strong>Reactime<\/strong> is a Chrome Extension designed to enhance debugging for modern React apps. It features time-travel debugging, state component display, performance visualization, and even allows you to download the state history as a JSON file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/reactime.jpg\" alt=\"Reactime Chrome Extension for debugging\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/openstatushq\/openstatus\">OpenStatus<\/a><\/h2>\n<p>OpenStatus is a self-hosted, open-source status page system built using Next.js, TailwindCSS, and <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/ui.shadcn.com\/\">shadcn\/ui<\/a>. It provides real-time service health updates, customization features, and can be integrated with other monitoring tools. This makes it an excellent choice for organizations looking to transparently communicate their service status.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/open-status.jpg\" alt=\"OpenStatus status page system\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/avitorio\/outstatic\">Outstatic<\/a><\/h2>\n<p>Outstatic is a static site Content Management System (CMS) tailored for Next.js. It comes with a user-friendly interface and doesn\u2019t require external databases. The setup is quick and simple, and it supports custom fields. You have the freedom to host it on any server of your choice.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/outstatic.jpg\" alt=\"Outstatic static site CMS for Next.js\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/Peppermint-Lab\/peppermint\">Peppermint<\/a><\/h2>\n<p><strong>Peppermint<\/strong> is a self-hosted alternative to <a href=\"https:\/\/www.hongkiat.com\/blog\/go\/zendesk-helpdesk\" rel=\"nofollow noopener\" target=\"_blank\" class=\"js-aw-brand-link\" data-feed=\"ZvisSGyMi3bXTxWP499DKvYqQKyC9zFK\">Zendesk<\/a>, featuring Markdown-based ticket creation, client history tracking, and a responsive design. It includes a notebook function that also uses Markdown. You can easily deploy it on your own server using Docker and <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/pm2.keymetrics.io\/\">pm2<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/peppermint.jpg\" alt=\"Peppermint self-hosted support ticket system\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/drift.lol\/home\">Drift<\/a><\/h2>\n<p><strong>Drift<\/strong> is a clone of GitHub Gist that allows you to self-host your code and text snippets. It supports GitHub Extended Markdown, user authentication, and both private and public posts. Additional features include syntax highlighting and file upload capabilities.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/drift.jpg\" alt=\"Drift self-hosted code and text snippet manager\" width=\"720\" height=\"480\"><\/figure>\n<h2><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/eslint-stylistic\/eslint-stylistic\">ESLint Stylistic<\/a><\/h2>\n<p><strong>eslint-stylistic<\/strong> provides style-specific rules for ESLint and TypeScript-ESLint. This project was initiated to keep formatting and style rules separate from ESLint, especially after the <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/eslint\/eslint\/issues\/17522\">core ESLint team decided to deprecate such features<\/a>. It will be interesting to see how this project evolves.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/eslint-stylistic.jpg\" alt=\"ESLint Stylistic for style-specific rules\" width=\"720\" height=\"480\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Stay ahead with our newest web development resources this month.<\/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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (September 2023) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Stay ahead with our newest web development resources this month.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fresh Resources for Web Designers and Developers (September 2023)\" \/>\n<meta property=\"og:description\" content=\"Stay ahead with our newest web development resources this month.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/\" \/>\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=\"2023-09-22T13:01:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-27T09:59:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/v0.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=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (September 2023)\",\"datePublished\":\"2023-09-22T13:01:08+00:00\",\"dateModified\":\"2023-09-27T09:59:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/\"},\"wordCount\":1051,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2023\\\/v0.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (September 2023) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2023\\\/v0.jpg\",\"datePublished\":\"2023-09-22T13:01:08+00:00\",\"dateModified\":\"2023-09-27T09:59:26+00:00\",\"description\":\"Stay ahead with our newest web development resources this month.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2023\\\/v0.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2023\\\/v0.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2023\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fresh Resources for Web Designers and Developers (September 2023)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fresh Resources for Web Designers and Developers (September 2023) - Hongkiat","description":"Stay ahead with our newest web development resources this month.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (September 2023)","og_description":"Stay ahead with our newest web development resources this month.","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-09-22T13:01:08+00:00","article_modified_time":"2023-09-27T09:59:26+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/v0.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":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (September 2023)","datePublished":"2023-09-22T13:01:08+00:00","dateModified":"2023-09-27T09:59:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/"},"wordCount":1051,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/v0.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/","name":"Fresh Resources for Web Designers and Developers (September 2023) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/v0.jpg","datePublished":"2023-09-22T13:01:08+00:00","dateModified":"2023-09-27T09:59:26+00:00","description":"Stay ahead with our newest web development resources this month.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/v0.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2023\/v0.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2023\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fresh Resources for Web Designers and Developers (September 2023)"}]},{"@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-i49","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/69449","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=69449"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/69449\/revisions"}],"predecessor-version":[{"id":69639,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/69449\/revisions\/69639"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=69449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=69449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=69449"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=69449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}