{"id":55253,"date":"2021-05-28T21:47:16","date_gmt":"2021-05-28T13:47:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=55253"},"modified":"2025-04-21T19:46:05","modified_gmt":"2025-04-21T11:46:05","slug":"designers-developers-monthly-05-2021","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (May 2021)"},"content":{"rendered":"<p>As we move through 2021, 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-55253-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-55253-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\/notea-org\/notea\">Notea<\/a><\/h2>\n<p>Notea is a self-hosted note-taking web application that can be installed on your own server with Docker. You can use it to write and share almost any type of content such as documentations, Wikis, blogs, and even newsletters with beautuiful typography.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Notea\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/notea.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/httpdump.app\/\">HTTPDump<\/a><\/h2>\n<p>This tool provides a unique URL where we can mock response, dump data over an HTTP request, and shows it in a human-friendly way. It\u2019s useful for testing the integration of third-party APIs or Webhooks.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"HTTPDump\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/httpdump.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/slidevjs\/slidev\">Slidev<\/a><\/h2>\n<p>A Slide framework built for developers. It\u2019s similar to PowerPoint or Google Slides where you can create presentation slides except it also comes with features that developers will appreciate such as being able to embed code snippets, interactive components, and a live code editor.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Slidev\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/slidev.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/iconic.app\/\">Iconic<\/a><\/h2>\n<p>A huge collection of free icons that you can use on your website and in your apps. It features icons from many categories including Arrows, Folders, Files, Business, Finance, and many more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Iconic\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/iconic.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/iconoir.com\/\">Iconoir<\/a><\/h2>\n<p>Another website where you can find a good collection of icons for your web or app design projects. At the time of this writing, it contains more than 900 icons in SVG. It\u2019s open-source, completely free and without any limits and restrictions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Iconoir\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/iconoir.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/zx\">ZX<\/a><\/h2>\n<p>ZX is Google\u2019s initiative to help you create scripts with JavaScript and Node.js libraries more conveniently. It provides wrappers around Node <code>child_process<\/code>, escapes arguments, and sensible defaults that allows you to be more productive in writing scripts instead of setting up the library configs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"ZX\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/zx.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/Renovamen\/playground-macos\">Playground macOS<\/a><\/h2>\n<p>A macOS desktop UI replica built with React.js, Redux, and TailwindCSS. A good source if you\u2019d like to dig in front-end development and sharpen your skills around the stacks.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Playground Macos\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/playground-macos.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rustdesk.com\/\">RustDesk<\/a><\/h2>\n<p>A remote desktop client built with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.rust-lang.org\/\">Rust<\/a>. It\u2019s free and open-source. You can configure it with your own server so you have control over the entire data. It\u2019s a good alternative to TeamViewer and AnyDesk.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"RustDesk\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/rustdesk.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/microsoft\/Web-Dev-For-Beginners\">WebDev for Beginners<\/a><\/h2>\n<p>A curriculum provided by Azure Cloud Advocates at Microsoft that includes lessons, exercises, and quizzes of basic HTML, CSS, and JavaScript. A great resource for anyone who is just getting started in web development.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Web Dev For Beginners\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/web-dev-for-beginners.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vanilla-extract.style\/\">Vanilla Extract<\/a><\/h2>\n<p>A tool that provides a new take on building CSS for your JavaScript application. You can use TypeScript to compose your CSS selectors, variables, and themes, etc., and generates a static CSS file on build. It works with any front-end framework including webpack, esbuild, and Vite.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vanilla Extract\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/vanilla-extract.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/csshell.dev\/\">CSSHell<\/a><\/h2>\n<p>This site provides a collection of common CSS mistakes; you will find why certain ways of writing CSS is a mistake and it also shows you how to fix them. This a great resource to sharpen your CSS skills.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSSHell\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/csshell.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/addyosmani.com\/blog\/puppeteer-recipes\/#devtools-profile\">Puppeteer Recipes<\/a><\/h2>\n<p>Puppeteer is a great tool to run performance testing on your website. But sometimes it might not be so obvious as how should we get started. In this article, Addy Osmani \u2013 one of Google Chrome Engineers \u2013 shares some handy code <code>recipes<\/code> you can copy and reuse to start profiling your website performance with Puppeteer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Puppeteer Recipes\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/puppeteer-recipes.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/kretes.dev\/\">Kretes<\/a><\/h2>\n<p>Kretes provides a coherent environment for developing applications with TypeScript, the build tools, and deep integration with Visual Studio Code editor. This tool gives you a boost in productivity when starting application development.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Kretes\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/kretes.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/awesomemotive\/persistent-dismissible\">Persistent Dismissable<\/a><\/h2>\n<p>A PHP library to handle custom dismissable notice in the WordPress admin area. It optimizes the database call under the hood and is compatible with WordPress Multisite setup out of the box. Overall it\u2019s a handy PHP library for WordPress plugin developers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Persistent Dismissable\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/persistent-dismissable.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.brandbird.app\/\">BrandBird<\/a><\/h2>\n<p>BrandBird helps you generate a perfect image for your website. It\u2019s a useful tool to make sure that your brand looks good on social media and helps you avoid awkward auto-cropping when shared on social media like Twitter. You can set the background, border-radius, shadows, and some other elements of the image.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"BrandBird\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/brandbird.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bumbag.style\/\">Bumbag Styles<\/a><\/h2>\n<p>A collection of UI React and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactnative.dev\/\">ReactNative<\/a> components. It\u2019s themeable, composable, and accessible out of the box. This library makes it fast to create applications that works across different platforms.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bumbag Style\" height=\"416\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/bumbag-style.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/validator.schema.org\/\">Schema Validator<\/a><\/h2>\n<p>An online tool to validate Schema structure on a website. It\u2019s compatible with several specifications including JSON-LD, RDFa, and Microdata. It\u2019ll display these data and show if it identifies the syntax error.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Schema\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/schema.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/typesense.org\/\">TypeSense<\/a><\/h2>\n<p>TypeSense is a tool designed to improve performance and search accuracy with typo tolerance, configurable ranking, synonyms, grouping, and a lot more. It\u2019s easy to configure and free, which makes it a great alternative to ElasticSearch and Algolia.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"TypeSense\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/typesense.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/\">MermaidJS<\/a><\/h2>\n<p>Mermaid.js is a JavaScript library that allows you to generate flowcharts, diagrams, and other types of visualizations with just text and code syntax; it\u2019s like Markdown for graphics. The library provides API for configurations and integrations. Most likely this library is already integrated into your favourite tool or application; see <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/integrations\">this \u201cIntegration\u201d page<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mermaid\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/mermaid.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wintercms.com\/\">WinterCMS<\/a><\/h2>\n<p>WinterCMS is a fork of its predecessor, OctoberCMS, due to the switch of the project into a proprietary CMS. WinterCMS inherits the features and flexibility including the theme and plugins.<\/p>\n<p>The team also puts an exciting roadmap to develop WinterCMS further such as Laravel 9 LTS support, Tailwind-based CSS and UI, and CLI to improve productivity for developers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WinterCMS\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/wintercms.jpg\" width=\"750\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>As we move through 2021, 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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (May 2021) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we move through 2021, 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-2021\/\" \/>\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 2021)\" \/>\n<meta property=\"og:description\" content=\"As we move through 2021, 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-2021\/\" \/>\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=\"2021-05-28T13:47:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:46:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/notea.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=\"5 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-2021\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (May 2021)\",\"datePublished\":\"2021-05-28T13:47:16+00:00\",\"dateModified\":\"2025-04-21T11:46:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/\"},\"wordCount\":959,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2021\\\/notea.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-2021\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (May 2021) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2021\\\/notea.jpg\",\"datePublished\":\"2021-05-28T13:47:16+00:00\",\"dateModified\":\"2025-04-21T11:46:05+00:00\",\"description\":\"As we move through 2021, 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-2021\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2021\\\/notea.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2021\\\/notea.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2021\\\/#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 2021)\"}]},{\"@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 2021) - Hongkiat","description":"As we move through 2021, 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-2021\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (May 2021)","og_description":"As we move through 2021, 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-2021\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-05-28T13:47:16+00:00","article_modified_time":"2025-04-21T11:46:05+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/notea.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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (May 2021)","datePublished":"2021-05-28T13:47:16+00:00","dateModified":"2025-04-21T11:46:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/"},"wordCount":959,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/notea.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-2021\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/","name":"Fresh Resources for Web Designers and Developers (May 2021) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/notea.jpg","datePublished":"2021-05-28T13:47:16+00:00","dateModified":"2025-04-21T11:46:05+00:00","description":"As we move through 2021, 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-2021\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/notea.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2021\/notea.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2021\/#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 2021)"}]},{"@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-enb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55253","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=55253"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55253\/revisions"}],"predecessor-version":[{"id":73990,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55253\/revisions\/73990"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=55253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=55253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=55253"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=55253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}