{"id":50200,"date":"2020-05-11T21:46:16","date_gmt":"2020-05-11T13:46:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=50200"},"modified":"2020-05-08T15:47:24","modified_gmt":"2020-05-08T07:47:24","slug":"designers-developers-monthly-05-2020","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (May 2020)"},"content":{"rendered":"<p>If you\u2019re a web designer or developer and want to make the most of your spare time, take a look at this round of Fresh Resources series.<\/p>\n<p>In this list, you will find a couple of references for code samples and recipes, one-liner codes, and articles that I\u2019m sure will teach you a couple of new tricks to improve your coding skills. So without further ado, let\u2019s jump in.<\/p>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-doodle.com\/\">CSS Doodle<\/a><\/h2>\n<p>Utilizing <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\">Web Component<\/a>, this tiny library allows you to create unconventional patterns easily using only CSS syntax.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/css-doodle.jpg\" alt=\"Circular graph and the example of CSS Doodle code\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/microsoft-edge\/devtools-guide-chromium\/whats-new\/2020\/03\/devtools\">Microsoft Edge DevTools<\/a><\/h2>\n<p>This tool allows developers to debug a website running remotely on a Windows computer. This makes it a pretty handy tool for developers managing multiple websites that run on a local network.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/remote-tools-for-ms-edge.jpg\" alt=\"Remove tools installation for MS Edge\" width=\"750\" height=\"477\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/colors.lol\/\">Colors LOL<\/a><\/h2>\n<p>If you\u2019ve ever been curious about the names of some particular colors, you should check this color collection. Colors LOL features color palettes defined with overly descriptive color names making the colors sound super interesting.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/colors-lol.jpg\" alt=\"Colors with more description name\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/lukeed\/rosetta\">Rosetta<\/a><\/h2>\n<p>A simple library to internationalize your web content defined in JavaScript. It features a simple and easy to follow API, works in modern browsers (except Internet Explorer, unfortunately), and it\u2019s less 300 bytes in size.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/rosetta.jpg\" alt=\"The Rosetta logo\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/typeof.net\/Iosevka\/\">Iosevka<\/a><\/h2>\n<p>Iosevka is an open-source monospace font family. It covers 3000+ characters, 6000+ glyphs, and supports 150+ languages. It is designed for high readability which makes it a perfect font for writing code, using it in Terminals, and for technical documents.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/iosevka.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/htmldom.dev\/\">HTMLDOM<\/a><\/h2>\n<p>A collection of code snippets and tutorials for handling HTML Document Object Model (DOM) with pure JavaScript. You can find some basic techniques like checking if an element has class, add or remove class from an element, or adding new element to more advanced tricks like making an element draggable and resizeable.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/html-dom-dev.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ishadeed.com\/article\/overflow-css\/\">Overflow CSS<\/a><\/h2>\n<p>In this article, Ahmad Shadeed walks us through the details on how the CSS \u201cOverflow\u201d works and applies it in some real-world examples. A great reference to brush up your comprehension in CSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/css-overflow.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/excalidraw.com\/\">Excalidraw<\/a><\/h2>\n<p>A useful tool to create virtual sketches with a hand-drawn feel. The tool currently features several types of shapes including the rectangle, diamond, circle, line, and arrow. You can freely resize or rotate these shapes and change their colors, making it a great tool for quick prototyping.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/excalidraw.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glimpse-editor.org\/\">Glimpse Editor <\/a>(not working)<\/h2>\n<p>Glimpse Editor is GIMP, a free graphic editing tool, fork. The project focuses on improving the user experience on the editor and aims to make it as a popular free alternative of the paid ones. Glimpse Editor currently works in Linux and Windows.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/glimpse-editor.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/andybrewer.github.io\/mvp\/\">MVP.css<\/a><\/h2>\n<p>A collection of CSS rules that apply basic standardize HTML styles across the browser. Unlike similar CSS libraries, MVP.css allows you to customize a few things such as the colors and border-radius via the CSS variables.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/mvp-css.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/themer.dev\/\">Themer<\/a><\/h2>\n<p>A tool to generate a color theme for editors (e.g. Visual Studio Code, Atom, Sublime Text), terminals (e.g. Hyper, iTerm, GNOME Terminal), and some specific applications (e.g. Slack, Alfred, Firefox, Chrome, etc.). A great tool if you\u2019d like to generate consistent colors across your development environments.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/themer.jpg\" alt=\"Inputs to define the theme colors\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/humanmade\/asset-manager-framework\">Asset Manager Framework<\/a><\/h2>\n<p>A handy plugin to customize Media library behavior in WordPress. For example, you fetch the image from an external source, the plugin already does most of the heavy-lifting so you can use a simple API to add your customization.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/asset-manager-framework.jpg\" alt=\"WordPress media library showing cat images\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/googleapis\/google-api-php-client\">Google API PHP Client<\/a><\/h2>\n<p>A PHP library officially maintained by Google that enables you to connect to Google APIs such as Gmail, Books, YouTube, and others. This is the right library if you\u2019re looking to integrate your PHP application to some Google services.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/google-api-php-sdk.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/docker-mailserver\/docker-mailserver\">Docker Mailserver<\/a><\/h2>\n<p>Setting up a mail server on your own can be daunting. But if your application runs on a Docker container, you can get it up and running in seconds with this Docker image. It supports several standard protocols to work with emails right out-of-the-box, including SMTP, POP3, and IMAP4.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/docker-mailserver.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/expo\/expo\">Expo<\/a><\/h2>\n<p>A set of tools that enables creating a native application for Android, iOS, and the Web using a single source code. Having a single source code for your cross-platform applications makes it fast and easy to add or change features across the platforms. Also, it\u2019s more economical as you don\u2019t need to hire 3 different teams of developers to work on each platform.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/expo-cli.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/1loc.dev\/\">1Loc<\/a><\/h2>\n<p>A collection of one-liner code snippet of JavaScript for common operations. Here you can see a list of categorized collection to work with DOM, DateTime, String, Arrays, Number, and all in just in 1 line of code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/1loc-dev.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bansal.io\/pattern-css\">Pattern CSS<\/a><\/h2>\n<p>A CSS library to create patterns. It currently provides several patterns such as checked pattern, dot, triangle, zig-zag, and stripes, etc. to name a few. These patterns will work across browser including Internet Explorer 10 and 11.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/pattern-css.jpg\" alt=\"\" width=\"750\" height=\"469\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromestatus.com\/samples\">Chrome Samples<\/a><\/h2>\n<p>A list of working of code examples (mostly JavaScript) for features or API-implemented in Chrome releases. This is a great resource to keep up with new updates and see how they work.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/chrome-status-samples.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/addyosmani\/puppeteer-webperf\">Puppeteer Webperf<\/a><\/h2>\n<p>A collection of code recipes for automating performance tests using Puppeteer. Here you can find codes to get runtime performance metrics, generate <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Lighthouse report<\/a>, and test your site with JavaScript disabled, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/puppeteer-perf.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/aristocratos\/bashtop\">Bashtop<\/a><\/h2>\n<p>A Bash utility monitor to monitor resources, usage, and stats for processor, memory, disks, network, and other processes in Linux. It may be similar to the <code><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linux.com\/training-tutorials\/linux-top-command-explained\/\">top<\/a><\/code> but it brings several nice touches such as better UI, ability to filter processes, and graph for network usage, to name a few.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/bashtop.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>If you\u2019re a web designer or developer and want to make the most of your spare time, take a look at this round of Fresh Resources series. In this list, you will find a couple of references for code samples and recipes, one-liner codes, and articles that I\u2019m sure will teach you a couple of&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,510,511],"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 2020) - Hongkiat<\/title>\n<meta name=\"description\" content=\"If you&#039;re a web designer or developer and want to make the most of your spare time, take a look at this round of Fresh Resources series. In this list, you\" \/>\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-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 (May 2020)\" \/>\n<meta property=\"og:description\" content=\"If you&#039;re a web designer or developer and want to make the most of your spare time, take a look at this round of Fresh Resources series. In this list, you\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-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-05-11T13:46:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/css-doodle.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=\"4 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-2020\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (May 2020)\",\"datePublished\":\"2020-05-11T13:46:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/\"},\"wordCount\":904,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2020\\\/css-doodle.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\",\"Web Designers\",\"Web Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (May 2020) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2020\\\/css-doodle.jpg\",\"datePublished\":\"2020-05-11T13:46:16+00:00\",\"description\":\"If you're a web designer or developer and want to make the most of your spare time, take a look at this round of Fresh Resources series. In this list, you\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2020\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2020\\\/css-doodle.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2020\\\/css-doodle.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-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 (May 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 (May 2020) - Hongkiat","description":"If you're a web designer or developer and want to make the most of your spare time, take a look at this round of Fresh Resources series. In this list, you","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-2020\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (May 2020)","og_description":"If you're a web designer or developer and want to make the most of your spare time, take a look at this round of Fresh Resources series. In this list, you","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-05-11T13:46:16+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/css-doodle.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (May 2020)","datePublished":"2020-05-11T13:46:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/"},"wordCount":904,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/css-doodle.jpg","keywords":["Tools for Designers &amp; Developers","Web Designers","Web Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/","name":"Fresh Resources for Web Designers and Developers (May 2020) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/css-doodle.jpg","datePublished":"2020-05-11T13:46:16+00:00","description":"If you're a web designer or developer and want to make the most of your spare time, take a look at this round of Fresh Resources series. In this list, you","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2020\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/css-doodle.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2020\/css-doodle.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-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 (May 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-d3G","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/50200","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=50200"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/50200\/revisions"}],"predecessor-version":[{"id":51762,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/50200\/revisions\/51762"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=50200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=50200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=50200"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=50200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}