{"id":56188,"date":"2021-07-28T21:01:32","date_gmt":"2021-07-28T13:01:32","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=56188"},"modified":"2021-07-26T20:16:26","modified_gmt":"2021-07-26T12:16:26","slug":"designers-developers-monthly-07-2021","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (July 2021)"},"content":{"rendered":"<p>As a web developer, there\u2019s always something you can learn every day and grow. You can learn design principles, user experience, user interface design, and user behaviors through analytics data. Or, you can branch yourself into servers such as installing and running a server package yourself.<\/p>\n<p>In this round of the series, we\u2019ve put together different resources from tools, podcasts, articles, and a lot more where you can learn multiple disciplines beyond just creating the website itself. Let\u2019s get started!<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2021\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (June 2021)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (June 2021)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-06-2021.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-55709 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-06-2021.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Fresh Resources for Web Designers and Developers (June 2021)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs we move through 2021, the web development community continues to innovate and create amazing tools to help...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a target=\"_blank\" href=\"https:\/\/ui.glass\/generator\/\" rel=\"noopener\">UI Glass Generator<\/a><\/h2>\n<p>Glassy user-interface is making a comeback. We can see it now is an integral part of the new interface design in Windows, and macOS. Thanks to the latest CSS feature, we can also adopt a similar interface for the website, and this tool will make it even easier and quicker to create one.<\/p>\n<p>You can <strong>use the GUI to adjust the color, opacity, and background of your website<\/strong> and it will generate the CSS that you can copy and paste.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/glass-ui-generator.jpg\" alt=\"UI Glass Generator\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=sdras.fortnite-vscode-theme\" rel=\"noopener\">VS Code Fortnite Theme<\/a><\/h2>\n<p>A <strong>Fortnite-inspired theme for Visual Studio Code<\/strong>. It comes with some special effects by enabling the <strong>Fortnite: Enable Legendary<\/strong> option. If you enjoy the game and the flares while coding, this VSCode theme is for you.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/vscode-theme-fortnite.jpg\" alt=\"VS Code Fortnith Theme\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.makerstations.io\/\" rel=\"noopener\">MakerStations<\/a><\/h2>\n<p>This site collects <strong>desk setups from various professionals<\/strong> (designers, developers, writers, etc.). Not only that it presents these for inspiration but also dig into the owner\u2019s personalities and <strong>reasons behind the setup<\/strong>.<\/p>\n<p>If you\u2019re currently looking inpiration for your new desk setup, look no further. You\u2019ll surely find some good ones in <strong>MakerStations<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/maker-stations.jpg\" alt=\"MakerStations\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/react-spectrum.adobe.com\/react-aria\/index.html\" rel=\"noopener\">React.js ARIA<\/a><\/h2>\n<p>A collection of React.js functions that helps in <strong>creating accessible UI components and design systems<\/strong> for your web application.<\/p>\n<p>It\u2019s designed to deliver the best possible interactive experience for users whether they\u2019re using a keyboard, mouse, or assistive device. It\u2019s a great initiative from Adobe for a better web.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/adobe-spectrum-react-aria.jpg\" alt=\"React.js ARIA\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/testing-library\/react-hooks-testing-library\" rel=\"noopener\">React Hooks Testing Library<\/a><\/h2>\n<p>Hooks is a concept in React.js for creating components less rigid and we can <strong>create custom Hooks aside from the ones provided built-in<\/strong>.<\/p>\n<p>Now if you have come across a situation where you\u2019d like to perform an <strong>automated test for the custom Hook<\/strong>, this library will come in handy. It provides the pattern to test your custom React.js Hook as close as when it\u2019s used within a real component.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/react-hooks-testing-library.jpg\" alt=\"React Hooks Testing Library\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/bndw\/wifi-card\" rel=\"noopener\">WiFi Card<\/a><\/h2>\n<p>This tool makes <strong>sharing WiFi credentials more convenient using QR code<\/strong>. You simply need to enter the WiFi name and the password. Print and attach it somewhere in the room.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/wificard.jpg\" alt=\"ifi Card\" width=\"688\" height=\"461\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/umami-software\/umami\" rel=\"noopener\">Umami<\/a><\/h2>\n<p>Umami is an open-source application to collect analytic data. It\u2019s easy to install in your own server or VPS with minimum requirements. You only <strong>need Node.js and MySQL<\/strong> (or PostgreSQL). It\u2019s a great application if you\u2019re looking for an <strong>alternative to Google Analytics<\/strong> where you own and control all the data.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/umami.jpg\" alt=\"Umami\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/pod.link\/thecsspodcast\" rel=\"noopener nofollow\">The CSS Podcast<\/a><\/h2>\n<p>Run by Google Developer Advocates duo, Una Kravets and Adam Argyle, you will learn so much about CSS; from <strong>practical tips, accessibility, performance, and much more<\/strong>. It\u2019s one of the best quality sources to learn CSS and web development in general.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/thecsspodcast.jpg\" alt=\"The CSS Podcast\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/fosscord\/fosscord\" rel=\"noopener\">Fosscard<\/a><\/h2>\n<p><strong>Discord<\/strong> is rising as an <strong>interactive communication tool for communities<\/strong>. You can join various groups including <strong>groups for web development and programming<\/strong>, to chat with the community or make a voice or video call.<\/p>\n<p>Discord is a SaaS though. If you\u2019re looking for a self-host where you can have more control, Fosscard can be a good alternative.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/fosscord.jpg\" alt=\"Fosscard\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/jupeter\/clean-code-php\" rel=\"noopener\">Clean Code PHP<\/a><\/h2>\n<p>A collection of <strong>advice to write PHP codes that are readable, reusable, and most importantly maintainable<\/strong>. It\u2019s a great resource where you can learn some pracatical tips; such as how to best name variables, how to structure conditional block, and how to name a function and the arguments, to name a few.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/clean-code-php.jpg\" alt=\"Clean Code PHP\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/docs.minicli.dev\" rel=\"noopener\">MiniCLI<\/a><\/h2>\n<p>A tiny <strong>PHP library to build Command Line Interface (CLI)<\/strong>. It provides the base structure to register your custom command lines as well as the helper and utility functions to handle user input and the output. A great starting for creating a PHP-based command line.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/minicli.jpg\" alt=\"MiniCLI\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/uniformcss.com\/\" rel=\"noopener nofollow\">UniformCSS<\/a><\/h2>\n<p>A <strong>generator and utility-first CSS framework built with Sass<\/strong>. It\u2019s a mix of the good of both worlds in which you can leverage the flexibility of utility-first workflow while still have the power of <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/\" rel=\"noopener\">Sass such as the variables, mixins, and functions<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/uniform-css.jpg\" alt=\"UniformCSS\" width=\"750\" height=\"455\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/layout.bradwoods.io\/\" rel=\"noopener\">Layout Generator<\/a><\/h2>\n<p>An <strong>online tool to generates a base layout for your website<\/strong>. It utilizes Grid for the layout and provides GUI to generate the layout. For example, you can <strong>set the number of columns, rows, and alignments<\/strong>. I find it\u2019s a more intuitive way to generate a layout with <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-module\/\" rel=\"noopener\">CSS Grid<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/css-layout-generator.jpg\" alt=\"Layout Generator\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/fower.vercel.app\/\" rel=\"noopener\">Fower<\/a><\/h2>\n<p>Utility-first CSS methodology is getting quite popular. It offers flexibility to be scaleable on small or large websites. If you\u2019re into writing <a target=\"_blank\" href=\"https:\/\/cssinjs.org\/?v=v10.7.1\" rel=\"noopener\">CSS-in-JS<\/a> for your web application and lean-to a <strong>utility-first CSS approach<\/strong> to compose the styles, you might be interested in trying this library.<\/p>\n<p>Fower is <strong>framework-agnostic<\/strong> so you can apply it in various frameworks such as React.js, Vue.js, and Svelt, or plain JavaScript.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/fower.jpg\" alt=\"Fower\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/rtl.wtf\/\" rel=\"noopener\">RTL WTF<\/a><\/h2>\n<p>A great source to learn tips, use cases, and best practices to <strong>build a website for the right-to-left writing direction such as Arabic and Hebrew<\/strong>. This website should be on your bookmark.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/rtl-wtf.jpg\" alt=\"RTL WTF\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/iamhosseindhv\/notistack\" rel=\"noopener\">Notistack<\/a><\/h2>\n<p>A React.js library that <strong>makes it easy to display \u201ctoast\u201d notifications on your web app<\/strong>. It\u2019s highly configurable that allows you to present the best possible user experience.<\/p>\n<p>To name a few, you can <strong>set the number of maximum notifications<\/strong>, prevent duplicates by not showing notifications with the same message, and set the type of transition.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/notistack.jpg\" alt=\"RTL WTF\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/kopia.io\/\" rel=\"noopener\">Kopio<\/a><\/h2>\n<p>An <strong>open-source server application that you can use to run and manage backups in your own cloud servers<\/strong>. Kopia also provides a nice desktop application that runs on Windows, macOS, and Linux where you can manage it conveniently such as to create a snapshot and restore the snapshot.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/kopia.jpg\" alt=\"Kopio\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-component-devtools\/gdniinfdlmmmjpnhgnkmfpffipenjljo\/\" rel=\"noopener\">Web Components DevTools<\/a><\/h2>\n<p>Web Component allows you to <strong>create a custom component that the browser can understand and render<\/strong>. If you\u2019ve come across to require build custom Web Component, you will be needing this Chrome extension that allows you to debug the Web Component on the browser.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/web-component-devtools.jpg\" alt=\"Web Components DevTools\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/fluid-typography.netlify.app\/\" rel=\"noopener\">Fluid Typography<\/a><\/h2>\n<p>A handy little tool to <strong>create text size that scales with the window size<\/strong>. The tool helps you generate the style that allows the text on your website to look great and proportional on any screen.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/fluid-typography.jpg\" alt=\"Fluid Typography\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/million.js.org\/\" rel=\"noopener\">MillionJS<\/a><\/h2>\n<p>A tiny JavaScript library (less than 1KB) to create an <strong>interactive user interface<\/strong> for your website. It implements Virtual DOM behind the scene and some unique approaches that make it fast to render on the browser.<\/p>\n<p>I think it can be a <strong>good alternative to some more established frameworks like React.js and Vue.js<\/strong>, especially if you just need to just the bare of Virtual DOM.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/millionjs.jpg\" alt=\"MillionJS\" width=\"750\" height=\"480\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>As a web developer, there\u2019s always something you can learn every day and grow. You can learn design principles, user experience, user interface design, and user behaviors through analytics data. Or, you can branch yourself into servers such as installing and running a server package yourself. In this round of the series, we\u2019ve put together&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 (July 2021) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As a web developer, there&#039;s always something you can learn every day and grow. You can learn design principles, user experience, user interface design,\" \/>\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-07-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 (July 2021)\" \/>\n<meta property=\"og:description\" content=\"As a web developer, there&#039;s always something you can learn every day and grow. You can learn design principles, user experience, user interface design,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-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-07-28T13:01:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/glass-ui-generator.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (July 2021)\",\"datePublished\":\"2021-07-28T13:01:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/\"},\"wordCount\":1144,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2021\\\/glass-ui-generator.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (July 2021) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2021\\\/glass-ui-generator.jpg\",\"datePublished\":\"2021-07-28T13:01:32+00:00\",\"description\":\"As a web developer, there's always something you can learn every day and grow. You can learn design principles, user experience, user interface design,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2021\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2021\\\/glass-ui-generator.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2021\\\/glass-ui-generator.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-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 (July 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 (July 2021) - Hongkiat","description":"As a web developer, there's always something you can learn every day and grow. You can learn design principles, user experience, user interface design,","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-07-2021\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (July 2021)","og_description":"As a web developer, there's always something you can learn every day and grow. You can learn design principles, user experience, user interface design,","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-07-28T13:01:32+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/glass-ui-generator.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (July 2021)","datePublished":"2021-07-28T13:01:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/"},"wordCount":1144,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/glass-ui-generator.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/","name":"Fresh Resources for Web Designers and Developers (July 2021) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/glass-ui-generator.jpg","datePublished":"2021-07-28T13:01:32+00:00","description":"As a web developer, there's always something you can learn every day and grow. You can learn design principles, user experience, user interface design,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2021\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/glass-ui-generator.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2021\/glass-ui-generator.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-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 (July 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-eCg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/56188","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=56188"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/56188\/revisions"}],"predecessor-version":[{"id":58739,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/56188\/revisions\/58739"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=56188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=56188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=56188"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=56188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}