{"id":58519,"date":"2021-12-28T21:01:49","date_gmt":"2021-12-28T13:01:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=58519"},"modified":"2025-04-21T18:41:05","modified_gmt":"2025-04-21T10:41:05","slug":"designers-developers-monthly-12-2021","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (December 2021)"},"content":{"rendered":"<p>We have reached the end of 2021! Time has flown by, and the world is still recovering from the effects of the pandemic. However, we remain committed to featuring the best tools for our fellow web developers and designers.<\/p>\n<p>In this installment of our series, we are featuring various tools related to <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\">CSS<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/javascript-libraries\/\">JavaScript<\/a>, and some <a href=\"https:\/\/www.hongkiat.com\/blog\/collective-of-40-web-tools-services\/\">web tools<\/a> that will help you <a href=\"https:\/\/www.hongkiat.com\/blog\/how-to-boost-productivity\/\">be more productive<\/a> as a web developer. Let\u2019s explore the complete list.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-58519-1\">\n\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/fresh-resources-developers\/\" target=\"_blank\" class=\"ref-block__link\" title=\"Read More: Click Here for More Resources\" rel=\"bookmark\"><span class=\"screen-reader-text\">Click Here for More Resources<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/related\/tag-fresh-resources-developers.jpg\" }'>\n\t\t\t<noscript>\n<style>.no-js #ref-block-tax-58519-1 .ref-block__thumbnail {\n\t\t\t\t\tbackground-image: url( \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/related\/tag-fresh-resources-developers.jpg\" );\n\t\t\t\t}<\/style>\n<p>\t\t\t<\/p><\/noscript>\n\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Click Here for More Resources<\/h4>\n<div class=\"ref-description\">\n<p>Check out our complete collection of hand-picked tools for designers and developers.<\/p>\n<\/div><\/div>\n<\/div>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/lighthouse-simulation\">Lighthouse Simulation<\/a><\/h2>\n<p>A web tool that allows you to test website performance with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Google Lighthouse<\/a>. It simulates the website on various network speeds which covers the bandwidth speed and the latency.<\/p>\n<p>The result will show you the score site <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/first-contentful-paint\/\">FCP (First Content Paint)<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/lcp\/\">LCP (Largest Contentful Paint)<\/a>. A handy tool to lookup and get broader insight of your site performance.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Lighthouse Simulation\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/lighthouse-simulation.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/villus.logaretm.com\/\">Villus<\/a><\/h2>\n<p>A GraphQL client for Vue.js. It\u2019s only less than 4KB and is available as a High-order component or hook, which makes it quite flexible to integrate in your Vue.js application. On top of that, it also supports <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/v3.vuejs.org\/guide\/migration\/suspense.html\">Suspense API<\/a> out of the box.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Villus\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/villus.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/messwithdns.net\/\">Mess with DNS<\/a><\/h2>\n<p><strong>DNS<\/strong> is one of the subjects on the Internet that\u2019s not easy to grasp. Editing the DNS entry can also be terrifying because it could cause your site to go down for days if it\u2019s somehow misconfigured.<\/p>\n<p>This is where the Mess with DNS tool comes in. It provides you with a playground \u2013 a dummy domain \u2013 to experiment with the DNS configuration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mess With DNS\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/messwithdns.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/yuanchuan.dev\/polygon-shapes\">Polygon Shapes<\/a><\/h2>\n<p><strong>Polygon Shape<\/strong> is a showcase to demonstrate the capability of CSS <code>clip-path<\/code> to create irregular shapes like polygon, a star, a flower, and even a butterfly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Polygon Shapes\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/polygon-shapes.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tinywow.com\/\">TinyWow<\/a><\/h2>\n<p>A collection of handy tools for your everyday digital needs. Here you can find a tool to convert images from HEIC to JPG and vice-versa, SVG-to-PNG, trim video, XML-to-JSON, convert an epoch time, merge PDF files, and even create a meme many more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Tiny Wow\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/tinywow.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/omatsuri.app\/\">Omatsuri<\/a><\/h2>\n<p>Another collection that you should bookmark. <strong>Omatsuri<\/strong> contains some handy tools such as one to generate triangle with CSS, one for generating color shade, convert SVG to JSX, lorem ipsum generator, fake data generator, and many more. Both designers and developers will appreciate all these kind of tools.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Omatsuri\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/omatsuri.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/AmanSagar0607\/ToolHunt\">ToolHunt<\/a><\/h2>\n<p>ToolHunt is a kind of tool curator that collects all types of design and development tools. Here you can find tools for designers, developers, for collaboration, or to improve productivity. Some of the themes are free, premium, or freemium. It\u2019s a great source to find new tools or to gather inspiration for new digital products.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Tool Hunt\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/toolhunt.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mobbin.design\/browse\/ios\/apps\">MobbinDesign<\/a><\/h2>\n<p>A library of design inspiration for mobile apps with more than 50.000 screenshots. They are searchable and sortable in categories so you can easily find screenshots from popular applications like Facebook, Target, Airbnb, WSJ, and many more. It\u2019s a great source to find UI\/UX inspiration for mobile apps without having to install the app.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mobbin Design\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/mobbidesign.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/css\/csso\">CSSO<\/a><\/h2>\n<p>CSSO is a library to \u201coptimize\u201d CSS. It removes redundancies, compresses the code (e.g. transforming syntax or values into its shorthands), and creates restructuring such as merging declarations, rules, and so on resulting in a much smaller CSS styles output.<\/p>\n<p>You can run it as a standalone CLI or integrate it with libraries and tools like Gulp, Grunt, Webpack, and PostCSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSSO\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/csso.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/regexlearn.com\/\">RegexLearn<\/a><\/h2>\n<p>This tool aims to make learning RegEx more enjoyable and understandable. It provides some interactive lessons to learn RegEx that start from the very basic and will pass you over to the more advanced topic as you accomplish each lesson. You\u2019ll definitely find it to be one of the best sources to learn RegEx.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Regex Learn\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/regexlearn.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/knowledge\">Font Knowledge<\/a><\/h2>\n<p>This is a Google initiative in collaboration with the Google Font team and world-class Typography experts to present the best source to learn Font. These are in-depth materials you can typically only get in colleges such as the basic typography, the glossaries used in typography, classification, and a lot more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Font Knowledge\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/font-knowledge.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modern-fluid-typography.vercel.app\/\">Modern Fluid Typography<\/a><\/h2>\n<p>CSS has advanced so much in the last few years, including how it handles font size on-screen with the <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp()\">clamp()<\/a><\/code> function. This function allows you to set the minimum and maximum size of font size based on the current screen size. And this little tool allows you to generate the code for this in a more intuitive way using a nice GUI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Modern Fluid Typography\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/modern-fluid-typography.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/bokub\/gradient-string\">Gradient String<\/a><\/h2>\n<p>A Node.js library that makes it easier to generate a gradient in terminal\/ console. You can use some preset gradients, or compose your own with multiple colors as well as adjust the position in the gradient. It\u2019s a handy library to make a CLI application a lot more attractive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Gradient String\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/gradient-string.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pollen.style\/\">Pollen Style<\/a><\/h2>\n<p>A library of CSS variables. These variables contain basic values for typography, layout, and colors. It\u2019s a perfect foundation for a design system with consistent and maintainable styles.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Pollen Style\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/pollen-styles.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/open-props.style\/\">Open Props Style<\/a><\/h2>\n<p>Another library of CSS variables that contains styles foundation such as for animation, colors, typography, gradients, dark and light theme, and many more to come. This is another great library if you are looking for a foundation to build a UI design system.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Open Props Style\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/open-props.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/floating-ui.com\/\">FloatingUI<\/a><\/h2>\n<p>A JavaScript library to create floating positional elements. Commonly you\u2019d need it for Tooltip, Dropdown, Popovers, etc. It supports primitive positioning like \u201cleft\u201d, \u201cright\u201d, \u201ctop\u201d and \u201cbottom\u201d as well as dynamic positioning such as following the browser scroll position. This library handles all the heavy lifting so you can focus on being more productive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Floating UI\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/floating-ui.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/nektos\/act\">Act<\/a><\/h2>\n<p>What if you can run your Github Actions config right in your computer. This is what this tool is trying to achieve, it allows you to run it locally in your computer which can be useful to test the configuration or simply when your internet is down.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Act\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/act.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/front-line-php.com\/cheat-sheet\">Cheat Sheet<\/a><\/h2>\n<p>PHP has evolved a lot in the past few years. Especially now there are a lot of new syntaxes. This cheat sheet shows you some snippets and comparisons of code between different versions of PHP. It\u2019s a good reference to keep you updated with modern PHP.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Cheat Sheet\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/php-modern-cheatsheet.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer-ipsum.netlify.app\/\">Developer Ipsum<\/a><\/h2>\n<p><strong>Lorem Ipsum<\/strong> text does not  have to be boring. Instead of some random text, you can use this little tool to generate dummy text that developers can understand and relate to.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Developer Ipsum\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/developer-ipsum.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/archtechx\/money\">Money<\/a><\/h2>\n<p>A PHP library that makes it easier to handle currency formatting. It provides an easy intuitive API to convert to different currencies, perform arithmetic and comparison, and many more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Money\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/money.jpg\" width=\"750\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>We have reached the end of 2021! Time has flown by, and the world is still recovering from the effects of the pandemic. However, we remain committed to featuring the best tools for our fellow web developers and designers. In this installment of our series, we are featuring various tools related to CSS, JavaScript, and&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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (December 2021) - Hongkiat<\/title>\n<meta name=\"description\" content=\"We have reached the end of 2021! Time has flown by, and the world is still recovering from the effects of the pandemic. However, we remain committed to\" \/>\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-12-2021\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fresh Resources for Web Designers and Developers (December 2021)\" \/>\n<meta property=\"og:description\" content=\"We have reached the end of 2021! Time has flown by, and the world is still recovering from the effects of the pandemic. However, we remain committed to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-28T13:01:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:41:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/lighthouse-simulation.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-12-2021\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (December 2021)\",\"datePublished\":\"2021-12-28T13:01:49+00:00\",\"dateModified\":\"2025-04-21T10:41:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/\"},\"wordCount\":1091,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-12-2021\\\/lighthouse-simulation.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (December 2021) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-12-2021\\\/lighthouse-simulation.jpg\",\"datePublished\":\"2021-12-28T13:01:49+00:00\",\"dateModified\":\"2025-04-21T10:41:05+00:00\",\"description\":\"We have reached the end of 2021! Time has flown by, and the world is still recovering from the effects of the pandemic. However, we remain committed to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-12-2021\\\/lighthouse-simulation.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-12-2021\\\/lighthouse-simulation.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2021\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fresh Resources for Web Designers and Developers (December 2021)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fresh Resources for Web Designers and Developers (December 2021) - Hongkiat","description":"We have reached the end of 2021! Time has flown by, and the world is still recovering from the effects of the pandemic. However, we remain committed to","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-12-2021\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (December 2021)","og_description":"We have reached the end of 2021! Time has flown by, and the world is still recovering from the effects of the pandemic. However, we remain committed to","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-12-28T13:01:49+00:00","article_modified_time":"2025-04-21T10:41:05+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/lighthouse-simulation.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-12-2021\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (December 2021)","datePublished":"2021-12-28T13:01:49+00:00","dateModified":"2025-04-21T10:41:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/"},"wordCount":1091,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/lighthouse-simulation.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/","name":"Fresh Resources for Web Designers and Developers (December 2021) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/lighthouse-simulation.jpg","datePublished":"2021-12-28T13:01:49+00:00","dateModified":"2025-04-21T10:41:05+00:00","description":"We have reached the end of 2021! Time has flown by, and the world is still recovering from the effects of the pandemic. However, we remain committed to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/lighthouse-simulation.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2021\/lighthouse-simulation.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2021\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fresh Resources for Web Designers and Developers (December 2021)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-fdR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/58519","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=58519"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/58519\/revisions"}],"predecessor-version":[{"id":73940,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/58519\/revisions\/73940"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=58519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=58519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=58519"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=58519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}