{"id":52901,"date":"2021-01-27T23:30:19","date_gmt":"2021-01-27T15:30:19","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=52901"},"modified":"2025-04-21T17:40:50","modified_gmt":"2025-04-21T09:40:50","slug":"designers-developers-monthly-01-2021","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (January 2021)"},"content":{"rendered":"<p>Welcome to 2021! As we step into this new year, we\u2019re excited to bring you a fresh collection of tools and resources to kickstart your development journey. We hope this year brings you success, growth, and plenty of coding adventures!<\/p>\n<p>This month\u2019s roundup features an exciting mix of self-hosted applications that put you in control of your development environment. From social networking platforms to SVG editors and marketing automation tools, we\u2019ve got everything you need to take your projects to the next level. Let\u2019s dive in and explore these powerful resources!<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-52901-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-52901-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:\/\/coding-fonts.css-trickz.com\/\">Coding Fonts<\/a><\/h2>\n<p>A list of fonts for coding that shows each font with HTML, CSS, and JavaScript previews as well as each character that the font supports. It also provides details of the font license and features such as Ligatures and Variables. A great source to pick a new font to makeover your coding experience.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"coding fonts\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/coding-fonts.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/xstyled.dev\/\">XStyled<\/a><\/h2>\n<p>A CSS-in-JS framework to apply styles on your JavaScript application with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">React<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/preactjs.com\/\">Preact<\/a>, or similar frameworks. It\u2019s easy and intuitive to use as it utilizes properties similar to the CSS attributes on native HTML.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"xstyled\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/xstyled.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tedgoas.github.io\/Cerberus\/\">Cerberus<\/a><\/h2>\n<p>Cerberus offers patterns for responsive HTML emails. The code blocks are compartmentalized so they may be used, removed, combined, and nested to build an email. Each template contains code comments and has good support among popular email clients.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"cerberus\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/cerberus.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/yqnn.github.io\/svg-path-editor\/\">SVG Path Editor<\/a><\/h2>\n<p>A web-based app to create and edit SVG paths. You can <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/yqnn.github.io\/svg-path-editor\/\">use it online<\/a> or offline by installing it with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/\">NPM<\/a>. SVG can be saved within the app or exported to a file. A handy app to create simple graphics with SVG.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"svg path editor\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/svg-path-editor.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sunrise.5amco.de\/\">Sunrise<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"sunrise\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/sunrise.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/slowfil.es\/\">Slowfiles<\/a><\/h2>\n<p>This tool enables you to emulate slow file loading. You can select the file type CSS or JS, as well as configure the speed, the response code and browser cache setting. A great resource to test your site or app performance on handling slow files.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"slowfiles\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/slowfiles.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/janephp\/janephp\">JanePHP<\/a><\/h2>\n<p>A library to generate Models and API Clients based on a JSON Schema or OpenAPI specification. Creating a PHP framework to interact with API can be tedious. You can use this tool to automate several of the hard liftings so it\u2019s easier to develop and maintain.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"janephp\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/janephp.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/Kovah\/LinkAce\">LinkAce<\/a><\/h2>\n<p>A self-hosted application to organize link bookmark with several smart features. One of which is \u201clink monitoring\u201d which will inform you when links become unavailable or were moved. It also provides a full REST API that allows you to retrieve all the features and content from other apps and services.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"linkace\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/linkace.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/humhub\/humhub\">HumHub<\/a><\/h2>\n<p>A free social network framework built with PHP designed for social intranets and private social networks. It\u2019s free and provides the necessary features to communicate and collaborate with your peers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"humhub\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/humhub.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mautic\/mautic\">Mautic<\/a><\/h2>\n<p>Built with PHP, Mautic is an application to automate your marketing effort. You can manage campaigns, marketing channels (e.g. Emails, SMS, Web, Social, etc.), contacts, and generate reports. You can install the plugin or develop your own to add custom functionalities.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"mautic\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/mautic.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/play.tailwindcss.com\/\">TailwindCSS Play<\/a><\/h2>\n<p>An online playground to give <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tailwindcss.com\/\">TailwindCSS<\/a> a try. TailwindCSS is a utility-first CSS framework that allows you to compose styles for your website or website application faster and more maintainable.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"tailwind play\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/tailwind-play.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/antfu\/vitesse\">Vitesse<\/a><\/h2>\n<p>A starter template for <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/vitejs\/vite\">Vite.js<\/a> providing all the modern tools to build a fast website and web application including Vue 3, TailwindCSS v2, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/progressive-web-apps\/\">PWA<\/a>, file routing, Markdown support, and TypeScript.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"vitesse\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/vitesse.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mailhog\/MailHog\">MailHog<\/a><\/h2>\n<p>A Docker to spin up an SMTP environment easily. You can use it to test whether email delivery from your web application works correctly. It\u2019s equipped with Web UI that allows you to see the list of emails delivered.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"mailhog\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/mailhog.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/revery-ui\/revery\">Revery<\/a><\/h2>\n<p>A framework to develop desktop applications, Revery is meant as an alternative to Electron with a focus on performance. Built on top <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reasonml.github.io\/\">ReasonML<\/a>, it has JavaScript-like syntax and compiled to native C code which allows the app to perform much faster.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"revery ui\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/revery-ui.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/anuraghazra\/github-readme-stats\">Github ReadMe Stats<\/a><\/h2>\n<p>This tool allows you to easily generate stats for Github repo such as the total Stars, Commits, PRs, etc. To generate it is as easy as adding this special Markdown tag in the README file in the repo. For example:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"github stats\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/github-stats.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vlang.io\/\">VLang<\/a><\/h2>\n<p>A simple compiled programming language to build any kind of software development for websites, games, mobile, embedded applications, and general CLI tooling.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"vlang\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/vlang.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getcockpit.com\/\">Cockpit<\/a><\/h2>\n<p>A self-hosted headless CMS application. It allows you to manage content and consume it in many different applications through the REST API. It\u2019s free, open-source, and built with PHP with minimum requirements.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"cockpit\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/cockpit.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/Textualize\/rich\">Rich<\/a><\/h2>\n<p>A Python library for generating rich content and formatting CLI in the Terminal. It makes it easy to add styles such as colors, size, syntax highlighted source code as well as render tables, progress bars, markdown, and more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"rich\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/rich.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/community.codenewbie.org\/\">CodeNewbie<\/a><\/h2>\n<p>A community of developers and programmers to learn and grow together. You can sign up to publish a post, create an event, offer mentorship, or seeking mentorship. I think it\u2019s a great community to join in for both experts and those new in programming.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"codenewbie\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/codenewbie.jpg\" width=\"720\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>Welcome to 2021! As we step into this new year, we\u2019re excited to bring you a fresh collection of tools and resources to kickstart your development journey. We hope this year brings you success, growth, and plenty of coding adventures! This month\u2019s roundup features an exciting mix of self-hosted applications that put you in control&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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (January 2021) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Welcome to 2021! As we step into this new year, we&#039;re excited to bring you a fresh collection of tools and resources to kickstart your development\" \/>\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-01-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 (January 2021)\" \/>\n<meta property=\"og:description\" content=\"Welcome to 2021! As we step into this new year, we&#039;re excited to bring you a fresh collection of tools and resources to kickstart your development\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-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-01-27T15:30:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T09:40:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/coding-fonts.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=\"4 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-01-2021\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (January 2021)\",\"datePublished\":\"2021-01-27T15:30:19+00:00\",\"dateModified\":\"2025-04-21T09:40:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/\"},\"wordCount\":846,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2021\\\/coding-fonts.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (January 2021) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2021\\\/coding-fonts.jpg\",\"datePublished\":\"2021-01-27T15:30:19+00:00\",\"dateModified\":\"2025-04-21T09:40:50+00:00\",\"description\":\"Welcome to 2021! As we step into this new year, we're excited to bring you a fresh collection of tools and resources to kickstart your development\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2021\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2021\\\/coding-fonts.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2021\\\/coding-fonts.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-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 (January 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 (January 2021) - Hongkiat","description":"Welcome to 2021! As we step into this new year, we're excited to bring you a fresh collection of tools and resources to kickstart your development","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-01-2021\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (January 2021)","og_description":"Welcome to 2021! As we step into this new year, we're excited to bring you a fresh collection of tools and resources to kickstart your development","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-01-27T15:30:19+00:00","article_modified_time":"2025-04-21T09:40:50+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/coding-fonts.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (January 2021)","datePublished":"2021-01-27T15:30:19+00:00","dateModified":"2025-04-21T09:40:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/"},"wordCount":846,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/coding-fonts.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/","name":"Fresh Resources for Web Designers and Developers (January 2021) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/coding-fonts.jpg","datePublished":"2021-01-27T15:30:19+00:00","dateModified":"2025-04-21T09:40:50+00:00","description":"Welcome to 2021! As we step into this new year, we're excited to bring you a fresh collection of tools and resources to kickstart your development","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2021\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/coding-fonts.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2021\/coding-fonts.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-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 (January 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-dLf","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/52901","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=52901"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/52901\/revisions"}],"predecessor-version":[{"id":73817,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/52901\/revisions\/73817"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=52901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=52901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=52901"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=52901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}