{"id":60243,"date":"2022-06-28T21:01:27","date_gmt":"2022-06-28T13:01:27","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=60243"},"modified":"2022-07-03T19:49:06","modified_gmt":"2022-07-03T11:49:06","slug":"designers-developers-monthly-06-2022","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (June 2022)"},"content":{"rendered":"<p>A web designer\/ developer should never run out of <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/fresh-resources-developers\/\">useful resources<\/a>. So here we are with this month\u2019s installment of fresh resources. In this round of the series, we are going to cover tools and resources of different areas in <a href=\"https:\/\/www.hongkiat.com\/blog\/free-web-development-courses-beginners\/\">web development<\/a> including design, frontend, backend, testing, architecting, and <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-tools-for-designers\/\">accessibility<\/a>.<\/p>\n<p>So whether you work as a <a href=\"https:\/\/www.hongkiat.com\/blog\/fullstack-web-development\/\">full-stack developer<\/a>, or have expertise in a specific area, I\u2019m sure you\u2019d appreciate the resources that we have on the list. Shall we?<\/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-05-2022\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (May 2022)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (May 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-05-2022.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-59970 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-05-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 (May 2022)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs we move through 2022, the web development landscape continues to evolve with exciting new tools and resources....\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a target=\"_blank\" href=\"https:\/\/scribe.knuckles.wtf\/laravel\" rel=\"noopener\">Scribe<\/a><\/h2>\n<p>Documentation is critical to the success of the development process. Scribe helps to make it <strong>easier to create documentation for API endpoints<\/strong>. The documentation of each API can include the title, description, parameters, and more, which show the user how to use the API. Scribe is <strong>avaible for Laravel and Node.js<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/scribe.jpg\" alt=\"scribe\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/andybrewer.github.io\/mvp\/\" rel=\"noopener\">MVP.css<\/a><\/h2>\n<p>MVP.css is a CSS library containing <strong>minimalistic styles for all the HTML elements<\/strong>. It does not contain classes, framework, or anything else. You just need to <strong>add the CSS file in the HTML file<\/strong>, and you\u2019re all set. It\u2019s a perfect library, if you\u2019d like to get up and running a site quickly with some decent look.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/mvp-css.jpg\" alt=\"mvp-css\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/fresh.deno.dev\/\" rel=\"noopener\">Deno Fresh<\/a><\/h2>\n<p>Fresh is a <strong>framework to build web applications for <a target=\"_blank\" href=\"https:\/\/deno.land\" rel=\"noopener\">Deno<\/a><\/strong> with a focus on simplicity and reliability. The framework features key architecture to build a web application such as Routing, Data Fetching, and Styling. Fresh is in active development, and I\u2019m looking forward to see how it affects web development in the future.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/fresh.jpg\" alt=\"deno fresh\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/esbuild-kit\/tsx\" rel=\"noopener\">TSX<\/a><\/h2>\n<p>TSX is a <strong>command-line utility to execute Node.js applications<\/strong> with <a target=\"_blank\" href=\"https:\/\/www.typescriptlang.org\" rel=\"noopener\">TypeScript<\/a> and <a target=\"_blank\" href=\"https:\/\/hacks.mozilla.org\/2018\/03\/es-modules-a-cartoon-deep-dive\/\" rel=\"noopener\">ES Module (ESM)<\/a> files. It\u2019s using <a target=\"_blank\" href=\"https:\/\/esbuild.github.io\" rel=\"noopener\">esbuild<\/a> under the hood and supports new JavaScript extensions including <code>.cts<\/code> and <code>.mts<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/tsx.jpg\" alt=\"tsx command line utility\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/turbo-solid.erik.cat\/\" rel=\"noopener\">Turbo Solid<\/a><\/h2>\n<p><strong>Turbo Solid<\/strong> is a JavaScript library that solves a lot of common problems when handling HTTP requests in dynamic React.js applications such as <strong>handling duplicated requests, caching, and synchronization<\/strong>, etc. This library allows you to be more productive instead of trying to solve these types of problems on your own.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/turbo-solid.jpg\" alt=\"turbo-solid\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/jessarcher\/zsh-artisan\" rel=\"noopener\">ZSH Artisan<\/a><\/h2>\n<p><strong>ZSH Artisan<\/strong> is <a target=\"_blank\" href=\"https:\/\/ohmyz.sh\" rel=\"noopener\">ZSH shell<\/a> extension for the <code>artisan<\/code> CLI in Laravel. It provides autocompletion and makes your CLI smarter.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/zsh-artisan.jpg\" alt=\"zsh-artisan\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/tanstack.com\/\" rel=\"noopener\">TanStack<\/a><\/h2>\n<p>Built by <a target=\"_blank\" href=\"https:\/\/twitter.com\/tannerlinsley\" rel=\"noopener\">Tanner Linsley<\/a>, TanStack is a <strong>collection of tools and libraries to develop modern and dynamic websites<\/strong>. It includes <strong>TanStack Query<\/strong> to fetch, cache and manage server service states, <strong>TanStack Table<\/strong> to build advanced table or data grid, and a few more JavaScript libraries.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/tanstack.jpg\" alt=\"tanstack\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/ingradients.net\/\" rel=\"noopener\">Ingradients<\/a><\/h2>\n<p>A collection of gradient colors by Gilbert Pellegrom as SVG, JPG, PNG, and as high as 6K resolution. You can find a perfect gradient for your next project; whether it\u2019s for creating websites, flyers, mobile apps, wallpapers, or brochure.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/ingradients.jpg\" alt=\"ingradients\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/nvh95\/jest-preview\" rel=\"noopener\">Jest Preview<\/a><\/h2>\n<p>A utility plugin that allows you to <strong>preview HTML right within the tests<\/strong>. This allows you to see how the tests perform as well as how it affects HTML visually in the browser. In the end, this helps you to <strong>debug your application faster<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/jest-preview.jpg\" alt=\"jest-preview\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/design-develop\/\" rel=\"noopener nofollow\">WAI Design Develop<\/a><\/h2>\n<p>A place to find detailed guidelines, tutorials, and examples around creating <strong>website components like forms, buttons, and tabs<\/strong> that adhere to the <abbr title=\"Web Accessibility Initiative\">WAI<\/abbr> accessibility standard. This is a great resource for website accessibility whether you\u2019re an experienced developer or just getting started.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/w3c-wai.jpg\" alt=\"wai design develop\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/passwords-evolved\/\" rel=\"noopener\">Password Evolved<\/a><\/h2>\n<p>A <strong>WordPress plugin that adds an extra layer of security to the website<\/strong>. First, the plugin will enforce users to not use uncompromised passwords found in <strong><a target=\"_blank\" href=\"https:\/\/haveibeenpwned.com\/API\/v2\" rel=\"noopener nofollow\">Have I been pawned?<\/a><\/strong> data source. It will also <strong>encrypt the password<\/strong> using a more advanced hashing function like <a target=\"_blank\" href=\"https:\/\/www.php.net\/manual\/en\/function.password-hash.php\" rel=\"noopener\">bcrypt and Argon2<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/passwords-evolved.jpg\" alt=\"passwords-evolved\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/pimcore\/pimcore\" rel=\"noopener\">Pimcore<\/a><\/h2>\n<p>Pimcore is an <strong>all-in-one application to host and manage the digital experience<\/strong>. You can host almost any type of data regardless of the data modeling; whether it\u2019s an eCommerce, blog, digital asset management, and a lot more. It\u2019s built with PHP and can be easily installed through <a target=\"_blank\" href=\"https:\/\/getcomposer.org\" rel=\"noopener\">Composer<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/pimcore.jpg\" alt=\"pimcore\" width=\"750\" height=\"422\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=gu3FfmgkwUc\" rel=\"noopener nofollow\">The Power of JS Generators by Anjana Vakil<\/a><\/h2>\n<p><strong>Anjan Vakil<\/strong> has been one of my favourite developers\/speakers after the presentation on Functional Programming in JavaScript. In this lecture, Anjana brings something which is not yet well covered in JavaScript that is <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Generator\" rel=\"noopener\">Generators<\/a>.<\/p>\n<p>If you want to widen your understanding of JavaScript, this is one of the presentations you should watch.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/js-generators.jpg\" alt=\"js-generators\" width=\"750\" height=\"422\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=rtmFCcjEgEw\" rel=\"noopener nofollow\">\u201cBecoming a better developer by using the SOLID design\u201d<\/a><\/h2>\n<p>SOLID is a <strong>well-proven development principle to create a robust softwared<\/strong>. In this talk, Katerina Trajchevska sheds light on the principle and provides some examples of the real problems in PHP that we could apply to solve the problem.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/solid-design.jpg\" alt=\"solid-design\" width=\"750\" height=\"422\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/fbflipper.com\/\" rel=\"noopener\">Flipper<\/a><\/h2>\n<p>Part of the Facebook Open-source Initiative, Flipper is a free tool that allows you to <strong>debug your mobile application<\/strong>. Similar to DevTools on the browser, you can <strong>inspect the elements and network requests from the desktop<\/strong>. It\u2019s compatible with app built for iOS, Android, or using <a target=\"_blank\" href=\"https:\/\/reactnative.dev\" rel=\"noopener\">React Native<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/fb-flipper.jpg\" alt=\"fb-flipper\" width=\"750\" height=\"422\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/laravel\/pint\" rel=\"noopener\">Pint<\/a><\/h2>\n<p>Pint is a <strong>new code style fixer for Laravel<\/strong>. It\u2019s an official library coming from the Laravel developer itself. It\u2019s simple and, by default, does not require any configuration for Laravel projects. If your project runs on top of Laravel, you should definitely install Pint.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/laravel-pint.jpg\" alt=\"laravel-pint\" width=\"750\" height=\"422\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/spatie\/docker\" rel=\"noopener\">Docker with PHP<\/a><\/h2>\n<p>This PHP library allows you to manage <a target=\"_blank\" href=\"https:\/\/www.docker.com\/resources\/what-container\/\" rel=\"noopener\">Docker containers<\/a> such as starting a container, executing commands inside the container, setting labels, setting volume, etc. A handy library if you\u2019d like to<strong> manage stacks around Docker with PHP<\/strong> instead of using a different language.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/spatie-docker.jpg\" alt=\"spatie-docker\" width=\"750\" height=\"422\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/pmndrs\/zustand\" rel=\"noopener\">Zustand<\/a><\/h2>\n<p>A JavaScript library for <a target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html\" rel=\"noopener\">state-manager<\/a> in React.js. The library aims for simplicity and solves <a target=\"_blank\" href=\"https:\/\/react-redux.js.org\/api\/hooks#stale-props-and-zombie-children\" rel=\"noopener\">some<\/a> <a target=\"_blank\" href=\"https:\/\/github.com\/bvaughn\/rfcs\/blob\/useMutableSource\/text\/0000-use-mutable-source.md\" rel=\"noopener\">common issues<\/a> when managing states and rendering React.js components. If you\u2019re looking for a <strong>state manager for your React.js application<\/strong> with less of the headache, then this is probably what you need.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/zustand.jpg\" alt=\"zustand\" width=\"750\" height=\"422\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/diegomura\/react-pdf\" rel=\"noopener\">React PDF<\/a><\/h2>\n<p>A <strong>React.js library that makes it easier to create a PDF file with React.js component<\/strong>. You can add styles, text, and image, set the styles and you can choose whether you\u2019d want to have it rendered on the browser or save it a file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/react-pdf.jpg\" alt=\"\" width=\"750\" height=\"422\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>A web designer\/ developer should never run out of useful resources. So here we are with this month\u2019s installment of fresh resources. In this round of the series, we are going to cover tools and resources of different areas in web development including design, frontend, backend, testing, architecting, and accessibility. So whether you work as&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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (June 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"A web designer\/ developer should never run out of useful resources. So here we are with this month&#039;s installment of fresh resources. In this 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-06-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 (June 2022)\" \/>\n<meta property=\"og:description\" content=\"A web designer\/ developer should never run out of useful resources. So here we are with this month&#039;s installment of fresh resources. In this round of the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-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-06-28T13:01:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-03T11:49:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/scribe.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (June 2022)\",\"datePublished\":\"2022-06-28T13:01:27+00:00\",\"dateModified\":\"2022-07-03T11:49:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/\"},\"wordCount\":1009,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2022\\\/scribe.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (June 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2022\\\/scribe.jpg\",\"datePublished\":\"2022-06-28T13:01:27+00:00\",\"dateModified\":\"2022-07-03T11:49:06+00:00\",\"description\":\"A web designer\\\/ developer should never run out of useful resources. So here we are with this month's installment of fresh resources. In this round of the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2022\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2022\\\/scribe.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2022\\\/scribe.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-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 (June 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 (June 2022) - Hongkiat","description":"A web designer\/ developer should never run out of useful resources. So here we are with this month's installment of fresh resources. In this 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-06-2022\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (June 2022)","og_description":"A web designer\/ developer should never run out of useful resources. So here we are with this month's installment of fresh resources. In this round of the","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-06-28T13:01:27+00:00","article_modified_time":"2022-07-03T11:49:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/scribe.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (June 2022)","datePublished":"2022-06-28T13:01:27+00:00","dateModified":"2022-07-03T11:49:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/"},"wordCount":1009,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/scribe.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/","name":"Fresh Resources for Web Designers and Developers (June 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/scribe.jpg","datePublished":"2022-06-28T13:01:27+00:00","dateModified":"2022-07-03T11:49:06+00:00","description":"A web designer\/ developer should never run out of useful resources. So here we are with this month's installment of fresh resources. In this round of the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2022\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/scribe.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2022\/scribe.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-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 (June 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-fFF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/60243","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=60243"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/60243\/revisions"}],"predecessor-version":[{"id":60244,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/60243\/revisions\/60244"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=60243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=60243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=60243"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=60243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}