{"id":59970,"date":"2022-05-30T23:01:26","date_gmt":"2022-05-30T15:01:26","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=59970"},"modified":"2025-04-21T18:08:23","modified_gmt":"2025-04-21T10:08:23","slug":"designers-developers-monthly-05-2022","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (May 2022)"},"content":{"rendered":"<p>As we move through 2022, the web development landscape continues to evolve with exciting new tools and resources. This month\u2019s collection features some truly innovative solutions that have caught our attention.<\/p>\n<p>From powerful JavaScript frameworks to cutting-edge CSS utilities and innovative development tools, we\u2019ve curated a diverse selection of resources that can help enhance your workflow and elevate your projects. Whether you\u2019re working on frontend interfaces, backend systems, or full-stack applications, there\u2019s something here to inspire and assist you. Let\u2019s explore what\u2019s new!<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-59970-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-59970-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\/alephjs\/aleph.js\">Aleph.js<\/a><\/h2>\n<p>Aleph is a <strong>full-stack framework<\/strong> for <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/deno.land\/\">Deno<\/a>. The framework handles spinning up the server, requests, and SSR that supports both React.js and Vue.js out-of-the-box. It also has <strong>built-in tool for development<\/strong> to publishing to server that provides an end-to-end experience to build a web application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Alephjs\" height=\"333\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/alephjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/markdoc.io\/\">Markdoc<\/a><\/h2>\n<p>Markdoc is a new framework used internally in Stripe as <strong>content authoring for their documentation<\/strong>. You can write the content with Markdown syntax and combin with some of it\u2019s unique features such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/markdoc.io\/docs\/nodes\">Nodes<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/markdoc.io\/docs\/tags\">Tags<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/markdoc.io\/docs\/validation\">Validation<\/a>.<\/p>\n<p>Stripe documentation sets the bar high for the quality and now that they have the tool open for anyone to use, you can create one just as good.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Markdoc\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/markdoc.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jooble.org\/\">Jooble<\/a><\/h2>\n<p>An international job search platform, Jooble is the place to find your next job. You can look for any position in any industry including hundreds of jobs for web designers and developers. <\/p>\n<p>The platform sources the jobs from thousands of sources including corporate websites, social networks, and classified ads, etc and from more than 70 countries. <\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Jooble\" height=\"1342\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/jooble.jpg\" width=\"1934\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/square\/laravel-hyrule\">Laravel Hyrule<\/a><\/h2>\n<p>A <strong>Laravel add-on that provides a nice API that makes it more intuitive to build a validation rule<\/strong>. For example, you can create a rule for a password such as that it has to be at specific length, contains a character, a number, etc. You can also use it as a <strong>generic validation for any input passed on your Laravel application<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Laravel Hyrule\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/hyrule.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/stacksjs\/stacks\">Vue Component Library Starter<\/a><\/h2>\n<p>A <strong>starter kit to build component with Vue.js<\/strong>. It includes all the tools you need that makes starting and developing Vue component fast, such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vitejs.dev\/\">Vite<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/unocss\/unocss\">UnoCSS<\/a> for CSS authoring, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vitest.dev\/\">Vitest<\/a> for unit testing, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cypress.io\/\">Cypress<\/a> for end-to-end testing to name a few. What you need to do is just run a couple commands and you\u2019re all set to start develop.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vue Component Library Starter\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/vue-component-library-starter.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/knex\/knex\">Knex<\/a><\/h2>\n<p>A <strong>framework for Node.js that makes dealing with database more intuitive<\/strong>. It supports various database platforms including MySQL, PostgreSQL, and SQLite3. It provides a uniform interface to connect, query, and help you create database which will boost productivity and help it to make it <strong>easier to maintain your Node.js application<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Knexjs\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/knexjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.spacedrive.com\/\">SpaceDrive<\/a><\/h2>\n<p>A desktop application to <strong>monitor disk space, not only your local computer disk but also the cloud disk usage<\/strong>. It supports several popular cloud storage providers including Apple Photo, Google Drive and Dropbox. It also provides an interface that you\u2019re already familiar so it\u2019s easier organize files across the local and cloud disk.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Spacedrive\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/spacedrive.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/abseil.io\/resources\/swe-book\">Sofware Engineering at Google<\/a><\/h2>\n<p>Software engineering is not only about writing codes or creating an app, but it also about how it is easily maintainable and sustainable through time. This book <strong>covers software engineering practice at Google<\/strong> and is now available for free as an HTML version.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Software Engineering At Google\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/software-engineering-at-google.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/sharkdp\/fd\">FD<\/a><\/h2>\n<p><code>fd<\/code> is a <strong>CLI utility to find files or directories in your computer filesystem<\/strong>. It\u2019s similar to the linux <code>find<\/code> command, only it provides a more intuitive interface. Plus it\u2019s faster, supports glob pattern aside of RegEx, and highlights output with nice colors.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fd\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/fd.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/ericclemmons\/click-to-component\">Click to Component<\/a><\/h2>\n<p>This JavaScript library can help to <strong>streamline your debugging workflow for React.js application<\/strong>. It allows you to click on the element on the browser and it will direct it immediately in the VSCode editor. You can integrate this library with several different React.js stack that includes <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html\">Create React App<\/a>, Next.js,<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Click To Component\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/click-to-component.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hyperui.dev\/\">HyperUI<\/a><\/h2>\n<p>A collection of <strong>Tailwind CSS components<\/strong> consisting of more around 100 components and their variations. You can find common components like buttons, inputs, navigations, etc. to more advanced ones such as prouduct cards. With all these components, you can <strong>create a simple site, a simple webapp, or an e-Commerce site<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Hyper Ui\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/hyper-ui.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chalk.ist\/\">Chalkist<\/a><\/h2>\n<p>A simple web application that allows you to generate screenshot for code snippet. You can change the theme, color, customize the editor, and generate the image which you can share on your social media or post on your blog.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Chalkist\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/chalkist.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/stripe.sh\">Stripe.sh<\/a><\/h2>\n<p>Stripe.sh is a <strong>special endpoint that loads in-browser Terminal<\/strong> that allows you to run or test Stripe CLI as you walk through the doc right within the browser. Another great initiative from Stripe that further improves experience on their documentation and set the bar even higher for other tech companies to follow.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Stripe Sh\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/stripe-sh.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/mozilla\/web-ext\">WebExtension<\/a><\/h2>\n<p>A framework that provides a standard way to build, test, and publish a cross-platform extension for browser; allowing you to develop fast, write the code once and publish it on both Firefox and Chrome.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Web Extension\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/web-extension.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/hope-ui\/hope-ui\">HopeUI<\/a><\/h2>\n<p>A <strong>UI component library<\/strong> built with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.solidjs.com\/\">SolidJS<\/a> with focus on reusability and accessibility. It contains around 40 components including Buttons, Navigations, Inputs, and Form. Each component is highly customizable and support <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/support.google.com\/chrome\/answer\/9275525?hl=en\">dark-mode<\/a> out of the box.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Hope Ui\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/hope-ui.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/auto-animate.formkit.com\/\">AutoAnimate<\/a><\/h2>\n<p>A library to instantly and <strong>easily add smooth animation or transition on web UI application<\/strong>. The library will work mostly out of the box. But if you need a more advanced animation, it provides a plugin API where you can add your own specification. You can use it with React.js, Vue.js, or just plain JavaScript.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Auto Animate\" height=\"426\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/auto-animate.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/zagjs.com\/\">ZagJS<\/a><\/h2>\n<p>A JavaScript library to build a common interactive UI patterns on a design system such as the Accordion, Dialog, and Popover. It\u2019s a <strong>framework-agnostic library<\/strong> which means you can use it with any framework of your choice whether it\u2019s React, Vue or Solid.js.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Zagjs\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/zagjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/egoist\/tsup\">tsup<\/a><\/h2>\n<p>TypeScript is a popular tool that brings type-safety to JavaScript. However we sould still require to compile TypeScript to plain JavaScript and that sometimes can be run slow on a large project.<\/p>\n<p>This is where <code>tsup<\/code> comes in. Built-on top of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/esbuild.github.io\/\">esbuild<\/a>, <code>tsup<\/code> is blazing fast. It also supports <strong>compiling various file formats<\/strong> including <code>.js<\/code>, <code>.mjs<\/code>, and of course the TypeScript file, <code>.ts<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Tsup\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/tsup.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nx.dev\/\">NX<\/a><\/h2>\n<p><strong>NX<\/strong> provides a set of command that you can run to start a project with a pre-configured build setup for running test, compiling codes, and integrating to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nx.dev\/using-nx\/ci-overview\">several CI providers<\/a>. It frees you up from the trouble of setting up a web project and can help to streamline build process in a monorepo setup.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Nx\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/nx.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tsch.js.org\/\">TypeChallenge<\/a><\/h2>\n<p>A collection of challenges to help you to understand how type system in TypeScript works. The challenge ranges from the easy ones to the extreme. I think it\u2019s an overall great resource for anyone whether you\u2019ve just got started or want to improve their skills to become an expert on TypeScript.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Type Challenge\" height=\"426\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/type-challenge.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lottiefiles.com\/\">Lottie<\/a><\/h2>\n<p>A JavaScript a library that provides a set of tools to create a rich animation or motion design on the web. It\u2019s used by many big names on the industry and has become a standard to create, edit, test, and collaborate on creating the web animation. It is faster compared to GIF or displaying video and also integrates with many popular design tool such as Adobe XD, Figma, Webflow, and even VSCode.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Lottiefiles\" height=\"426\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/lottiefiles.jpg\" width=\"750\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>As we move through 2022, the web development landscape continues to evolve with exciting new tools and resources. This month\u2019s collection features some truly innovative solutions that have caught our attention. From powerful JavaScript frameworks to cutting-edge CSS utilities and innovative development tools, we\u2019ve curated a diverse selection of resources that can help enhance your&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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (May 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we move through 2022, the web development landscape continues to evolve with exciting new tools and resources. This month&#039;s collection features some\" \/>\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-05-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 (May 2022)\" \/>\n<meta property=\"og:description\" content=\"As we move through 2022, the web development landscape continues to evolve with exciting new tools and resources. This month&#039;s collection features some\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-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-05-30T15:01:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:08:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/alephjs.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (May 2022)\",\"datePublished\":\"2022-05-30T15:01:26+00:00\",\"dateModified\":\"2025-04-21T10:08:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/\"},\"wordCount\":1227,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2022\\\/alephjs.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (May 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2022\\\/alephjs.jpg\",\"datePublished\":\"2022-05-30T15:01:26+00:00\",\"dateModified\":\"2025-04-21T10:08:23+00:00\",\"description\":\"As we move through 2022, the web development landscape continues to evolve with exciting new tools and resources. This month's collection features some\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2022\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2022\\\/alephjs.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2022\\\/alephjs.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-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 (May 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 (May 2022) - Hongkiat","description":"As we move through 2022, the web development landscape continues to evolve with exciting new tools and resources. This month's collection features some","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-05-2022\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (May 2022)","og_description":"As we move through 2022, the web development landscape continues to evolve with exciting new tools and resources. This month's collection features some","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-05-30T15:01:26+00:00","article_modified_time":"2025-04-21T10:08:23+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/alephjs.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (May 2022)","datePublished":"2022-05-30T15:01:26+00:00","dateModified":"2025-04-21T10:08:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/"},"wordCount":1227,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/alephjs.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/","name":"Fresh Resources for Web Designers and Developers (May 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/alephjs.jpg","datePublished":"2022-05-30T15:01:26+00:00","dateModified":"2025-04-21T10:08:23+00:00","description":"As we move through 2022, the web development landscape continues to evolve with exciting new tools and resources. This month's collection features some","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2022\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/alephjs.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2022\/alephjs.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-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 (May 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-fBg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/59970","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=59970"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/59970\/revisions"}],"predecessor-version":[{"id":73899,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/59970\/revisions\/73899"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=59970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=59970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=59970"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=59970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}