{"id":49849,"date":"2020-04-06T23:18:29","date_gmt":"2020-04-06T15:18:29","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=49849"},"modified":"2025-04-21T18:33:28","modified_gmt":"2025-04-21T10:33:28","slug":"fresh-resources-for-web-designers-and-developers-april-2020","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (April 2020)"},"content":{"rendered":"<p>Despite the doom and gloom due to the COVID-19 virus spread, it\u2019s not stopping us from sharing fresh resources and tools with our fellow web developers.<\/p>\n<p>In this edition, we have several resources and tools with extensive sets of features. For example, we have a library that contains a list of countries with their complete data, a collection of 500+ free icons, a collection of React Hooks, and many more. Let\u2019s jump in immediately to see the full list.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-49849-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-49849-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:\/\/typecho.org\/\">Typecho<\/a><\/h2>\n<p>A simple blogging platform built with PHP. Typecho reminds me of the early days of WordPress when it was just a blogging platform. If you\u2019d like to run a simple blog with PHP, Typecho could be the perfect platform for you.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Typecho Editor\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/typecho.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css.gg\/\">CSSgg<\/a><\/h2>\n<p>A collection of 500+ icons built purely with CSS. No images or SVGs. You can use these icons by installing them with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/\">NPM<\/a>, loading them through the CDN via <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/css.gg\/icons-compressed\/icons.css\">jsDeliver<\/a> or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.unpkg.com\/\">Unpkg<\/a>, and it\u2019s possible to load only specific icons with the specialized URL, like below:<\/p>\n<pre>https:\/\/css.gg\/c?=|icon-name|icon-name|icon-name<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSSgg\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/cssgg.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/editorjs.io\/\">EditorJS<\/a><\/h2>\n<p>A JavaScript library to build a block-based editor. Each type of content such as paragraphs, images, and headings is defined separately as a \u201cblock\u201d. It\u2019s extensible with plugins; you can create a plugin to create custom blocks or extend the current block. It\u2019s an overall great JavaScript library to create an editor on the Web platform or app.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"EditorJS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/blockjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/frostming.github.io\/legit\/\">Legit<\/a><\/h2>\n<p>Legit adds complementary Git commands for some common workflows that are easier to type and remember. For example, you can type <code>git switch<\/code> to checkout to another branch plus automatically <em>stash<\/em> and <em>unstash<\/em> changes. Another additional command it adds is <code>git sync<\/code> which will do the following in subsequent order: stash > Fetch > Auto-Merge\/Rebase > Push > Unstash.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Legit\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/legit.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/benawad\/destiny\">Destiny<\/a><\/h2>\n<p>A <em>linter<\/em> for file and directory structure designed for JavaScript\/TypeScript based projects. It works similar to a linter in which it will scan the project folder and all files, and create the suggested directory structure based on its evaluation of how the files are imported across other files. It\u2019s also able to move files into the new structure and remove empty directories, resulting in a more organized and \u201cprettier\u201d layout.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Destiny\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/destiny.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/dantleech\/fink\">Fink<\/a><\/h2>\n<p>A PHP library to crawl links on a website and output several pieces of information associated with the links, including the status code (whether it\u2019s ok (<code>200<\/code>) or not found (<code>404<\/code>)), which page the URL is linked from, and how long it took to request the URL.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fink\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/fink.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/ekalinin\/github-markdown-toc\">Github Markdown TOC<\/a><\/h2>\n<p>A utility command line that makes it super easy to generate a table of contents (TOC) on the README.md file. You can type <code>.\/gh-md-toc ~\/code\/foo\/README.md<\/code>. It will generate a table of contents based on the heading structure in the file in a Github-compatible Markdown format, for example:<\/p>\n<pre>\nTable of Contents\n=================\n\n* [Heading 1](#heading-1)\n* [Heading 2](#heading-2)\n* [Heading 3](#heading-3)\n* [Heading 3.1:](#heading-3-1)\n* [Heading 3.2:](#heading-3-2)\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Github Markdown TOC\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/github-markdown-toc.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/marketplace\/actions\/build-and-push-docker-images\">Docker Github Actions<\/a><\/h2>\n<p>A new official <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/features\/actions\">Github Action<\/a> from Docker. This Action allows you to automate building a new Docker image and push it directly to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hub.docker.com\/\">Docker Hub<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Docker Github Actions\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/docker-github-actions.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/microsoft\/vscode-extension-samples\">VSCode Extension Samples<\/a><\/h2>\n<p>This is a pretty extensive example of how to build <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a> extensions. You can find everything from the most basic \u201cHello World\u201d example to an example with a Testing suite, and each example of using the API.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"VSCode Extension Samples\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/vscode-ext.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mledoze\/countries\">Countries<\/a><\/h2>\n<p>A quite extensive dataset of countries. It provides comprehensive data about countries such as their official name, native name, translations, TLD, and much more. This data comes in JSON, XML, YAML, and PHP formats.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Countries\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/countries.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/openemr\/openemr\">OpenEMR<\/a><\/h2>\n<p>An open-source application for Electronic Health Records (EMR) and medical practice management platform. Despite being free and open-source, it provides extensive features comparable to proprietary platforms; it comes with an advanced scheduling system, e-prescribing, medical billing, lab integration, clinical decision rules, and multilingual support.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"OpenEMR\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/open-emr.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/streamich\/react-use\">ReactUse<\/a><\/h2>\n<p>An extensive collection of predefined React Hooks that you can use right away in your project. You can find Hooks to interact with the platform API such as <code>useBattery<\/code>, <code>useGeolocation<\/code>, Hooks to add animation like <code>useInterval<\/code> and <code>useSpring<\/code>, and Hooks to manage state like <code>useStateValidator<\/code> and <code>useMediatedState<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"ReactUse\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/react-use.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/Sylius\/Sylius\">Sylius<\/a><\/h2>\n<p>Sylius is an e-Commerce platform built with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/symfony.com\/\">Symfony<\/a>. Developed with high standards of coding and testing practices, it comes with many features to run an e-commerce site professionally.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Sylius\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/sylius.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/tannerlinsley\/react-query-devtools\">React Query DevTools<\/a><\/h2>\n<p>A DevTools designed for the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/TanStack\/query\">React Query<\/a> module; a module to fetch and process asynchronous data in React. The DevTools allow you to view the cache in real-time, inspect core query objects and query data payloads, and manually refetch & remove queries.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Query DevTools\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/react-query.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/tgalopin\/html-sanitizer\">HTML Sanitiser<\/a><\/h2>\n<p>A PHP library to sanitize HTML output. With this library, you can set which HTML elements and attributes you would allow to be rendered in the final output.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"HTML Sanitizer\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/html-sanitizer.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laravel-livewire.com\/\">Livewire<\/a><\/h2>\n<p>A full-stack library to create applications with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laravel.com\/\">Laravel<\/a>. Aside from inheriting features from Laravel, the library also integrates its own JavaScript, utilities, UIs, and components which make it easier to create interactive features in the application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Livewire\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/livewire.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/redwoodjs.com\/\">RedWood<\/a><\/h2>\n<p>A full-stack application that will allow you to build and deploy JAMStack applications easily. It brings all the latest modern tools like React, GraphQL, and Prisma and puts them into a unified environment to create robust applications quickly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"RedWood\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/redwoodjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rocket.chat\/\">Rocket Chat<\/a><\/h2>\n<p>An open-source application to set up a group chat application. A great alternative to Slack, if you prefer or need to host and have full control over your own data and the application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Rocket Chat\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/rocket-chat.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/symfony.com\/doc\/current\/console.html\">Console<\/a><\/h2>\n<p>A library to create custom Symfony console components. It allows you to create simple to advanced commands. Do you need to create a progress bar with the command? This library has you covered.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Console\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/console.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/tabler\/tabler-icons\">Tabler Icons<\/a><\/h2>\n<p>Last but not least, we have another set of icons. There are more than 300 icons. They are all licensed under MIT, so you can do virtually anything with the icons, including using them in commercial projects.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Tabler Icons\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/tabler-icons.jpg\" width=\"750\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Despite the doom and gloom due to the COVID-19 virus spread, it\u2019s not stopping us from sharing fresh resources and tools with our fellow web developers. In this edition, we have several resources and tools with extensive sets of features. For example, we have a library that contains a list of countries with their complete&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"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.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (April 2020) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Despite the doom and gloom due to the COVID-19 virus spread, it&#039;s not stopping us from sharing fresh resources and tools with our fellow web developers.\" \/>\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\/fresh-resources-for-web-designers-and-developers-april-2020\/\" \/>\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 (April 2020)\" \/>\n<meta property=\"og:description\" content=\"Despite the doom and gloom due to the COVID-19 virus spread, it&#039;s not stopping us from sharing fresh resources and tools with our fellow web developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/\" \/>\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=\"2020-04-06T15:18:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:33:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/typecho.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\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (April 2020)\",\"datePublished\":\"2020-04-06T15:18:29+00:00\",\"dateModified\":\"2025-04-21T10:33:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/\"},\"wordCount\":966,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/typecho.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (April 2020) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/typecho.jpg\",\"datePublished\":\"2020-04-06T15:18:29+00:00\",\"dateModified\":\"2025-04-21T10:33:28+00:00\",\"description\":\"Despite the doom and gloom due to the COVID-19 virus spread, it's not stopping us from sharing fresh resources and tools with our fellow web developers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/typecho.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/typecho.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-april-2020\\\/#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 (April 2020)\"}]},{\"@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 (April 2020) - Hongkiat","description":"Despite the doom and gloom due to the COVID-19 virus spread, it's not stopping us from sharing fresh resources and tools with our fellow web developers.","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\/fresh-resources-for-web-designers-and-developers-april-2020\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (April 2020)","og_description":"Despite the doom and gloom due to the COVID-19 virus spread, it's not stopping us from sharing fresh resources and tools with our fellow web developers.","og_url":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-04-06T15:18:29+00:00","article_modified_time":"2025-04-21T10:33:28+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/typecho.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\/fresh-resources-for-web-designers-and-developers-april-2020\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (April 2020)","datePublished":"2020-04-06T15:18:29+00:00","dateModified":"2025-04-21T10:33:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/"},"wordCount":966,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/typecho.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/","url":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/","name":"Fresh Resources for Web Designers and Developers (April 2020) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/typecho.jpg","datePublished":"2020-04-06T15:18:29+00:00","dateModified":"2025-04-21T10:33:28+00:00","description":"Despite the doom and gloom due to the COVID-19 virus spread, it's not stopping us from sharing fresh resources and tools with our fellow web developers.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/typecho.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/fresh-resources-for-web-designers-and-developers-april-2020\/typecho.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-april-2020\/#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 (April 2020)"}]},{"@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-cY1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/49849","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=49849"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/49849\/revisions"}],"predecessor-version":[{"id":73931,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/49849\/revisions\/73931"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=49849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=49849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=49849"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=49849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}