{"id":63198,"date":"2022-10-27T21:01:25","date_gmt":"2022-10-27T13:01:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=63198"},"modified":"2022-10-26T16:14:48","modified_gmt":"2022-10-26T08:14:48","slug":"designers-developers-monthly-10-2022","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (October 2022)"},"content":{"rendered":"<p>There are an abundance of <a href=\"https:\/\/www.hongkiat.com\/blog\/design-dev-collaboration-tools-to-streamline-workflow\/\">front-end development tools<\/a>, libraries, and resources out there that we can always discover something new. In this post, as usual, we\u2019ve put together some new ones that we have found recently.<\/p>\n<p>We will highlight some JavaScript libraries for web or <a href=\"https:\/\/www.hongkiat.com\/blog\/mobile-app-developers-usa\/\">mobile app development<\/a>, a TypeScript learning resource, and other helpful <a href=\"https:\/\/www.hongkiat.com\/blog\/discover-the-best-productivity-apps-for-design-team\/\">productivity tools<\/a>.<\/p>\n<p>So let\u2019s jump in to see the full list.<\/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-09-2022\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (September 2022)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (September 2022)<\/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-09-2022.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-62446 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-09-2022.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 (September 2022)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn this round of our series, we'll feature a list of new libraries, frameworks, and tools that I'm...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a target=\"_blank\" href=\"https:\/\/unpoly.com\/\" rel=\"noopener\">Unpoly<\/a><\/h2>\n<p>Unpoly is a <a href=\"https:\/\/www.hongkiat.com\/blog\/javascript-framework-for-2021\/\">JavaScript framework<\/a> designed to be used with server-side web applications. It has some features out-of-the-box that are commonly needed, such as <strong>Forms, Events, Network requests<\/strong>, and many others that are needed to build an interactive web application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/unpoly.jpg\" alt=\"Unpoly\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/dunglas\/frankenphp\" rel=\"noopener\">FrankenPHP<\/a><\/h2>\n<p>FrankenPHP is a <strong>modern PHP Server built on top of <a href=\"https:\/\/caddyserver.com\/\" target=\"_blank\" rel=\"noopener\">Caddy<\/a><\/strong>. It\u2019s a full-fledged web server that allows you to run PHP applications without the limitations or complexities of configuring Apache or Nginx.<\/p>\n<p>Plus, it comes with all features included to run a web server such as <strong>HTTPS, HTTP\/2, HTTP\/3, logging, zstd, and gzip compression<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/franken-php.jpg\" alt=\"frankenphp\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/randoma11y.com\/\" rel=\"noopener\">Randoma11y<\/a><\/h2>\n<p>Randoma11y is a <strong>color combination generator that complies with accessibility standards<\/strong>. The colors are generated by a \u201crobot\u201d, and you can also <strong>vote for your favorite color combo<\/strong> that will help to improve the quality of these color combinations, making them more accurate and reliable.<\/p>\n<p>If you\u2019re not sure what colors to use on your website, this is the tool you could try.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-tools-for-designers\/\" class=\"ref-block__link\" title=\"Read More: 10 Best Accessibility Tools For Designers\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 Best Accessibility Tools For Designers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/accessibility-tools-for-designers.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-55683 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/accessibility-tools-for-designers.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 Best Accessibility Tools For Designers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tToday is the world of inclusive technology - websites, apps, and tech gadgets that are made for people...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/randoma11y.jpg\" alt=\"randoma11y\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/marcj\/TypeRunner\" rel=\"noopener\">TypeRunner<\/a><\/h2>\n<p>TypeRunner is an <strong>open-source high-performance TypeScript compiler<\/strong>. It can be used as both a <abbr title=\"Command-line Interface\">CLI<\/abbr> and a library, or simply for type-checking JavaScript code.<\/p>\n<p>The compiler supports <strong>interactive type debugging<\/strong>, which means that the user can see the inferred types in real time and fix errors on the fly, making it quite a sophisticated development tool.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/typerunner.jpg\" alt=\"typerunner\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/stackbricks.app\/\" rel=\"noopener\">StackBricks<\/a><\/h2>\n<p>Stackbricks is a <strong>free database-management app<\/strong> that works on your desktop and allows you to manage many different databases. It supports various database types such as <strong>MySQL, PostgreSQL, and MariaDB<\/strong>. It is available for Windows, macOS, and Linux.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/stackbricks.jpg\" alt=\"stackbricks\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.tremor.so\/\" rel=\"noopener\">Tremor<\/a><\/h2>\n<p>Tremor is is a simple and <strong>modular React component library to build a dashboard<\/strong>. With just a few lines of code, you can create a beautiful dashboard.<\/p>\n<p>Furthermore, it comes with some <strong>pre-built components<\/strong> to display data such as charts, tables, and lists. Each component is flexible and customizable so you can fit them into your own use cases and requirements.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-3\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/react-js-web-developers-toolkit\/\" class=\"ref-block__link\" title=\"Read More: 15 React.js Tools & Resources for Developers\" rel=\"bookmark\"><span class=\"screen-reader-text\">15 React.js Tools & Resources for Developers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/react-js-web-developers-toolkit.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-29135 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/react-js-web-developers-toolkit.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">15 React.js Tools & Resources for Developers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThe popularity of React.js has been rapidly growing since Facebook first released the library back in 2013. It's...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/tremor.jpg\" alt=\"tremor\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.canidev.tools\/\" rel=\"noopener\">CanIDevTools<\/a><\/h2>\n<p>CanIDevTools is similar to <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noopener\">CanIUse<\/a>, but instead of listing CSS supports in browser, it lists features for the <strong>DevTools on the browse<\/strong>r such as Accessibility, the Console, Network, and many other features. It\u2019s pretty useful if you decide which main browser you want to use for development.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/canidevtools.jpg\" alt=\"canidevtools\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.figma.com\/community\/plugin\/1159123024924461424\/html.to.design\" rel=\"noopener nofollow\">html.to.design<\/a><\/h2>\n<p>Figma enables you to create designs, whether it\u2019s for a website, mobile, or any other medium. Now with the Figma plugin, html.to.design, you can convert an existing website and <strong>import its HTML into Figma to start your own designs<\/strong>. It\u2019s really a time saver.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/html-to-design.jpg\" alt=\"html-to-design\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/tamagui.dev\/\" rel=\"noopener\">TamaGUI<\/a><\/h2>\n<p>TamaGUI is a complete suite of UI components. Each component is equipped with <strong>composoable APIs, size variance, and configurable themes<\/strong>. These make it highly customizable and allow you to build unique websites and a perfect library to build a design system.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/tamagui.jpg\" alt=\"tamagui\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.totaltypescript.com\/tutorials\/beginners-typescript\" rel=\"noopener\">Beginners TypeScript<\/a><\/h2>\n<p>This above is a TypeScript interactive course for beginners. In this course, you will be able to gain foundational knowledge and skills such as how to declare type in variables, functions, some common problems, and some challenges to find the solution. This is a perfect course if you\u2019re <strong>just get started with TypeScript<\/strong>. This <a href=\"https:\/\/www.hongkiat.com\/blog\/free-online-courses\/\">online course<\/a> is also free!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/beginners-typescript.jpg\" alt=\"beginners-typescript\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/Shopify\/flash-list\" rel=\"noopener\">FlashList<\/a><\/h2>\n<p>Creating a list is easy but maintaining a long list can be tricky and cause performance issues in your application. This is where <strong>FlashList<\/strong> comes in. It\u2019s a <strong>React Native component designed to handle displaying a long list of items in your application<\/strong>. This will allow your application to remain performant while the user scrolls the list.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/flashlist.jpg\" alt=\"flashlist\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/shortcat.app\/\" rel=\"noopener\">Shortcat<\/a><\/h2>\n<p>A desktop app for macOS that allows you to <strong>navigate the operating system just using the keyboard<\/strong>. It works similar to a Command Palette in Visual Studio Code and opens up a new dialog window, where you can type in and hit <span class=\"key\">Enter<\/span>. It enables you to operate your Mac faster and thus, <a href=\"https:\/\/www.hongkiat.com\/blog\/how-to-boost-productivity\/\">boosts your productivity<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/shortcat.jpg\" alt=\"shortcat\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.joshwcomeau.com\/operator-lookup\/\" rel=\"noopener\">Operator Lookup<\/a><\/h2>\n<p>As a JavaScript developer, have you ever wondered what these symbols mean <code>|=<\/code>, <code>&&=<\/code>, and <code>&gt;&gt;=<\/code>? If you are uncertain, then you can find the answer in this operator lookup tool. This site explains what these operators are along with some examples of usage.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/operator-lookup.jpg\" alt=\"operator-lookup\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/depcheck\" rel=\"noopener nofollow\">Depcheck<\/a><\/h2>\n<p><code>Depcheck<\/code> is an <strong>NPM package that checks Node dependencies in your project and finds which are unused<\/strong>. It\u2019s a pretty handy package to audit your projects.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/depcheck.jpg\" alt=\"depcheck\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/Eugeny\/tabby\" rel=\"noopener\">Tabby<\/a><\/h2>\n<p>Tabby is <strong> a terminal emulator, SSH and serial client<\/strong>. It offers more features and capabilities than the built-in Terminal client in Windows, macOS, and Linux.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/tabby.jpg\" alt=\"tabby\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/nativebase.io\/\" rel=\"noopener\">Nativebase<\/a><\/h2>\n<p>With NativeBase, you can build consistent UI across Android, iOS, and Web platforms. It is extensively theme-able. There are no limits on customizing your app theme and component styles. It is also a <strong>great library to build cross-platform applications<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/nativebase.jpg\" alt=\"nativebase\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/shoelace.style\/\" rel=\"noopener\">Shoelace Style<\/a><\/h2>\n<p>Shoelace is a collection of <strong>professionally designed UI components<\/strong>. It works with all frameworks and is built with a web standard, it also works with just plain HTML, CSS, and JavaScript as well as CDNs, can be customised with simple CSS, and is also accessible.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/shoelace.jpg\" alt=\"shoelace\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.nocobase.com\/\" rel=\"noopener\">NocoBase<\/a><\/h2>\n<p>NocoBase is a no-code development platform. You can build various tools like your own collaboration platform or management system in minutes without or with very little programming. If you need to <strong>create an internal tool quickly<\/strong>, this may be the tool for you.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/nocobase.jpg\" alt=\"nocobase\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/qwik.builder.io\/\" rel=\"noopener\">Qwik Builder<\/a><\/h2>\n<p>Qwik is a <strong>new web framework that can be used to develop any sort of website<\/strong>. Qwik delivers pure HTML content and loads JavaScript as-needed. This enables it to be performant, allowing for instant page loads even on mobile devices and producing <strong>fast-loading web applications of any size or complexity<\/strong>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-4\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/website-and-page-building-tools\/\" class=\"ref-block__link\" title=\"Read More: 9 Websites and Page Builders to Try\" rel=\"bookmark\"><span class=\"screen-reader-text\">9 Websites and Page Builders to Try<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/website-and-page-building-tools.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-43071 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/website-and-page-building-tools.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">9 Websites and Page Builders to Try<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tYour go-to guide for selecting the perfect website building tools.\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/qwik.jpg\" alt=\"qwik\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/wbkd\/react-flow\" rel=\"noopener\">React Flow<\/a><\/h2>\n<p>A React component that allows you to <strong>create interactive graphs and the editor<\/strong>. The editor provides a friendly UX out-of-the-box, which makes it easy to use, such as seamless zooming and panning, single and multi-selection of graph elements. It also supports keyboard shortcuts.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/react-flow.jpg\" alt=\"react-flow\" width=\"750\" height=\"396\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>There are an abundance of front-end development tools, libraries, and resources out there that we can always discover something new. In this post, as usual, we\u2019ve put together some new ones that we have found recently. We will highlight some JavaScript libraries for web or mobile app development, a TypeScript learning resource, and other helpful&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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (October 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"There are an abundance of front-end development tools, libraries, and resources out there that we can always discover something new. In this post, as\" \/>\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-2022\/\" \/>\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 2022)\" \/>\n<meta property=\"og:description\" content=\"There are an abundance of front-end development tools, libraries, and resources out there that we can always discover something new. In this post, as\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/\" \/>\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=\"2022-10-27T13:01:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/unpoly.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<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-2022\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (October 2022)\",\"datePublished\":\"2022-10-27T13:01:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/\"},\"wordCount\":1064,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2022\\\/unpoly.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-2022\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (October 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2022\\\/unpoly.jpg\",\"datePublished\":\"2022-10-27T13:01:25+00:00\",\"description\":\"There are an abundance of front-end development tools, libraries, and resources out there that we can always discover something new. In this post, as\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2022\\\/unpoly.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2022\\\/unpoly.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2022\\\/#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 2022)\"}]},{\"@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 2022) - Hongkiat","description":"There are an abundance of front-end development tools, libraries, and resources out there that we can always discover something new. In this post, as","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-2022\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (October 2022)","og_description":"There are an abundance of front-end development tools, libraries, and resources out there that we can always discover something new. In this post, as","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-10-27T13:01:25+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/unpoly.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (October 2022)","datePublished":"2022-10-27T13:01:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/"},"wordCount":1064,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/unpoly.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-2022\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/","name":"Fresh Resources for Web Designers and Developers (October 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/unpoly.jpg","datePublished":"2022-10-27T13:01:25+00:00","description":"There are an abundance of front-end development tools, libraries, and resources out there that we can always discover something new. In this post, as","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/unpoly.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2022\/unpoly.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2022\/#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 2022)"}]},{"@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-grk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/63198","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=63198"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/63198\/revisions"}],"predecessor-version":[{"id":63199,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/63198\/revisions\/63199"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=63198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=63198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=63198"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=63198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}