{"id":59564,"date":"2022-04-26T23:01:41","date_gmt":"2022-04-26T15:01:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=59564"},"modified":"2022-04-28T18:19:04","modified_gmt":"2022-04-28T10:19:04","slug":"designers-developers-monthly-04-2022","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (April 2022)"},"content":{"rendered":"<p>Developing website is not always about <a href=\"https:\/\/www.hongkiat.com\/blog\/category\/coding\/\">coding<\/a>. You\u2019d also need a good sense of design to make the site usable, <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-tools-for-designers\/\">accessible<\/a>, and actually looking good for the users.<\/p>\n<p>So, in this round of the series, we are going to explore more on some of these resources around design category. You\u2019ll find tools for composing animation on the browser, high-quality mockups, animated icon library, a couple of <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css-framework\/\">CSS libraries<\/a>, and a lot more.<\/p>\n<p>Without further ado, 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-03-2022\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (March 2022)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (March 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-03-2022.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-59375 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-03-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 (March 2022)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tPHP, despite being dubbed as a \"dead\" language, keeps improving over the years. With the latest release of...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/facebook\/lexical\" rel=\"noopener\">Lexical<\/a><\/h2>\n<p>A <strong>Facebook open-source initiative<\/strong>, Lexical is a JavaScript library to build a rich-text editor with focus on performance, accessibility, and extensibility. These allow developers to add new functionalities to their needs.<\/p>\n<p>At the time of this writing, <strong>Lexical is in active development<\/strong> and provides React.js binding.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/lexical.jpg\" alt=\"lexical\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/rocket.modern-web.dev\/\" rel=\"noopener\">Rocket<\/a><\/h2>\n<p>A <strong>full-stack boilerplate to build modern static website with JavaScript<\/strong>. It comes with the essential tools to create a functional website such as automatic code splitting, routing, and components with everyting pre-configured so you can focus on being productive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/rocket.jpg\" alt=\"rocket\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.ls.graphics\/free-mockups\" rel=\"noopener\">Ls Graphics<\/a><\/h2>\n<p>A collection of <strong>high-quality mockups of a wide range of product presention<\/strong>. These include ceramic cups, postcards, mac studio, macbook pro, iPhone, variety of packages, and a lot more.<\/p>\n<p>All these mock-ups are <strong>free and can be used in personal or commercial projects<\/strong>. They are also available in Photoshop, Sketch, XD and Figma.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/ls-graphics.jpg\" alt=\"free-mockups\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.warp.dev\/\" rel=\"noopener\">Warp<\/a><\/h2>\n<p>A Terminal application built from the ground-up with <strong><a target=\"_blank\" href=\"https:\/\/www.rust-lang.org\/\" rel=\"noopener\">Rust<\/a><\/strong>. It\u2019s fast and packed with features that you would not find in a traditional Terminal such as the <strong>ability use multiple cursors and autocompletion and suggestions<\/strong> similar to a text editor and that makes it feels modern.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/wrap.jpg\" alt=\"wrap\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/components.ai\/\" rel=\"noopener\">Components AI<\/a><\/h2>\n<p>A collection of web tools, generators, and editors for HTML, CSS, and SVG. You\u2019ll find a tool to <strong>generate color theme, gradients, SVG graphics in 2D or 3D<\/strong> and a few more. These tools can be handy to boost productivity a nice user interface.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/componentsai.jpg\" alt=\"components.ai\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/sprucecss.com\/\" rel=\"noopener\">SpruceCSS<\/a><\/h2>\n<p>A CSS framework built with <a target=\"_blank\" href=\"https:\/\/sass-lang.com\/\" rel=\"noopener\">Sass<\/a>. It provides <strong>Variables, Mixins, Functions<\/strong>, as well as the base styles for common elements such as all the Typographics elements, Buttons, Forms, and Tables.<\/p>\n<p>It also accounts for the color <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\" rel=\"noopener\">accessibility<\/a> as well as internationalisation by supporting RTL styles out of the box.<\/p>\n<p>It\u2019s a framework that provides a solid foundation for your website<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/spruce-css.jpg\" alt=\"spruce-css\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/motion.dev\/tools\" rel=\"noopener nofollow\">Motion Tools<\/a><\/h2>\n<p>A Chrome DevTools extensions that allows you to <strong>inspect, record, and play CSS animation right on the browser<\/strong>. A handy tool to debug CSS animation and that can help you to create a more compeling animation.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/motion-devtools.jpg\" alt=\"motion-devtools\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.ladle.dev\/\" rel=\"noopener\">Ladle<\/a><\/h2>\n<p>Ladle is designed as a <strong>drop-in alternative to <a target=\"_blank\" href=\"https:\/\/storybook.js.org\/\" rel=\"noopener\">Storybook<\/a> with focus on performance and ease of use<\/strong>. It is a tool to develop and test components. It\u2019s fast; it loads or reloads changes instantly no matter how many components are rendered.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/ladle.jpg\" alt=\"ladle\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.patterns.dev\/\" rel=\"noopener\">Patterns<\/a><\/h2>\n<p>A free e-book by Addy Osmani and Lydia Hallie that covers <strong>design paterns on building web application with JavaScript<\/strong>. Here you will find some tips and tricks to better architect your applications that will result in better code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/patterns.jpg\" alt=\"patterns\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/tooling.one\/\" rel=\"noopener\">Tooling<\/a><\/h2>\n<p>Another handy collection of tools for web developers. It includes a <strong>tool to generate QR code, hash, text diff, and some data converters<\/strong> such as JSON to TypeScript, HTML to Markdown, JSON to Rust, and a few more. It\u2019s the tool you\u2019d need to have in your bookmark.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/one-tooling.jpg\" alt=\"one-tooling\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"http:\/\/openby.design\/\" rel=\"noopener\">Open by Design<\/a><\/h2>\n<p>Open by Design provides a <strong>curated list of UI design for app and website<\/strong>. Each design is available in Figma format and you may use it for both personal or commercial use.<\/p>\n<p>Are you out of inspiration for your next app or web design? Look no further. You should have it in your bookmark.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/open-by-design.jpg\" alt=\"open-by-design\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/undraw.co\/illustrations\" rel=\"noopener\">unDraw<\/a><\/h2>\n<p>unDraw provides a collection of high-quality illustrations. You can customise the base color to match your design, select one of the illustrations, and download in SVG or PNG format.<\/p>\n<p>Are you not able to design? No problem. Undraw can <strong>make your website instantly look professional and aesthetically pleasing<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/scribbbles.jpg\" alt=\"scribbbles\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.screely.com\/\" rel=\"noopener\">Screely<\/a><\/h2>\n<p>A handy tool that allows you to <strong>create a browser mockup quickly<\/strong>. Simply drop the image on the webpage and it will show a couple of options where you can select the browser frame styles, background colors, spacing, and an option to download it as PNG image.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/screely.jpg\" alt=\"screely\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/useanimations.com\/\" rel=\"noopener\">useAnimations<\/a><\/h2>\n<p>A collection of <strong>animated icons built for <a target=\"_blank\" href=\"https:\/\/airbnb.design\/lottie\/\" rel=\"noopener\">Lottie<\/a> framework<\/strong>. It includes a number of icons such as the loading icons on various styles, social media icons, navigation icons, and a lot more. These icons will guarantee to make your website more engaging.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/use-animations.jpg\" alt=\"use-animations\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/twind.dev\/\" rel=\"noopener\">Twind<\/a><\/h2>\n<p>Twind is a <em>kind of<\/em> <strong>CSS-in-JS implementation<\/strong> for <a target=\"_blank\" href=\"https:\/\/tailwindcss.com\/\" rel=\"noopener\">TailwindCSS<\/a>. It provides the utility functions to output the Tailwind class name, and it will render the styles.<\/p>\n<p>Twind is framework agnositc, which allows you to <strong>use in a bare HTML<\/strong> and any framework including React.js, Vue.js, and Lit Element.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/twind.jpg\" alt=\"twind\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/tailblocks.cc\/\" rel=\"noopener\">TailBlocks<\/a><\/h2>\n<p>A <strong>collection of more than 60+ layout blocks built with TailwindCSS<\/strong>. You can find some common layouts for content, blog, form, e-Commerce, CTA and a lot more. If you\u2019re going to use TailwindCSS, using these blocks is a good start to boost your productivity.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/tailblocks.jpg\" alt=\"tailblocks\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.frontendpractice.com\/\" rel=\"noopener\">Front-end Practice<\/a><\/h2>\n<p>Provides a collection of <strong>projects that you can work on to assess your front-skills<\/strong>. Projects are grouped into 3 Levels \u2013 on Level 1, you\u2019ll get to develop simple one page layout while on Level 3 you will be challenged with a more complex layout that consist more elements.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/frontendpractice.jpg\" alt=\"frontendpractice\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.bedrock-layout.dev\/\" rel=\"noopener\">Bedrock Layout<\/a><\/h2>\n<p>A React.js library that provides utility components that make it easier to <strong>arrange your content with common layout patterns<\/strong>. For example, you can use <code>MasonryGrid<\/code> component to show content in <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/\" rel=\"noopener\">Masonry grid<\/a>. Or, the <code>Frame<\/code> which allows you to crop media in a sepcific ratio.<\/p>\n<p>You can <strong>install this library through NPM<\/strong>, and look into some <a target=\"_blank\" href=\"https:\/\/www.bedrock-layout.dev\/?path=\/docs\/getting-started-lesson-5-the-hero--page\" rel=\"noopener\">real-case examples it provides on the website<\/a> to get you up an running immediately.<\/p>\n<figure> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/bedrock-layout.jpg\" alt=\"bedrock-layout\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/adonisjs.com\/\" rel=\"noopener\">AdonisJS<\/a><\/h2>\n<p>A <strong>full-stack JavaScript framework to build modern website<\/strong>. AdonisJS highlights some features that you can usually find in an <a target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93controller\" rel=\"noopener\">MVC framework<\/a> such as <a target=\"_blank\" href=\"https:\/\/docs.adonisjs.com\/guides\/routing\" rel=\"noopener\">the Routing<\/a>, <a target=\"_blank\" href=\"https:\/\/docs.adonisjs.com\/guides\/controllers\" rel=\"noopener\">Controller<\/a>, Middleware, Validation, and Template engine. If you used Laravel or Ruby on Rail, you will immediately feel at home.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/adonis-js.jpg\" alt=\"adonis-js\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/sampler.dev\/\" rel=\"noopener\">Sampler<\/a><\/h2>\n<p>Sampler is a <strong>Shell or Terminal utility that can visualise processes or activities happening in your computer<\/strong> (much like what we see on a sci-fi movie) such as the network traffic, RAM and CPU usage, and Docker container stats to name a few. If you\u2019d like to impress your family or friends, this the one you need to install in your computer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/sampler.jpg\" alt=\"sampler\" width=\"750\" height=\"480\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Developing website is not always about coding. You\u2019d also need a good sense of design to make the site usable, accessible, and actually looking good for the users. So, in this round of the series, we are going to explore more on some of these resources around design category. You\u2019ll find tools for composing animation&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 (April 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Developing website is not always about coding. You&#039;d also need a good sense of design to make the site usable, accessible, and actually looking good for\" \/>\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-04-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 (April 2022)\" \/>\n<meta property=\"og:description\" content=\"Developing website is not always about coding. You&#039;d also need a good sense of design to make the site usable, accessible, and actually looking good for\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-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-04-26T15:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-28T10:19:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/lexical.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-04-2022\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (April 2022)\",\"datePublished\":\"2022-04-26T15:01:41+00:00\",\"dateModified\":\"2022-04-28T10:19:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/\"},\"wordCount\":1094,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-04-2022\\\/lexical.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (April 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-04-2022\\\/lexical.jpg\",\"datePublished\":\"2022-04-26T15:01:41+00:00\",\"dateModified\":\"2022-04-28T10:19:04+00:00\",\"description\":\"Developing website is not always about coding. You'd also need a good sense of design to make the site usable, accessible, and actually looking good for\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-2022\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-04-2022\\\/lexical.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-04-2022\\\/lexical.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-04-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 (April 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 (April 2022) - Hongkiat","description":"Developing website is not always about coding. You'd also need a good sense of design to make the site usable, accessible, and actually looking good for","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-04-2022\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (April 2022)","og_description":"Developing website is not always about coding. You'd also need a good sense of design to make the site usable, accessible, and actually looking good for","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-04-26T15:01:41+00:00","article_modified_time":"2022-04-28T10:19:04+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/lexical.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-04-2022\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (April 2022)","datePublished":"2022-04-26T15:01:41+00:00","dateModified":"2022-04-28T10:19:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/"},"wordCount":1094,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/lexical.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/","name":"Fresh Resources for Web Designers and Developers (April 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/lexical.jpg","datePublished":"2022-04-26T15:01:41+00:00","dateModified":"2022-04-28T10:19:04+00:00","description":"Developing website is not always about coding. You'd also need a good sense of design to make the site usable, accessible, and actually looking good for","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-2022\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/lexical.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-04-2022\/lexical.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-04-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 (April 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-fuI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/59564","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=59564"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/59564\/revisions"}],"predecessor-version":[{"id":62848,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/59564\/revisions\/62848"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=59564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=59564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=59564"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=59564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}