{"id":55709,"date":"2021-06-30T21:01:34","date_gmt":"2021-06-30T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=55709"},"modified":"2025-04-21T18:40:53","modified_gmt":"2025-04-21T10:40:53","slug":"designers-developers-monthly-06-2021","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (June 2021)"},"content":{"rendered":"<p>As we move through 2021, the web development community continues to innovate and create amazing tools to help us build better websites and applications. This month\u2019s collection brings together some truly impressive resources that caught our attention.<\/p>\n<p>Without further ado, let\u2019s see the full list.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-55709-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-55709-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\/agarrharr\/awesome-cli-apps\">Awesome CLI Apps<\/a><\/h2>\n<p>Command Line Interface (CLI) is powerful, fast, and allows you to automate tasks that would be slower or not possible at all if you do with its UI counterpart.<\/p>\n<p>This is the <strong>list of all the available CLI applications<\/strong> \u2013 from a CLI to retrieve football score and download a Youtube video to interact with Facebook and Spotify and many other things.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Awesome Cli Apps\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/awesome-cli-apps.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/terminalsare.sexy\/\">TerminalsAreSexy<\/a><\/h2>\n<p>On this platform, you can find a list of <strong>Terminal applications<\/strong> such as Bash ZSH, and Fish, etc. <strong>editor applications like VIM, and emacs and other types of editors<\/strong>, package managers, plugins, and a list of community sites.<\/p>\n<p>If you\u2019re looking to learn more on using Terminal and CLIs, you should bookmark this site as a comprehensive learning resource.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Terminal Are Sexy\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/terminal-are-sexy.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/charts-blocks\/\">Charts Blocks<\/a><\/h2>\n<p>A plugin to insert charts intuitively in the WordPress block editor with just a couple of clicks. The plugin supports several types of charts including the Bar, Line, Pie, and Doughnut chart.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Charts Block\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/charts-block.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/beyondco.de\/docs\/laravel-prose-linter\/getting-started\/installation\">Laravel Prose Linter<\/a><\/h2>\n<p>A Laravel package to check the textual content on your Laravel application. It can check translations, typos, slang, and can suggest a better writing style. It\u2019s a quite unique <em>linter<\/em> actually.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Laravel Prose\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/laravel-prose.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getradar.co\/\">Radar<\/a><\/h2>\n<p>An app that allows you to put together different types of real-time data that you\u2019d like to monitor in one single place. You can add, for example, the Bitcoin price, Twitter follower count, currency exchange, AdSense earning, and a lot more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Radar\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/radar.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/zachleat\/performance-leaderboard#readme\">Learderboard Performance<\/a><\/h2>\n<p>A tool to benchmark across several different websites to compare their performance. It utilizes Lighthouse under the hood and will generate not only the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/lcp\/\">LCP<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/first-contentful-paint\/\">FCP<\/a> but also the accessibility report and the carbon footprint. It\u2019s a great tool if you need to monitor how other websites are doing.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Perf Leaderboard\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/perf-leaderboard.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/astro.build\/\">Astro Build<\/a><\/h2>\n<p>A modern framework-agnostic tool to build a static site. You can use, your favourite framework like React, Vue, Web Components, or just plain old HTML+CSS while Astro will do all the work to compile all these components into a fast static site.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Astro\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/astro.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/google\/iconvg\">IconVG<\/a><\/h2>\n<p>IconVG is Google\u2019s initiative for <strong>alternative format for simple small graphics<\/strong> like icons, logos, and emoji which is commonly used on the web. It\u2019s up to 3x <strong>smaller compared to SVG<\/strong> and much smaller compared to PNG.<\/p>\n<p>At the time of this writing, this format is experimental; nonetheless, it\u2019s quite exciting to see how this format would be adopted in the future on the web.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Iconvg\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/iconvg.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/daisyui.com\/\">DaisyUI<\/a><\/h2>\n<p>A UI kit built on top of Tailwind CSS. What\u2019s unique about DaisyUI is the theme collection. It provides a number of options to choose from as your UI persona besides the traditional dark and light theme.<\/p>\n<p>You can, for example, select the \u201cRetro\u201d theme to change the UI to old-looking colors or \u201cLuxury\u201d to make it more classy.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Daisy Ui\" height=\"463\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/daisy-ui.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mobilepalette.colorion.co\/\">Mobile Palette<\/a><\/h2>\n<p>If it\u2019s been hard to find the right color combination for your mobile app, this handy web application may help. Simply select the color base, it will automatically generate a nice color scheme for the mobile UI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mobile Plate Generator\" height=\"463\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/mobile-plate-generator.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/boringavatars.com\/\">Boring Avatars<\/a><\/h2>\n<p>As the name implies, this is a tool to <strong>create an avatar image<\/strong>, a boring one. The tool generates the avatar based on the combination of pattern, colors, and usernames.<\/p>\n<p>It provides <strong>6 types of appearances, 2 shapes, and 3 sizes<\/strong> to create an avatar. You can copy the generated SVG or use the URL, for example:<\/p>\n<pre>https:\/\/source.boringavatars.com\/marble\/120\/Jon%20Doe?colors=264653,2a9d8f,e9c46a,f4a261,e76f51<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Boringavatars\" height=\"463\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/boringavatars.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.moneyphp.org\/en\/stable\/\">MoneyPHP<\/a><\/h2>\n<p>Dealing with currency can be tricky, and this is a PHP library that aims to make it easy. It allows you to do <strong>addition, subtraction, and comparison<\/strong>. You can do advanced stuff like calculating the ratio, converting currency, and formatting.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Money Php\" height=\"463\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/money-php.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/n8n-io\/n8n\">N8N<\/a><\/h2>\n<p>A tool for <strong>workflow automation without needing to code<\/strong>. It can connect to many services like Github, Slack, Google Spreadsheet, Dropbox, and many more. A great alternative to IFTTT and Zapier, N8N is <strong>free and open-source<\/strong>, and you can run it on your own server.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"N8n\" height=\"438\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/n8n.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.30secondsofcode.org\/\">30 Seconds of Code<\/a><\/h2>\n<p>A collection of <strong>tips and code snippets for some common problems in programming<\/strong> and web development. It covers JavaScript, Python, React, and Git.<\/p>\n<p>In the collection, for example, you can find several examples of algorithmic operations, <strong>math, dealing with Browser APIs, arrays, objects<\/strong>, and some practical examples like converting JSON to CSV.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"30secondsofcode\" height=\"438\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/30secondsofcode.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hashids.org\/\">HashID<\/a><\/h2>\n<p>A library that allows you to <strong>generate short, unique, and non-sequential ID<\/strong>. The ID would be like <code>Vz5prKnEoo<\/code>. It looks similar to an ID of a Youtube video. The library is available in many different languages including PHP, JavaScript, Ruby, Python, Swift, and many more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Hashids\" height=\"438\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/hashids.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/devtoolstips.org\/\">DevToolsTips<\/a><\/h2>\n<p>Another useful site to bookmark, DevToolTips contains a lot of <strong>tips and tricks to use the DevTools<\/strong>. It covers DevTools of Chrome, Firefox, Edge, and even Safari. I\u2019m sure you\u2019ll find little tricks that you\u2019ve never known before.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Devtoolstips\" height=\"438\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/devtoolstips.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/Roave\/no-leaks\">roave\/no-leaks<\/a><\/h2>\n<p>A PHPUnit plugin to detect memory leaks in your tested codes. A great tool to make sure that your code won\u2019t cause to exhaust memory when deployed to production.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"No Leaks\" height=\"438\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/no-leaks.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=aJ9yZgZbDB0\">Coffee with Charli and Shopify: Scaling Systems<\/a><\/h2>\n<p>An interesting talk in Coffee with Charli episode by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.figma.com\/\">Figma<\/a>. This episode gives you a glimpse of <strong>how Shopify creates a design system that scales<\/strong> and handles the challenges.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Shopify Scaling Systems\" height=\"438\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/shopify-scaling-systems.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/six-ddc\/plow\">Plow<\/a><\/h2>\n<p>A performant CLI for benchmarking web requests. It comes with a web UI and terminal that you can use to <strong>see how the benchmark progress in real-time<\/strong>.<\/p>\n<p>The CLI accepts a number of options to emulate the request for the benchmark such as the number of <strong>concurrencies, the number of requests<\/strong>, duration, and the method request.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Plow\" height=\"438\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/plow.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2>Tinywind<\/h2>\n<p>A small <strong>collection of components built with built-in Tailwind CSS<\/strong> classes. Each component is simple, with no additional or superfluous styles. It\u2019s showing a great example of what we can build with Utility classes and HTML.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Tinywind\" height=\"438\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/tinywind.jpg\" width=\"750\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>As we move through 2021, the web development community continues to innovate and create amazing tools to help us build better websites and applications. This month\u2019s collection brings together some truly impressive resources that caught our attention. Without further ado, let\u2019s see the full list. Awesome CLI Apps Command Line Interface (CLI) is powerful, fast,&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 (June 2021) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we move through 2021, the web development community continues to innovate and create amazing tools to help us build better websites and applications.\" \/>\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-06-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 (June 2021)\" \/>\n<meta property=\"og:description\" content=\"As we move through 2021, the web development community continues to innovate and create amazing tools to help us build better websites and applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-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-06-30T13:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:40:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/awesome-cli-apps.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-06-2021\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (June 2021)\",\"datePublished\":\"2021-06-30T13:01:34+00:00\",\"dateModified\":\"2025-04-21T10:40:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/\"},\"wordCount\":1021,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2021\\\/awesome-cli-apps.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (June 2021) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2021\\\/awesome-cli-apps.jpg\",\"datePublished\":\"2021-06-30T13:01:34+00:00\",\"dateModified\":\"2025-04-21T10:40:53+00:00\",\"description\":\"As we move through 2021, the web development community continues to innovate and create amazing tools to help us build better websites and applications.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2021\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2021\\\/awesome-cli-apps.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2021\\\/awesome-cli-apps.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-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 (June 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 (June 2021) - Hongkiat","description":"As we move through 2021, the web development community continues to innovate and create amazing tools to help us build better websites and applications.","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-06-2021\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (June 2021)","og_description":"As we move through 2021, the web development community continues to innovate and create amazing tools to help us build better websites and applications.","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-06-30T13:01:34+00:00","article_modified_time":"2025-04-21T10:40:53+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/awesome-cli-apps.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-06-2021\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (June 2021)","datePublished":"2021-06-30T13:01:34+00:00","dateModified":"2025-04-21T10:40:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/"},"wordCount":1021,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/awesome-cli-apps.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/","name":"Fresh Resources for Web Designers and Developers (June 2021) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/awesome-cli-apps.jpg","datePublished":"2021-06-30T13:01:34+00:00","dateModified":"2025-04-21T10:40:53+00:00","description":"As we move through 2021, the web development community continues to innovate and create amazing tools to help us build better websites and applications.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/awesome-cli-apps.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2021\/awesome-cli-apps.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-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 (June 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-eux","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55709","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=55709"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55709\/revisions"}],"predecessor-version":[{"id":73939,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55709\/revisions\/73939"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=55709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=55709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=55709"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=55709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}