{"id":64666,"date":"2023-01-31T23:01:04","date_gmt":"2023-01-31T15:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=64666"},"modified":"2023-02-27T14:12:49","modified_gmt":"2023-02-27T06:12:49","slug":"designers-developers-monthly-01-2023","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (January 2022)"},"content":{"rendered":"<p>As the new year begins, it is important to stay updated with the latest tools and technologies in web development. In this edition of the <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/fresh-resources-developers\/\">\u201cFresh Resources for Web Developers\u201d series<\/a>, we will take a look at some of the most promising resources to help our fellow web developers stay ahead of the curve in the new year.<\/p>\n<p>From new design system guides to <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css-tutorials\/\">CSS tutorials<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/free-online-courses\/\">free courses<\/a>, libraries, and frameworks, we have something for every level of developers to elevate their skills and kickstart their web development journey in 2023.<\/p>\n<p>So, without further ado, let\u2019s dive into 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-12-2022\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (December 2022)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (December 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-12-2022.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-64403 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-12-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 (December 2022)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs the holiday season approaches and the year comes to a close, it's important to look at some...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/iconify\" rel=\"noopener\">Iconify<\/a><\/h2>\n<p>A versatile icon framework featuring <strong>over 100,000 icons from 100+ icon sets<\/strong>. It allows you to embed icons in plain HTML with SVG, with a front-end framework like Vue.js or React.js using a unified API.<\/p>\n<p>It also allows you to use icons in a design application with plug-ins for <strong>Figma, Sketch, and Adobe XD<\/strong>. This ultimately helps to avoid vendor lock-in while also providing access to thousands of high-quality icons. It is available as an <a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/@iconify\/json\" rel=\"noopener nofollow\">NPM package<\/a> and <a target=\"_blank\" href=\"https:\/\/packagist.org\/packages\/iconify\/json\" rel=\"noopener\">Composer for PHP<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/iconify.jpg\" alt=\"iconify\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/precedent.dev\/\" rel=\"noopener\">Precedent<\/a><\/h2>\n<p>A collection of components, hooks, and utilities for your Next.js project. It\u2019s built with all the latest libraries and frameworks such as <a target=\"_blank\" href=\"https:\/\/www.radix-ui.com\/\" rel=\"noopener\">Radix UI<\/a> for the base UI, <a target=\"_blank\" href=\"https:\/\/authjs.dev\/\" rel=\"noopener\">Auth.js<\/a> for handling <strong>user authentication with providers<\/strong> like Google, Twitter, and GitHub, <a target=\"_blank\" href=\"https:\/\/www.framer.com\/motion\/\" rel=\"noopener\">Framer Motion<\/a> to <strong>animate components<\/strong>, and <a target=\"_blank\" href=\"https:\/\/tailwindcss.com\/\" rel=\"noopener\">TailwindCSS<\/a> for <strong>styling the components<\/strong> with set of pre-defined CSS utility classes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/precendent.jpg\" alt=\"precedent dev\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/mafs.dev\/\" rel=\"noopener\">Mafs<\/a><\/h2>\n<p>A set of <strong>opinionated React components<\/strong> that makes it easy to create beautiful and engaging math content for your users. Whether you\u2019re building a math learning platform, a <a href=\"https:\/\/www.hongkiat.com\/blog\/data-visualization-tools-resources\/\">data visualization tool<\/a>, or something else entirely, Mafs is the perfect tool for creating interactive math experiences.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/mafs.jpg\" alt=\"mafs dev\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/webcomponents.guide\/\" rel=\"noopener\">Web Components Guide<\/a><\/h2>\n<p>Web components allow developers to <strong>create custom reusable elements<\/strong> with their own behavior and render them in the browser, just like a standard HTML element. It\u2019s fast and can be integrated with some frameworks.<\/p>\n<p>If you\u2019d like to learn more about Web Components, this site provides some <strong>introductions and tutorials to create your own web components<\/strong>. You will learn some concepts like encapsulation, Shadow DOM, Events, Slots, and a lot more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/web-components-guide.jpg\" alt=\"web components\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/htmlwithsuperpowers.netlify.app\/\" rel=\"noopener\">HTML with Super Powers<\/a><\/h2>\n<p>To learn even further about web components, you can go to this site. It covers the <strong>basics of web components, such as the use of the <code>template<\/code> tag, the <code>slot<\/code> tag, and styling<\/strong>, and includes a variety of useful examples ranging from simple to complex.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/html-with-super-powers.jpg\" alt=\"html with superpowers\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/thedesignsystem.guide\/\" rel=\"noopener\">The Design System Guide<\/a><\/h2>\n<p>This website offers a <strong>comprehensive guide for learning about design systems<\/strong>. It covers important topics such as foundations, design tokens, and other resources.<\/p>\n<p>A design system aims to enhance consistency and efficiency in design and development by providing a <strong>common language and set of principles for teams to work with<\/strong>. If you are interested in learning about design systems, this website can be a great starting point.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/setup-design-system.jpg\" alt=\"design system guide\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/alphredo.app\/\" rel=\"noopener\">Alphredo<\/a><\/h2>\n<p>A <strong>color-generating app that creates translucent versions of colors<\/strong> that appear identical to their opaque counterparts when placed against the same background.<\/p>\n<p>With this app, you can <strong>specify the background and adjust the saturation<\/strong> in consecutive steps of their palette, which can help you to create a cohesive color palette that can be used throughout a project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/alphredo.jpg\" alt=\"alphredo app\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/github.com\/OpenAPITools\/openapi-generator\" rel=\"noopener\">OpenAPI Generator<\/a><\/h2>\n<p>OpenAPI Specification is a widely adopted standard for documenting RESTful APIs, enabling an ecosystem of interoperable tools and libraries.<\/p>\n<p>This tool allows you to <strong>automatically generate API client libraries, server stubs<\/strong>, documentation, and configuration based on the specification (either versions 2 or 3). It helps to speed up development and maintain consistency.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/openapi-generator.jpg\" alt=\"openapi generator\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/envshare.dev\/\" rel=\"noopener\">EnvShare<\/a><\/h2>\n<p>EnvShare is a <strong>secure tool for sharing environment variables<\/strong>. With EnvShare, you can share your environment variables securely by sending a link and limiting the number of times a link can be read.<\/p>\n<p><strong>Links can be set to automatically expire after a certain time<\/strong>, ensuring that data is deleted once it is no longer needed. It uses AES-GCM encryption to encrypt your data before sending it to the server, which assured your data is transmitted securely.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/encrypt-share.jpg\" alt=\"envshare\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/semi.design\/en-US\" rel=\"noopener\">Semi Design<\/a><\/h2>\n<p>Semi is a user interface design framework that helps both designers and developers to <strong>create high-quality digital interfaces <\/strong>. It adheres to W3C standards, offering support for multiple languages, time zones, and right-to-left languages.<\/p>\n<p>Additionally, it is <strong>compatible with server-side rendering scenarios<\/strong> and can be utilized in popular frameworks such as Next.js and Gatsby. Furthermore, it provides comprehensive design tokens and component variants that are synced and powered by Figma.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/semi-design.jpg\" alt=\"semi design\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.darkmodedesign.com\/\" rel=\"noopener\">Dark Mode Design<\/a><\/h2>\n<p>A resource that <strong>showcases beautifully designed websites that are either exclusively in dark mode or have the ability to switch to it<\/strong>. This can provide inspiration for building a dark mode feature on your own website.<\/p>\n<p>All the websites featured on this site have been carefully selected and curated by Cai Cardenas, ensuring that the selection of websites is of high quality and well-designed.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/darkmode.jpg\" alt=\"dark mode design\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/pxplang.org\/\" rel=\"noopener\">PXP<\/a><\/h2>\n<p>PXP is a <strong>powerful superset of the PHP programming language<\/strong> that has been designed to improve the developer experience. It offers an extended set of syntax rules and language features, allowing for more expressive and efficient coding.<\/p>\n<p>One of the <strong>key features of PXP is its extended type system<\/strong>, which enables a more powerful static analysis. At the time of this writing, PXP is actively under development and I am eagerly looking forward to seeing how it will affect PHP development in the future.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/pxp.jpg\" alt=\"pxp\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/web.dev\/tags\/new-to-the-web\/\" rel=\"noopener\">New to the web platform<\/a><\/h2>\n<p>The \u201cNew to the Web Platform\u201d series from the Chrome DevRel team presents the interesting <strong>features that have been added to stable and beta web browsers<\/strong>. A really good series that can help you stay ahead of the curve and create cutting-edge web experiences.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/webdev-new-platforms.jpg\" alt=\"webdev new platforms\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/alvaromontoro.github.io\/almond.css\/\" rel=\"noopener\">AlmondCSS<\/a><\/h2>\n<p>A collection of classless CSS styles that aims to improve the appearance of simple websites. It <strong>normalizes CSS styles for cross-browser compatibility<\/strong> and adds custom styles that can be personalized.<\/p>\n<p>The project goals are to use only tags, achieve cross-browser compatibility, easily themeable, <strong>responsive, accessible and usable, lightweight<\/strong>, and keep the design simple but elegant.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/almond-css.jpg\" alt=\"almond css\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/meyerweb.com\/eric\/thoughts\/2022\/12\/29\/styling-a-pre-that-contains-a-code\/\" rel=\"noopener\">Styling a \u201cpre\u201d that Contains a \u201ccode\u201d<\/a><\/h2>\n<p>In this article, Eric A. Meyer, creator of meyerweb, shares his experience using the CSS <code>:has()<\/code> selector to style a <code>pre<\/code> element that contains a <code>code<\/code> element. He provides <strong>insight on how you can keep a website semantic while achieving a visually appealing design<\/strong> with modern CSS syntax.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/meyerweb.jpg\" alt=\"meyerweb\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.typescriptcourse.com\/tutorials\/build-a-dynamic-avatar-component-with-react-typescript\" rel=\"noopener\">Build a Dynamic Avatar Component with React and TypeScript<\/a><\/h2>\n<p>A is a <strong>free TypeScript course that aims to teach real-world usage of the language<\/strong>. It demonstrates the benefits of using TypeScript, specifically in terms of improving type safety and avoiding errors.<\/p>\n<p>It will cover <strong>real-world usage of TypeScript by building a Dynamic Avatar Component with React & TypeScript<\/strong>, which is a common feature in most applications that have a login system. If you\u2019re <strong>looking to learn TypeScript<\/strong>, this article can be a good start.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/typescript-tutorials.jpg\" alt=\"typescript tutorials\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/kinsta.com\/academy\/course\/node-js-full-stack-developer\/\" rel=\"noopener\">Node.js Full Stack Developer<\/a><\/h2>\n<p>Another <strong>free course that will teach you how to build a functioning photo-sharing app<\/strong> using the MEEN stack (MariaDB, Nginx, Express, and Node.js). You will learn how to set up and use <strong>Node.js, NPM, and MariaDB<\/strong>, as well as some technical concepts like routes and middleware.<\/p>\n<p>It is a great course for developers of any skill level who want to learn full-stack Node.js and JavaScript development skills.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/nodejs-course.jpg\" alt=\"nodejs course\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.git-tower.com\/learn\/git\/videos\" rel=\"noopener\">Learn Version Control with Git<\/a><\/h2>\n<p>A <strong>free beginner-friendly video course that teaches the foundations of Git<\/strong>, covering everything from installing Git and the basics of version control to advanced topics.<\/p>\n<p>The course is divided into short, step-by-step videos that focus on just a single topic per lesson, with an average duration of only 5 minutes. This allows you to learn at your own pace, even with just one short video per day.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/git-course.jpg\" alt=\"git course\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/laracasts.com\/series\/learn-statamic-with-jack\" rel=\"noopener\">Learning Statamic with Jack<\/a><\/h2>\n<p>A <strong>free course on Laracasts that teaches how to use Statamic<\/strong>, a content management system that uses Laravel. The course covers topics such as <strong>building add-ons and starter kits, and understanding how Statamic works under the hood<\/strong>. Even better, this course is taught by Jack, the creator of Statamic.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/statamic-course.jpg\" alt=\"statamic course\" width=\"750\" height=\"480\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=BUCiSSyIGGU\" rel=\"noopener nofollow\">PHP For Beginners, 3+ Hour Crash Course<\/a><\/h2>\n<p>The PHP For Beginners course by @TraversyMedia is a <strong>3+ hour crash course designed to be the first step in learning PHP<\/strong>.<\/p>\n<p>It covers all of the fundamentals of PHP, including <strong>setting up a development environment using XAMPP, configuring VS Code and auto-reloading, learning about constructs and functions<\/strong>, understanding data types and variables, working with arrays, and using conditionals.<\/p>\n<p>PHP has been growing steadily and continuously improving over the years. If you\u2019d like to get started with PHP this is a great video course.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/php-course.jpg\" alt=\"php course\" width=\"750\" height=\"418\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>As the new year begins, it is important to stay updated with the latest tools and technologies in web development. In this edition of the \u201cFresh Resources for Web Developers\u201d series, we will take a look at some of the most promising resources to help our fellow web developers stay ahead of the curve in&hellip;<\/p>\n","protected":false},"author":1,"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 (January 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As the new year begins, it is important to stay updated with the latest tools and technologies in web development. In this edition of the &quot;Fresh Resources\" \/>\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-2023\/\" \/>\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 2022)\" \/>\n<meta property=\"og:description\" content=\"As the new year begins, it is important to stay updated with the latest tools and technologies in web development. In this edition of the &quot;Fresh Resources\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/\" \/>\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=\"2023-01-31T15:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T06:12:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/iconify.jpg\" \/>\n<meta name=\"author\" content=\"Hongkiat Lim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hongkiat Lim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 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-2023\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/\"},\"author\":{\"name\":\"Hongkiat Lim\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e3613a3bf757e4f67770f0b7a339edd0\"},\"headline\":\"Fresh Resources for Web Designers and Developers (January 2022)\",\"datePublished\":\"2023-01-31T15:01:04+00:00\",\"dateModified\":\"2023-02-27T06:12:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/\"},\"wordCount\":1436,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2023\\\/iconify.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-2023\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (January 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2023\\\/iconify.jpg\",\"datePublished\":\"2023-01-31T15:01:04+00:00\",\"dateModified\":\"2023-02-27T06:12:49+00:00\",\"description\":\"As the new year begins, it is important to stay updated with the latest tools and technologies in web development. In this edition of the \\\"Fresh Resources\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2023\\\/iconify.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2023\\\/iconify.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2023\\\/#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 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\\\/e3613a3bf757e4f67770f0b7a339edd0\",\"name\":\"Hongkiat Lim\",\"description\":\"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.\",\"sameAs\":[\"http:\\\/\\\/www.hongkiat.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/hongkiat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fresh Resources for Web Designers and Developers (January 2022) - Hongkiat","description":"As the new year begins, it is important to stay updated with the latest tools and technologies in web development. In this edition of the \"Fresh Resources","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-2023\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (January 2022)","og_description":"As the new year begins, it is important to stay updated with the latest tools and technologies in web development. In this edition of the \"Fresh Resources","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-01-31T15:01:04+00:00","article_modified_time":"2023-02-27T06:12:49+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/iconify.jpg","type":"","width":"","height":""}],"author":"Hongkiat Lim","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat Lim","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/"},"author":{"name":"Hongkiat Lim","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e3613a3bf757e4f67770f0b7a339edd0"},"headline":"Fresh Resources for Web Designers and Developers (January 2022)","datePublished":"2023-01-31T15:01:04+00:00","dateModified":"2023-02-27T06:12:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/"},"wordCount":1436,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/iconify.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-2023\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/","name":"Fresh Resources for Web Designers and Developers (January 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/iconify.jpg","datePublished":"2023-01-31T15:01:04+00:00","dateModified":"2023-02-27T06:12:49+00:00","description":"As the new year begins, it is important to stay updated with the latest tools and technologies in web development. In this edition of the \"Fresh Resources","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/iconify.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2023\/iconify.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2023\/#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 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\/e3613a3bf757e4f67770f0b7a339edd0","name":"Hongkiat Lim","description":"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.","sameAs":["http:\/\/www.hongkiat.com\/blog"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/hongkiat\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-gP0","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/64666","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=64666"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/64666\/revisions"}],"predecessor-version":[{"id":64955,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/64666\/revisions\/64955"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=64666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=64666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=64666"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=64666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}