{"id":51930,"date":"2020-07-09T21:18:55","date_gmt":"2020-07-09T13:18:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=51930"},"modified":"2025-04-21T17:24:38","modified_gmt":"2025-04-21T09:24:38","slug":"designers-developers-monthly-07-2020","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (July 2020)"},"content":{"rendered":"<p>As we enter the second half of 2020, the web development landscape continues to evolve at an exciting pace. This month\u2019s collection showcases some remarkable tools and resources that have emerged from the vibrant developer community.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-51930-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-51930-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.youtube.com\/watch?v=AQqFZ5t8uNc\">Core Web Vitals<\/a><\/h2>\n<p>An overview of Google latest performance metrics for the Web called <strong>Core Web Vitals<\/strong>. The Core Web Vitals feature metrics such as as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/optimize-lcp\/\">Largest Contentful Paint (LCP)<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/optimize-fid\/\">First Input Delay (FID)<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/cls\/\">Cumulative Layout Shift (CLS)<\/a> which revolve around the user experience of the site rather than just the download speed.<\/p>\n<p>It is said that this Core Web Vitals metric will also be <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.searchenginejournal.com\/googles-core-web-vitals-ranking-signal\/370719\/\">part of the Google ranking signal<\/a> so you might want to keep up.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Core Web Vitals\" height=\"405\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/core-web-vitals.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cli.github.com\/\">Github CLI<\/a><\/h2>\n<p>A CLI to use Github. This means that you can have commands to use Github in Terminal to do what you\u2019d normally do on the Github site such as creating a Pull Request (PR), checking the PR status, list and view issues on a repository, and a lot more.<\/p>\n<p>The Github CLI tool would be very handy and could streamline workflows for many developers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Github CLI\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/github-cli.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2>Tellina<\/h2>\n<p>A site where you can search a collection of handy commands for some common tasks in Terminal with natural language. You can find from a simple command such as creating a directory and listing files on a directory to complicated ones like showing the third line of each file in a directory that contains an odd number of lines.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Tellina\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/kirin.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bundlers.tooling.report\/\">Bundlers Tooling Report<\/a><\/h2>\n<p>A comprehensive feautures and capabilities comparison of bundlers: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/\">Webpack<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rollupjs.org\/guide\/en\/\">RollUp<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/parceljs.org\/\">Parcel<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/browserify.org\/\">Browserify<\/a>. The list can help determine which bundler will suit your needs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bundlers Tooling Report\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/bundler-tooling-report.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/vitejs\/vite\">Vite.js<\/a><\/h2>\n<p>Vite.js is Evan You \u2013 the Vue.js creator\u2019s new initiative that aims to make web development environment and build tool easy without juggling too much on the configuration.<\/p>\n<p>Vite.js comes with some capabilities right out-of-the-box, including <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/vitejs\/vite#hot-module-replacement\">Hot Module Replacement<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/vitejs\/vite#typescript\">TypeScript support<\/a>, PostCSS and CSS Pre-processors, and HTTPS\/2.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vite JS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/vitejs.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reakit.io\/\">Reakit<\/a><\/h2>\n<p>A framework to build rich web applications with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">React.js<\/a>. Apart from being fast and customizable, Reackit follows strictly the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/aria\/\">WAI-ARIA<\/a> specification which <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reakit.io\/docs\/accessibility\/\">makes it accessible<\/a> right out-of-the-box and is distinct to similar frameworks.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Reakit\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/reakit.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/espanso.org\/\">Espanso<\/a><\/h2>\n<p>Espanso is a free cross-platform text expander application. It allows you to type code or text faster by wrapping it to a text shortcut. You can also run custom script with a shortcut instead of just outputting plain text.<\/p>\n<p>This makes the app more powerful for power users like developers. This can be a good alternative to the TextExpander app.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Espanso\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/espanso.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/testing-playground.com\/\">Testing Playground<\/a><\/h2>\n<p>A simple online playground to get your hands on Document Object Model (DOM) testing. The playground provides direct feedback when adding and removing specific attributes, labels or aria labels from the elements.<\/p>\n<p>This allows you to get started with testing quickly and easily before implementing it on the test suite of your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Testing Playground\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/testing-playground.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/GoogleChromeLabs\/wordpressdev\">WordPress Lando Dev<\/a><\/h2>\n<p>A preconfigured WordPress development environment based on <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lando.dev\/\">Lando<\/a><\/strong>. Developed by the WordPress team from Google, you can use it for core, plugin, and theme development.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WordPress Lando Dev\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/wp-lando-dev.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">wp-env<\/a><\/h2>\n<p>Alternatively, you can use this NPM package. Built by the WordPress team and numerous contributors, the <strong>wp-env<\/strong> provides an easy way to spin up a localhost environment for core, plugins or theme development with Docker.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Wp Env\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/wp-env.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/GoogleForCreators\/web-stories-wp\">Web Stories for WordPress<\/a><\/h2>\n<p>Web Stories is part of Google AMP initiative aimed at providing a beautiful and more engaging experience of web animation and tappable interaction. It enables you to put images, audio, videos, GIFs, and animation.<\/p>\n<p>You can find some live examples of Web Stories from big publisher like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www-usatoday-com.cdn.ampproject.org\/c\/s\/www.usatoday.com\/amp-stories\/beyonce-rule-the-world\/\">USA Today<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www-wired-com.cdn.ampproject.org\/c\/s\/www.wired.com\/amp-stories\/space-photos-of-the-week-111817\/\">WIRED<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/edition-cnn-com.cdn.ampproject.org\/c\/s\/edition.cnn.com\/ampstories\/world\/protecting-the-antarctic-a-journey-to-a-continent-in-distress\">CNN<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Web Stories For WordPress\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/wp-lando-dev.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/ubersuggest-seo-and-keywo\/nmpgaoofmjlimabncmnmnopjabbflegf\">UberSuggest Chrome Extension<\/a><\/h2>\n<p>UberSuggest is one of the popular tools for keyword research. It\u2019s comprehensive and best of all, it\u2019s free.<\/p>\n<p>You can install this extension in Chrome to get immediate output from UberSuggest on Google <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.wordstream.com\/serp\">SERP<\/a>. This allows you to have a more streamlined workflow while performing keyword research.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"UberSuggest Chrome Extension\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/ubersuggest-chrome.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=GitHub.github-vscode-theme\">Github VSCode Theme<\/a><\/h2>\n<p>An official Github theme from Github. It provides two options of themes: Dark and Light. While you might have heard that many web developers mostly opt for a dark theme for their code editor, the light theme from Github is one of the nicest looking.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Github VSCode Theme\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/github-vscode-theme.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/tldr-pages\/tldr\">TLDR Pages<\/a><\/h2>\n<p>TLDR is a utility CLI that aims to make the traditional manual page (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Man_page\">Man Page<\/a>) of command line tools commonly available in UNIX system such as e.g. <code>stat<\/code>, <code>sed<\/code>, and <code>ping<\/code> friendlier. It provides simpler descriptor, and most logical order of the parameters along with an example of the usage.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"TLDR Pages\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/tldr-pages.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/VSCodium\/vscodium\">VSCodium<\/a><\/h2>\n<p>VSCodium is a community intiative to build <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a> without the telemetry and tracking bits that send usage and personal data to Microsoft. It is cross-platform; you can use it in Windows, macOS, and Linux.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"VSCodium\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/vscodium.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chakra-ui.com\/\">Chakra UI<\/a><\/h2>\n<p>A collection of simple, modular, and accessible component library that provides the foundation to build React applications. <strong>Chakra UI<\/strong> is easily customizable, you can configure the font size, font family, breakpoints and everything will be adjusted accordingly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Chakra UI\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/chakra-ui.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/microsoft\/fluentui\">Fluent UI<\/a><\/h2>\n<p>Fluent UI is an attempt to consolidate design consistency across products. One of their initiatives is this collection of React-based components which you can use to build your own web application using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=vcBGj4R7Fo0\">the Fluent Design Language<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fluent UI\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/fluent-ui.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/tabler\/tabler\">Tabler<\/a><\/h2>\n<p>A template of ready-made components to create an admin panel with beautiful UI. Tabler code is HTML5 and CSS3, carefully crafted to comply with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/validator.w3.org\/\">W3C validation<\/a>, and works perfectly on Chrome, Firefox, Safari, Opera, Edge and mobile browsers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Tabler\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/tablerio.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/tanrax\/terminal-AdvancedNewFile\">Advanced New File<\/a><\/h2>\n<p>A CLI tool that adds advancement on creating directories and files that cannot be simply achieved with the built-in command like <code>mkdir<\/code>. With this, you can create directory recursively and multiple directories or files with just a single line of command. Pretty handy.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Advanced New File\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/terminal-advanced-new-file.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/simeg\/eureka\/\">Eureka<\/a><\/h2>\n<p>Eureka is a CLI tool to write note right from within Terminal with the editor of your choice such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.vim.org\/\">Vim<\/a> or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nano-editor.org\/\">Nano<\/a>, and then automatically save it to Git. A perfect tool for those who like to keep their workflow in Terminal.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Eureka\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/eureka.jpg\" width=\"720\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>As we enter the second half of 2020, the web development landscape continues to evolve at an exciting pace. This month\u2019s collection showcases some remarkable tools and resources that have emerged from the vibrant developer community. Core Web Vitals An overview of Google latest performance metrics for the Web called Core Web Vitals. The Core&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.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (July 2020) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we enter the second half of 2020, the web development landscape continues to evolve at an exciting pace. This month&#039;s collection showcases some\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-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 (July 2020)\" \/>\n<meta property=\"og:description\" content=\"As we enter the second half of 2020, the web development landscape continues to evolve at an exciting pace. This month&#039;s collection showcases some\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-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-07-09T13:18:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T09:24:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/core-web-vitals.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-07-2020\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (July 2020)\",\"datePublished\":\"2020-07-09T13:18:55+00:00\",\"dateModified\":\"2025-04-21T09:24:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/\"},\"wordCount\":1021,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2020\\\/core-web-vitals.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-2020\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (July 2020) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2020\\\/core-web-vitals.jpg\",\"datePublished\":\"2020-07-09T13:18:55+00:00\",\"dateModified\":\"2025-04-21T09:24:38+00:00\",\"description\":\"As we enter the second half of 2020, the web development landscape continues to evolve at an exciting pace. This month's collection showcases some\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2020\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2020\\\/core-web-vitals.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2020\\\/core-web-vitals.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-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 (July 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 (July 2020) - Hongkiat","description":"As we enter the second half of 2020, the web development landscape continues to evolve at an exciting pace. This month's collection showcases some","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (July 2020)","og_description":"As we enter the second half of 2020, the web development landscape continues to evolve at an exciting pace. This month's collection showcases some","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-07-09T13:18:55+00:00","article_modified_time":"2025-04-21T09:24:38+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/core-web-vitals.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-07-2020\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (July 2020)","datePublished":"2020-07-09T13:18:55+00:00","dateModified":"2025-04-21T09:24:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/"},"wordCount":1021,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/core-web-vitals.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-2020\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/","name":"Fresh Resources for Web Designers and Developers (July 2020) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/core-web-vitals.jpg","datePublished":"2020-07-09T13:18:55+00:00","dateModified":"2025-04-21T09:24:38+00:00","description":"As we enter the second half of 2020, the web development landscape continues to evolve at an exciting pace. This month's collection showcases some","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2020\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/core-web-vitals.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2020\/core-web-vitals.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-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 (July 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-dvA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/51930","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=51930"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/51930\/revisions"}],"predecessor-version":[{"id":73803,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/51930\/revisions\/73803"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=51930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=51930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=51930"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=51930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}