{"id":60914,"date":"2022-07-30T18:01:09","date_gmt":"2022-07-30T10:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=60914"},"modified":"2022-07-30T16:08:38","modified_gmt":"2022-07-30T08:08:38","slug":"designers-developers-monthly-07-2022","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (July 2022)"},"content":{"rendered":"<p>In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month\u2019s round of the series.<\/p>\n<p>If you\u2019re a <a href=\"https:\/\/www.hongkiat.com\/blog\/full-stack-developer-requirement\/\">front-end developer<\/a>, I\u2019m sure you\u2019ll appreciate what we have on the list. This post features a new JavaScript runtime contending with <a target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/\" rel=\"noopener\">Node<\/a> and <a target=\"_blank\" href=\"https:\/\/deno.land\/\" rel=\"noopener\">Deno<\/a>, new libraries for state management, a new build system for JavaScript, and a lot more.<\/p>\n<p>Let\u2019s jump in to see the full list.<\/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-2022\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (June 2022)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (June 2022)<\/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-2022.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-60243 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-06-2022.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 2022)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tA web designer\/ developer should never run out of useful resources. So here we are with this month's...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a target=\"_blank\" href=\"https:\/\/bun.sh\/\" rel=\"noopener\">Bun<\/a><\/h2>\n<p>Bun is a <strong>new JavaScript runtime similar to Node and Deno<\/strong> that allows you to run JavaScript applications on the server. Bun implements most Node APIs as well as Web APIs, so we get access to the <a target=\"_blank\" href=\"https:\/\/nodejs.org\/api\/fs.html\" rel=\"noopener\">filesystem<\/a>, <a target=\"_blank\" href=\"https:\/\/nodejs.org\/api\/path.html\" rel=\"noopener\">path<\/a>, <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\" rel=\"noopener\">Fetch API<\/a>, and <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebSocket\" rel=\"noopener\">Websocket<\/a>.<\/p>\n<p>Bun is currently in beta, but it promises on performance and provides better tools that would help developers be more productive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bun.jpg\" alt=\"bun javascript runtime\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/jotai.org\/\" rel=\"noopener\">Jotai<\/a><\/h2>\n<p>Jotai is a <strong>state manager for React.js applications with a focus on simplicity<\/strong>. It aims to solve the <a target=\"_blank\" href=\"https:\/\/stackoverflow.com\/questions\/66462686\/react-re-render-issue-how-can-i-stop-re-render\" rel=\"noopener\">common re-render issues in React.js component<\/a>, plus, it\u2019s easy to implement. You can use it as a replacement of <a target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/hooks-state.html\" rel=\"noopener\">React State Hook<\/a> function, and <strong>scale it up to build a more complex application<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/jotai.jpg\" alt=\"Jotai\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/rematchjs.org\/\" rel=\"noopener\">Rematch<\/a><\/h2>\n<p>Rematch is a <strong>state manager adopting similar to Redux<\/strong>, except without the complexity. It works out of the box, without additional configuration. It also works with any framework; not just React.js but also Vue.js and Angular, and it\u2019s only as small as <code>2kb<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/rematch.jpg\" alt=\"Rematch\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/mattreid1\/baojs\" rel=\"noopener\">Bao.js<\/a><\/h2>\n<p>Bao is a new <strong>framework to create web applications<\/strong>. Built on top of <a target=\"_blank\" href=\"https:\/\/bun.sh\/\" rel=\"noopener\">Bun<\/a>, it\u2019s similar to one of the popular frameworks, <a target=\"_blank\" href=\"https:\/\/expressjs.com\/\" rel=\"noopener\">Express.js<\/a>. In fact, it is also modeled after it which makes it familiar and <strong>easy to switch over from Express.js<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bao.jpg\" alt=\"Bao.js\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.autoregex.xyz\/\" rel=\"noopener\">Autoregex<\/a><\/h2>\n<p>Regex is a special language that\u2019s not easy to understand because of the complex syntax. And here\u2019s where Autoregex comes in handy. It <strong>translates back the Regex into a human readable sentence<\/strong> which also makes it a great learning tool to understand RegEx.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/auto-regex.jpg\" alt=\"Autoregex\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/godly.website\/\" rel=\"noopener\">Godly Website<\/a><\/h2>\n<p>If you feel that websites today look all the same, you need to check out Godly Website. It <strong>collects a lot of wonderful websites with unconventional designs<\/strong>. A great place to find design inspiration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/godly-websites.jpg\" alt=\"Godly Website\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/moonrepo.dev\/\" rel=\"noopener\">Moonrepo<\/a><\/h2>\n<p>Moonrepo makes building JavaScript applications much more manageable. It provides a set of tools that can help you <strong>maintain consistency in your project configuration, ensure the correct version of dependency is installed<\/strong>, and offers utilities that make your project build more efficient and productive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/moonrepo.jpg\" alt=\"Moonrepo\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/barebones.wearethreebears.co.uk\/\" rel=\"noopener\">Barebones<\/a><\/h2>\n<p>A collection of Vue.js components, and as the name implies, they are basic components. They carry functionalities but do not comes with design constraints so it\u2019s up to you how you\u2019d want to style it. It\u2019s a great <strong>library as starting point for your website application UI with Vue.js<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/barebones-components.jpg\" alt=\"Barebones\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/wails.io\/\" rel=\"noopener nofollow\">Wails<\/a><\/h2>\n<p>Wails is a <strong>framework that allows you to build a Desktop application with <a target=\"_blank\" href=\"https:\/\/go.dev\/\" rel=\"noopener\">Go<\/a><\/strong>. It compiles and handles native elements such as  Windows, Menus, and Dialogs that it <strong>runs as good as native-built applications<\/strong>. Unlike Electron, Wails does not embed browsers a browser in the application, so it will run much faster.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/wails.jpg\" alt=\"Wails\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/Kristories\/awesome-guidelines\" rel=\"noopener\">Awesome Guidelines<\/a><\/h2>\n<p>Awesome Guidelines is a collection of high-quality coding standards of various languages from various sources and companies. You can find <strong>coding standards for C, Go, JavaScript, Kotlin, PHP, Python<\/strong>, and a lot more. If you\u2019d like to learn what\u2019s the coding standard of NASA and Google, check it out!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/awsome-guidelines.jpg\" alt=\"Awesome Guidelines\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/jesseduffield\/lazygit\" rel=\"noopener\">LazyGit<\/a><\/h2>\n<p><strong>LazyGit<\/strong> is a Git application that adds UI inside the terminal. Similar to a Desktop application, it allows you to see current status, staged files, diff, stash, and many more. It\u2019s a perfect tool for those <strong>working with Terminal<\/strong> who would like some convenience.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/lazygit.jpg\" alt=\"LazyGit\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/roots\/bud\" rel=\"noopener\">Bud<\/a><\/h2>\n<p>Bud is a <strong>JavaScript build framework<\/strong>. It combines all the good things from Symfony Encore and Laravel Mix and is pre-configured for all the common needs like Babel, React, PostCSS, Sass, and TypeScript.<\/p>\n<p>It\u2019s also a great framework for <strong>WordPress developers with <code>@roots\/bud-preset-wordpress<\/code> package<\/strong> that you can install to build a WordPress theme or plugin.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bud.jpg\" alt=\"Bud\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/htmx.org\/\" rel=\"noopener\">HTMX<\/a><\/h2>\n<p>HTMX is a <strong>supercharged HTML<\/strong>. It provides convenient access to AJAX, CSS Transitions, and WebSockets just through the HTML attributes. This allows you to <strong>build a fairly dynamic UI with simple HTML<\/strong> such as creating infinite scroll, tabs, lazy loading, and <a target=\"_blank\" href=\"https:\/\/htmx.org\/examples\/\" rel=\"noopener\">a lot more<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/htmx.jpg\" alt=\"HTMX\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/frappe\/charts\" rel=\"noopener\">Frappe Charts<\/a><\/h2>\n<p>A simple, <strong>lightweight, JavaScript library to create charts<\/strong>. It supports several different type of charts including the Pie, the Donut, and <a target=\"_blank\" href=\"https:\/\/frappe.io\/charts\/docs\/basic\/heatmap\" rel=\"noopener\">the Heatmap<\/a> and renders the chart in SVG which makes it responsive and look sharp.<\/p>\n<p>You can <strong>use the library as an NPM module<\/strong> or simply load the JavaScript file on the page. It just works.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/frappe-charts.jpg\" alt=\"Frappe Charts\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/nextui.org\/\" rel=\"noopener\">NextUI<\/a><\/h2>\n<p>A collection of beautiful UI components to <strong>build modern applications with React.js<\/strong>. You can find common components required for an application like the inputs, buttons, pagination, table, and grid. If you want to build an application that instantly looks good, NextUI is what you might be looking for.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/nextui.jpg\" alt=\"NextUI\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/elastic\/eui\" rel=\"noopener\">Elastic UI<\/a><\/h2>\n<p>Elastic UI is full of inspiration. It\u2019s the <strong>design system library from Elastic<\/strong>. Even though, you might not be able to apply this library on to your own application, you can definitely learn how all these components are used to build a great popular application like <a target=\"_blank\" href=\"https:\/\/www.elastic.co\/elastic-stack\/\" rel=\"noopener\">Elastic Search<\/a>, Kibana, and APM.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/elastic-ui.jpg\" alt=\"Elastic UI\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/vuesax.com\/\" rel=\"noopener\">VueSax<\/a><\/h2>\n<p>A <strong>UI library built for Vue.js<\/strong>. It has buttons, input, table, and all base component for a website. Built from the ground up, Vuesax provides each component with customizability that allows your web application to stay unique to your style.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/vuesax.jpg\" alt=\"VueSax\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/create-block-theme\/\" rel=\"noopener\">Create Block Theme<\/a><\/h2>\n<p>It\u2019s a new official <strong>plugin from WordPress that allows you to create a block theme<\/strong>. You can design your own theme using <a target=\"_blank\" href=\"https:\/\/yoast.com\/full-site-editing-in-wordpress\/\" rel=\"noopener\">full-site editing (FSE)<\/a> and export it as a theme that you can install on any other WordPress site. I think this is going to change the game in the WordPress theme fields.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/create-block-theme.jpg\" alt=\"Create Block Theme\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/colorjs.io\/\" rel=\"noopener\">Colors.js<\/a><\/h2>\n<p>Color.js is a handy library that allows you to do all things colors with JavaScript. You can use it to read color and create color objects. You can even use it to manipulate colors such as <strong>changing the color, lightening it, and even converting color format<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/color.jpg\" alt=\"Colors.js\" width=\"750\" height=\"462\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/blogs\/2022\/07\/07\/vscode-server\" rel=\"noopener\">VS Code Server<\/a><\/h2>\n<p>VS Code is a great code editor that is really popular among developers. You can run and use VS Code in Windows, macOS, and Linux\u2026 But what if we can run it in our own server.<\/p>\n<p>Microsoft has recently opened up this possibility with VS Code Server allowing you to install the VS Code backend services which host extensions, the terminal, debugging, and then access it through <a target=\"_blank\" href=\"http:\/\/vscode.dev\/\" rel=\"noopener\">vscode.dev<\/a>. It\u2019s more or less the <strong>DIY version of running your own <a target=\"_blank\" href=\"https:\/\/github.com\/features\/codespaces\" rel=\"noopener\">Github Codespace<\/a><\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/code-server.jpg\" alt=\"VS Code Server\" width=\"750\" height=\"480\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month\u2019s round of the series. If you\u2019re a front-end developer, I\u2019m sure you\u2019ll appreciate what we have on the list. This post features a new JavaScript runtime contending with&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[352],"tags":[2539],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (July 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month&#039;s round of the\" \/>\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-2022\/\" \/>\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 2022)\" \/>\n<meta property=\"og:description\" content=\"In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month&#039;s round of the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/\" \/>\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=\"2022-07-30T10:01:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bun.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<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-2022\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (July 2022)\",\"datePublished\":\"2022-07-30T10:01:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/\"},\"wordCount\":1146,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2022\\\/bun.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-2022\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (July 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2022\\\/bun.jpg\",\"datePublished\":\"2022-07-30T10:01:09+00:00\",\"description\":\"In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month's round of the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2022\\\/bun.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2022\\\/bun.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2022\\\/#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 2022)\"}]},{\"@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 2022) - Hongkiat","description":"In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month's round of the","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-2022\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (July 2022)","og_description":"In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month's round of the","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-07-30T10:01:09+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bun.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (July 2022)","datePublished":"2022-07-30T10:01:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/"},"wordCount":1146,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bun.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-2022\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/","name":"Fresh Resources for Web Designers and Developers (July 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bun.jpg","datePublished":"2022-07-30T10:01:09+00:00","description":"In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month's round of the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bun.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2022\/bun.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2022\/#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 2022)"}]},{"@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-fQu","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/60914","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=60914"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/60914\/revisions"}],"predecessor-version":[{"id":60915,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/60914\/revisions\/60915"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=60914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=60914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=60914"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=60914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}