{"id":61985,"date":"2022-08-25T21:01:27","date_gmt":"2022-08-25T13:01:27","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=61985"},"modified":"2025-04-21T18:19:28","modified_gmt":"2025-04-21T10:19:28","slug":"designers-developers-monthly-08-2022","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (August 2022)"},"content":{"rendered":"<p>Front-end development is rapidly changing, with new things to explore every month. There\u2019s always a new methodology, approach, or framework introduced in the web development world that you need to keep up with.<\/p>\n<p>In this edition of the series, we\u2019ll feature some <a href=\"https:\/\/www.hongkiat.com\/blog\/javascript-framework-for-2021\/\">frameworks<\/a> and resources for web designers, <a href=\"https:\/\/www.hongkiat.com\/blog\/useful-web-usability-testing-tools\/\">testing tools<\/a>, and much more. If you\u2019re a front-end developer or designer, I\u2019m sure you\u2019ll love what we have on the list. Let\u2019s take a look.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-61985-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-61985-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:\/\/testingaccessibility.com\/introducing-keyboard-testing-library-by-grunet\">Testing Accessibility Library<\/a><\/h2>\n<p>Testing Accessibility Library will allow you to <strong>perform automatic accessibility tests for the keyboard<\/strong>. Aside from improving the <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-tools-for-designers\/\">Accessibility<\/a>, it can help to evaluate the usability of your website with a keyboard and reduce the time that you\u2019d typically use in manual testing.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Testing Accessibility Library\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/keyboard-testing-library.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/3dicons.co\/\">3D Icons<\/a><\/h2>\n<p>Trends come and go, but it seems that the use of 3D elements in web design is here to stay. The 3D icons library is a <strong>collection of 3D icons that you can use for commercial and personal projects<\/strong>. It\u2019s available in many file formats including <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.blender.org\/\">Blender<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.figma.com\/\">Figma<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sketch.com\/\">Sketch<\/a>, and Photoshop.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"3D Icons\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/3d-icons.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/iconer.app\/\">Iconer<\/a><\/h2>\n<p>Iconer.app is a <strong>collection of icons from popular sources such as Bootstrap, Remix, Material, Radix<\/strong>, and many more. On top of that, it allows you to customize the icons. You can change the color, size, stroke width, etc., and you can even select the format to download.<\/p>\n<p>It currently supports several formatting including JPG, PNG, JSX, and SVG.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Iconer\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/iconer.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.figma.com\/community\/file\/887892609124245416\/lo-fi-wireframe-kit-free-demo\">Lofi Wireframe Kit<\/a><\/h2>\n<p>This design kit consists of <strong>100 components for wireframing in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.figma.com\/\">Figma<\/a><\/strong>. It includes common components to build both mobile and desktop applications, like buttons, input fields, and images.<\/p>\n<p>I think it\u2019s a gem if you\u2019re a web or app designer, as it will help you manifest your next great idea.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Lofi Wireframe Kit\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/lofiwireframekit.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vue-termui.esm.dev\/\">Vue TermUI<\/a><\/h2>\n<p>Building a Terminal application can be intimidating but with Vue TermUI, it does not have to be. It is a <strong>library that allows you to develop a beautiful CLI with Vue<\/strong> and comes with web tools that you might have familiar functionality for developing the web like HMR, Bundling, and DevTools.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vue Term UI\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/vue-term-ui.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/patterns\/\">WebDev Patterns<\/a><\/h2>\n<p>A collection of patterns, code snippets, and cookbooks to optimize your website. It\u2019s divided into different categories: Animation, Component, Layout, Theming, and Web Vitals. All this together will help you to build a website that\u2019s fast and engaging using modern best practices.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Layout Patterns\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/layout-patterns.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/rakkasjs\/rakkasjs\">RakkasJS<\/a><\/h2>\n<p>A <strong>full-stack framework that allows you to build a website with modern technology<\/strong>: React.js and Vite. With Vite, it offers a much better and faster development environment. It also supports <strong>SSR rendering with new React.js Suspense<\/strong>, and file-based routing.<\/p>\n<p>I think this library could be a good contender for some of the alternatives like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nextjs.org\/\">Next.js<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.gatsbyjs.com\/\">Gatsby<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"RakkasJS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/rakkasjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cmdk.paco.me\/\">CMDK<\/a><\/h2>\n<p>This library brings a <strong>composable React.js component to create <kbd>CMD<\/kbd> + <kbd>K<\/kbd> shortcut interface<\/strong> that you can ss to your website. Mac users should already be familiar with the shortcut, which in some applications, will launch an <strong>interactive search, dialog<\/strong>, or command pallete. <\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CMDK\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/cmdk.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laracasts.com\/series\/learn-vue-3-step-by-step\">Learn Vue 3: Step by Step<\/a><\/h2>\n<p>After years of work, Vue 3 is finally stable. In this course, Jeffrey Way has done a fantastic job covering improvements and new features in Vue 3 from top to bottom. And he\u2019s been generous to provide this course for Free!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vue 3 Course\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/vue-3-course.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bram.us\/2019\/10\/24\/pure-css-scroll-shadows-vertical-horizontal\/\">Pure CSS Scroll Shadow<\/a><\/h2>\n<p>CSS has become more powerful over the years. Not only that it\u2019s now much easier to center the div or create a complex grid layout, you can also create an <strong>interactive effect such as creating shadow hints<\/strong> for both horizontal and vertical scroll. Check the article to learn how.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Pure CSS Scroll Shadows\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/pure-css-scroll-shadows.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/indonesianswho.design\/\">Indonesians Who Design<\/a><\/h2>\n<p>This is a website where you can find a <strong>list of Indonesians who work as designers<\/strong> in many different fields whether it\u2019s UI\/UX, Web, App, Typography, etc. If you\u2019re a developer trying to find a designer, a design partner, or a company trying to scout great talent in design, you should definitely check the list.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Indonesians Who Design\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/indonesians-who-designs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/million.dev\/\">MillionJS<\/a><\/h2>\n<p>A JavaScript library that offers <strong>faster Virtual DOM implementation<\/strong>. It\u2019s faster compared to React.js by about 11X and only less than 1KB. It\u2019s designed as a drop-in replacement for React.js so you can have the best of both sides. A familiar development is ergonomic with faster performance.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"MillionJS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/millionjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/myoctocat.com\/build-your-octocat\/\">myOctocat<\/a><\/h2>\n<p>Octocat is a mascot of Github. Designers have been creating various themes and faces of Octocat in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/octodex.github.com\/\">Octodex<\/a>. Now, you can create your own easily with <strong>myOctocat which you can use as your profile or avatar<\/strong>. You can customize almost everything including the hair, skin, eyes, and all the accessories.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"MyOctocat\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/myoctocat.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/breakdance.com\/\">Breakdance<\/a><\/h2>\n<p>Breakdance is a new <strong>page builder for WordPress<\/strong>. It brings more than 100+ design components, full site editing, and supports some popular plugins like WooCommerce, ACF, and Toolset out of the box. If you still find it hard to navigate <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/gutenberg\/\">Gutenberg<\/a>, maybe you can try to give this alternative a shot.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Breakdance\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/breakdance.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/architecturenotes.co\/redis\/\">Redis Architechture Notes<\/a><\/h2>\n<p>This article <strong>explains how Redis works and how it compares with Memcached<\/strong>. Even though this has nothing to do with the front-end, the illustration in this article has done a great job that I think designers and people who are less technical can easily understand it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Architecture Notes\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/architecture-notes.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/testing-library-recorder\/pnobfbfcnoeealajjgnpeodbkkhgiici?utm_source=twitter&utm_medium=social\">Testing Library Recorder<\/a><\/h2>\n<p>A Chrome extension to boost productivity with setting up <strong>automatic E2E testing<\/strong>. As you\u2019ve it installed in Chrome, you will find a new option under the <strong>Recorder<\/strong> tab in DevTools that allows you to download it as a script to use in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/setup\/\">Testing Library<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Testing Library Recorder\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/testing-library-recorder.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/thedaviddias\/Front-End-Checklist\">Front-end Checklist<\/a><\/h2>\n<p>This checklist covers things you need to know to be a front-end developer. It provides the fundamentals like HTML and CSS, provides <strong>recommendation, best practices, and do\u2019s and don\u2019ts when developing a website<\/strong>. Whether you\u2019re new or seasoned developers, I\u2019m sure there\u2019s something to learn from the list.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Front End Checklist\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/front-end-checklist.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mui.com\/x\/\">MUI-X<\/a><\/h2>\n<p>Rendering a large dataset like a list of tables and directory structure can be challenging. It can have a bad performance impact on your website if it\u2019s not done right. This is where the MUI-X library comes in. It has been designed specifically to handle lots of data along with <strong>filtering, sorting, and pagination<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"MUI X\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/mui-x.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/remult.dev\/\">Remult<\/a><\/h2>\n<p>Remult is a <strong>JavaScript library that provides abstraction in TypeScript<\/strong> for <abbr title=\"Create, Read, Update, and Delete\">CRUD<\/abbr> operation. More specifically, it provides REST API as the controller, the front-end client, and the database query builder.<\/p>\n<p>It supports common databases like MySQL, MongoDB, and SQLite. If you\u2019re coming from a traditional MVC framework, you should get familiar with it pretty quickly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Remult\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/remult.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/stitcher.io\/blog\/new-in-php-82\">What\u2019s new in PHP 8.2<\/a><\/h2>\n<p>This article features changes that will happen in PHP8.2. I\u2019m just excited to see how PHP has been improving in the last couple of years that encouraging best practices and minimizing bad practices.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"PHP 8.2\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/php82.jpg\" width=\"750\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>Front-end development is rapidly changing, with new things to explore every month. There\u2019s always a new methodology, approach, or framework introduced in the web development world that you need to keep up with. In this edition of the series, we\u2019ll feature some frameworks and resources for web designers, testing tools, and much more. If you\u2019re&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2539],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (August 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Front-end development is rapidly changing, with new things to explore every month. There&#039;s always a new methodology, approach, or framework introduced in\" \/>\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-08-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 (August 2022)\" \/>\n<meta property=\"og:description\" content=\"Front-end development is rapidly changing, with new things to explore every month. There&#039;s always a new methodology, approach, or framework introduced in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-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-08-25T13:01:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:19:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/keyboard-testing-library.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-08-2022\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (August 2022)\",\"datePublished\":\"2022-08-25T13:01:27+00:00\",\"dateModified\":\"2025-04-21T10:19:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/\"},\"wordCount\":1125,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-08-2022\\\/keyboard-testing-library.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (August 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-08-2022\\\/keyboard-testing-library.jpg\",\"datePublished\":\"2022-08-25T13:01:27+00:00\",\"dateModified\":\"2025-04-21T10:19:28+00:00\",\"description\":\"Front-end development is rapidly changing, with new things to explore every month. There's always a new methodology, approach, or framework introduced in\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-2022\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-08-2022\\\/keyboard-testing-library.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-08-2022\\\/keyboard-testing-library.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-08-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 (August 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 (August 2022) - Hongkiat","description":"Front-end development is rapidly changing, with new things to explore every month. There's always a new methodology, approach, or framework introduced in","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-08-2022\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (August 2022)","og_description":"Front-end development is rapidly changing, with new things to explore every month. There's always a new methodology, approach, or framework introduced in","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-08-25T13:01:27+00:00","article_modified_time":"2025-04-21T10:19:28+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/keyboard-testing-library.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-08-2022\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (August 2022)","datePublished":"2022-08-25T13:01:27+00:00","dateModified":"2025-04-21T10:19:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/"},"wordCount":1125,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/keyboard-testing-library.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/","name":"Fresh Resources for Web Designers and Developers (August 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/keyboard-testing-library.jpg","datePublished":"2022-08-25T13:01:27+00:00","dateModified":"2025-04-21T10:19:28+00:00","description":"Front-end development is rapidly changing, with new things to explore every month. There's always a new methodology, approach, or framework introduced in","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-2022\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/keyboard-testing-library.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-08-2022\/keyboard-testing-library.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-08-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 (August 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-g7L","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/61985","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=61985"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/61985\/revisions"}],"predecessor-version":[{"id":73911,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/61985\/revisions\/73911"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=61985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=61985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=61985"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=61985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}