{"id":62446,"date":"2022-09-27T21:01:39","date_gmt":"2022-09-27T13:01:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=62446"},"modified":"2025-04-21T17:40:07","modified_gmt":"2025-04-21T09:40:07","slug":"designers-developers-monthly-09-2022","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (September 2022)"},"content":{"rendered":"<p>In this round of our series, we\u2019ll feature a list of new libraries, frameworks, and tools that I\u2019m pretty sure front-end developers and designers will appreciate. We have a new advanced CSS tool, a handy tool and library for animation, and some new resources for icons. Let\u2019s jump in to find the full list.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-62446-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-62446-1 .ref-block__thumbnail {\n\t\t\t\t\tbackground-image: url( \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/related\/tag-fresh-resources-developers.jpg\" );\n\t\t\t\t}<\/style>\n<p>\t\t\t<\/p><\/noscript>\n\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Click Here for More Resources<\/h4>\n<div class=\"ref-description\">\n<p>Check out our complete collection of hand-picked tools for designers and developers.<\/p>\n<\/div><\/div>\n<\/div>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/11ty\/webc\">Webc<\/a><\/h2>\n<p>WebC is a <strong>JavaScript library that makes developing a Web Component more manageable<\/strong>. Not only can you define a Web Component, but it can also expand it into a basic HTML markup with web standard conventions and generate the scoped CSS of the HTML. <\/p>\n<p>It\u2019s compatible with SSR (Server-side rendering) so you can use it with some popular <strong>SSR frameworks like Next.js and Gatsby<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Webc\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/webc.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lightningcss.dev\/\">LightningCSS<\/a><\/h2>\n<p>Lightning CSS is more than just a CSS minifier. It also allows you to write next generation of standard CSS now, such as <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css-nesting-1\/\">nesting<\/a>, custom media queries, logical properties, and some new selectors<\/strong>. <\/p>\n<p>It will automatically convert these features into a compatible syntax based on your browser\u2019s target configurations. All in all, it\u2019s like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/babeljs.io\/\">Babel<\/a> but for CSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Lightning CSS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/lightning-css.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/whyframe.dev\/\">WhyFrame<\/a><\/h2>\n<p>A tool that allows you to <strong>develop in isolation<\/strong>. You can design each component that lives on its own, making optimizing and encapsulating issues easier without affecting other components. It\u2019s <strong>fast, flexible, and compatible with many front-end frameworks<\/strong> including Svelte, Vue.js, React.js, Solid.js, and React.js.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WhyFrame\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/whyframe.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jsoncrack.com\/\">JSONCrack<\/a><\/h2>\n<p>JSON makes data portable across different programming languages. Reading JSON is also easy unless when there are just too many in there. This is where JSONCrack comes in. <\/p>\n<p>JSONCrack is an <strong>online editor that allows you to render the data structure into a graph<\/strong>, which in return will make it easier to scan and grasp the data. On top of that, you can also adjust the graph layout, share it, and even <strong>embed it on your website<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"JSON Crack\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/json-crack.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/maestro.mobile.dev\/\">Maestro<\/a><\/h2>\n<p>Maestro is a <strong>software that allows you to test your mobile application<\/strong>. It means that you can perform <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Test_assertion\">test assertions<\/a> and interactions such as pressing on the <strong>back button, scroll, swipe, and even taking screenshot<\/strong>. A must-have tool installed for every mobile developer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Maestro\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/maestro.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.motionity.app\/\">Motionity<\/a><\/h2>\n<p>A free and <strong>open-source web application to compose and edit motion graphics for developers<\/strong>. It\u2019s like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.adobe.com\/id_en\/products\/aftereffects.html\">Adobe After Effects<\/a> with the ease of use of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.canva.com\/\">Canva<\/a>. It has features like keyframing, masking, filters, and many more. You can <strong>download the animation as a WebM, GIF, or just an image<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Motionity\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/motionity.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fluid-type-scale.com\/\">Fluid Type Scale<\/a><\/h2>\n<p>Traditionally, we use a static font size for the website. But as the website medium to view the website, we need the ability to use font size more dynamically so the content looks good. This is now possible with just CSS, and as the name implies, this tool will make it easier to generate the CSS codes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fluid Type Scale\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/fluid-type-scale.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootcamp.laravel.com\/\">Bootcamp<\/a><\/h2>\n<p>A new <strong>official source to learn Laravel<\/strong>. This new guide is designed to get you started faster with building a working application with modern practice in Laravel. You can <strong>choose your path between using Vue.js or React.js<\/strong>. Overall, I think this is a great source for either beginner or seasoned Laravel.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bootcamp\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/laravel-bootcamp.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.starbeamjs.com\/\">StarbeamJS<\/a><\/h2>\n<p>A JavaScript library to add \u201creactivity\u201d to your application. This Reactivity makes your <strong>applications more dynamic and feels more fluid<\/strong>. It\u2019s an agnostic library that works with any front-end framework such as React.js, Vue.js, and Svelte.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Starbeam JS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/starbeam.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/corset.dev\/\">Corset<\/a><\/h2>\n<p>Corset is a JavaScript library to <strong>add reactivity to your application without the complexity<\/strong>. It works similarly to jQuery in a way that it binds directly to HTML and provides an expressive CSS-like syntax. Since it works with just HTML, it\u2019s easy to pick, fast, and it can integrate with your existing application easily.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Corset\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/corset.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/storyset.com\/\">StorySet<\/a><\/h2>\n<p>A collection of <strong>free illustrations that you can use on your website<\/strong>. It provides illustrations on various themes. Each illustration is configurable. You can customize the background and color, hide some of the properties and download it as <strong>SVG or PNG<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"StorySet\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/storyset.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/iconmonstr.com\/\">Iconmonstr<\/a><\/h2>\n<p>Iconmonstr is a <strong>collection of more than 4000 icons<\/strong>. Another good source for web designers. Each icon is uniquely designed. It also comes in several variations and is available in SVG and PNG. Regardless of application need, I\u2019m pretty sure you\u2019ll find the right icons.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Iconmonstr\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/iconmonstr.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontshare.com\/\">FontShare<\/a><\/h2>\n<p>A handy online tool to <strong>generate beautiful font pairs<\/strong>. It\u2019s free for both personal and commercial use. We can select the font type such as sans-serif, handwritten, or script. It even makes it easier where you can <strong>generate the font pair by the font \u201cfeel\u201d or \u201cpersonality\u201d<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"FontShare\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/fontshare.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.solid-toast.com\/\">Solid Toast<\/a><\/h2>\n<p>A React.js library that allows you to <strong>add beautiful toast notifications<\/strong>. It\u2019s lightweight, just 4kb. You can customize the content, icons, colors, and attributes. It\u2019s compatible with SSR and provides Promise API.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Solid Toast\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/solid-toast.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2>Mocked API<\/h2>\n<p>A free online tool that <strong>provides APIs to retrieve mocked data for testing your application<\/strong>. You can find several types of data such as Animals, Countries, Currencies, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mocked API\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/mocked-api.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react-awesome-reveal.morello.dev\/\">React Awesome Reveal<\/a><\/h2>\n<p>A library for React.js that provides a <strong>set of animated effects, such as Bounce, Fade, Flip, Roll, Rotate, and Slide animation<\/strong>. You use it to add revealing animations to your components when they enter the browser viewport as users scroll the page.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Awesome Reveal\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/react-awesome-reveal.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/openmoji.org\/\">OpenMoji<\/a><\/h2>\n<p>An open-source and free library of Emojis. It contains <strong>more than 4000 Emojis<\/strong>. It supports standard Emoji standards as well as custom ones. It also fully supports the Fitzpatrick skin tones scale and multiple skin tone combinations. <\/p>\n<p>A perfect library if you\u2019d like to <strong>provide Emoji selection on your website<\/strong> or your application..<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"OpenMoji\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/openmoji.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blog.webdevsimplified.com\/\">Web Dev Simplified<\/a><\/h2>\n<p>A <strong>blog that highlights some updates around web development<\/strong>. It covers various topics, including CSS, JavaScript, HTML, React.js, Node.js, and more. This is a good source to keep up with web development without feeling overwhelmed.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Web Dev Simplified\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/web-dev-simplified.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.designsystemsforfigma.com\/\">Design System for Figma<\/a><\/h2>\n<p>A collection of Design System made in Figma from a number of popular names and frameworks on the Internet. You can find the design system of Uber, Atlassian, and even from Goldman Sachs. This is such as a hidden gem that every designers should add in the bookmark.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Design System for Figma\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/designsystemsforfigma.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/gvergnaud\/ts-pattern\">TS Pattern<\/a><\/h2>\n<p><strong>Pattern Matching<\/strong> is a programming technique that allows you to <strong>compose complex conditions or data structures in a shorter and more readable expression<\/strong>. This technique is implemented in Haskell, Rust, Swift, Elixir and other languages. With this library, you can apply the same technique in TypeScript.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"TS Pattern\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/ts-pattern.jpg\" width=\"750\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>In this round of our series, we\u2019ll feature a list of new libraries, frameworks, and tools that I\u2019m pretty sure front-end developers and designers will appreciate. We have a new advanced CSS tool, a handy tool and library for animation, and some new resources for icons. Let\u2019s jump in to find the full list. Webc&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 (September 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this round of our series, we&#039;ll feature a list of new libraries, frameworks, and tools that I&#039;m pretty sure front-end developers and designers will\" \/>\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-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 (September 2022)\" \/>\n<meta property=\"og:description\" content=\"In this round of our series, we&#039;ll feature a list of new libraries, frameworks, and tools that I&#039;m pretty sure front-end developers and designers will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-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-09-27T13:01:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T09:40:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/webc.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-2022\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (September 2022)\",\"datePublished\":\"2022-09-27T13:01:39+00:00\",\"dateModified\":\"2025-04-21T09:40:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/\"},\"wordCount\":1099,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2022\\\/webc.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-2022\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (September 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2022\\\/webc.jpg\",\"datePublished\":\"2022-09-27T13:01:39+00:00\",\"dateModified\":\"2025-04-21T09:40:07+00:00\",\"description\":\"In this round of our series, we'll feature a list of new libraries, frameworks, and tools that I'm pretty sure front-end developers and designers will\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-2022\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2022\\\/webc.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-09-2022\\\/webc.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-09-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 (September 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 (September 2022) - Hongkiat","description":"In this round of our series, we'll feature a list of new libraries, frameworks, and tools that I'm pretty sure front-end developers and designers will","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-2022\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (September 2022)","og_description":"In this round of our series, we'll feature a list of new libraries, frameworks, and tools that I'm pretty sure front-end developers and designers will","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-09-27T13:01:39+00:00","article_modified_time":"2025-04-21T09:40:07+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/webc.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-2022\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (September 2022)","datePublished":"2022-09-27T13:01:39+00:00","dateModified":"2025-04-21T09:40:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/"},"wordCount":1099,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/webc.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-2022\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/","name":"Fresh Resources for Web Designers and Developers (September 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/webc.jpg","datePublished":"2022-09-27T13:01:39+00:00","dateModified":"2025-04-21T09:40:07+00:00","description":"In this round of our series, we'll feature a list of new libraries, frameworks, and tools that I'm pretty sure front-end developers and designers will","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-2022\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/webc.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-09-2022\/webc.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-09-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 (September 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-gfc","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/62446","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=62446"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/62446\/revisions"}],"predecessor-version":[{"id":73815,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/62446\/revisions\/73815"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=62446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=62446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=62446"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=62446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}