{"id":64403,"date":"2022-12-29T21:01:01","date_gmt":"2022-12-29T13:01:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=64403"},"modified":"2022-12-28T16:56:40","modified_gmt":"2022-12-28T08:56:40","slug":"designers-developers-monthly-12-2022","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (December 2022)"},"content":{"rendered":"<p>As the holiday season approaches and the year comes to a close, it\u2019s important to look at some of this year\u2019s latest tools and technologies.<\/p>\n<p>In this post, we\u2019ll take a look at some of the fresh resources for our fellow web developers to stay ahead of the curve and start the new year off right. This includes a host of new JavaScript, PHP, HTML, JS, and <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css-framework\/\">CSS libraries<\/a>, plus a breakthrough in WordPress.<\/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-11-2022\/\" class=\"ref-block__link\" title=\"Read More: Fresh Resources for Web Designers and Developers (November 2022)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Fresh Resources for Web Designers and Developers (November 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-11-2022.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-64013 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designers-developers-monthly-11-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 (November 2022)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tWe are nearing the end of 2022. But web development is still growing at a fast pace and...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.githubunwrapped.com\/\">GithubUnwrapped<\/a><\/h2>\n<p>A handy little <strong>web app to show off your GitHub activity for 2022<\/strong>. Just enter your username and you\u2019ll get a personalized video that summarizes all your public Github activities for the year.<\/p>\n<p>You can <strong>download the video and share it on social media<\/strong> like Twitter and LinkedIn, or just keep it for yourself. And if you want to add a little flair, it provides <strong>three different themes<\/strong> to choose from.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/github-unwrapped.jpg\" alt=\"github-unwrapped\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/f5\/unovis\">Unovis<\/a><\/h2>\n<p>Another cool <strong>open-source project from F5<\/strong>, the company behind Nginx. <strong>Unovis<\/strong> a data visualization framework that works with <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-react-js\/\">React<\/a>, Angular, Svelte, and vanilla JavaScript. It has <strong>different types of charts, maps, and network graphs<\/strong> that allow you to visualize almost any type of data.<\/p>\n<p>It lets you <strong>import individual components to keep your file sizes small<\/strong>. And if you want to customize the look of your charts, it\u2019s super easy to do with the CSS-variables support.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/unovis.jpg\" alt=\"unovis\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/spatie\/lighthouse-php\">Lighthouse PHP<\/a><\/h2>\n<p>Google Lighthouse helps you <strong>improve your website by checking things like performance, accessibility, and SEO<\/strong>. This PHP library makes it easy to use Lighthouse and create reports in HTML format.<\/p>\n<p>You can <strong>customize how you use it and integrate it into your existing workflow<\/strong>. A handy library, especially if you\u2019re already using PHP in your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/lighthouse-php.jpg\" alt=\"lighthouse-php\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/splade.dev\/\">Splade<\/a><\/h2>\n<p>A library that makes it super <strong>easy to build Single Page Applications (SPAs)<\/strong> using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laravel.com\/docs\/9.x\/blade\">Laravel Blade templates<\/a> and some extra interactive components from Vue 3. Basically, you can <strong>write your app using the simple Blade syntax<\/strong>, and then add some \u201cmagic\u201d to make it feel like an SPA.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/splade.jpg\" alt=\"splade\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/console-ninja.com\/\">ConsoleNinja<\/a><\/h2>\n<p>Using the <code>console.log<\/code> is a <strong>quick way to <a href=\"https:\/\/www.hongkiat.com\/blog\/tools-to-coding-online\/\">debug your code<\/a><\/strong>, but it can quickly get messy if you have too many log statements. This is a tool that helps you use <code>console.log<\/code> in a more organized way.<\/p>\n<p>It lets you <strong>see the logged values right next to your code<\/strong>, which makes it easier to understand what\u2019s going on in your codes. It\u2019s easy to use \u2014 just start your editor and your development server, and you\u2019re good to go. No need for any special setup or configuration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/console-ninja.jpg\" alt=\"console-ninja\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nextra.site\/\">Nextra<\/a><\/h2>\n<p>Nextra is a framework that sits on top of Next.js and helps you build websites that are all about content. It has all the good stuff from Next.js, plus some extra tools to <strong>make it easier to create content using Markdown<\/strong>.<\/p>\n<p>It also comes with <strong>built-in support for syntax highlighting, internationalization<\/strong>, and search. And right out of the box, you can choose between two different templates: one for creating Docs and one for a Blog to get you started quickly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/nextra.jpg\" alt=\"nextra\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/v3.vuefire.vuejs.org\/\">Vuefire<\/a><\/h2>\n<p>A tool that helps you keep your Vue app in sync with a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/firebase.google.com\/\">Firebase database<\/a>. It\u2019s designed to be easy to use and <strong>aligns with the declarative approach of Vue<\/strong>. It takes care of things like nested collections and document references for you, and it works with other <strong>Firebase features like authentication<\/strong>.<\/p>\n<p>You can <strong>choose which parts of the tool to include in your project<\/strong>, so you don\u2019t have to use everything if you don\u2019t need it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/vuefire.jpg\" alt=\"vuefire\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.opensourcecolorsystem.design\/\">OSCS<\/a><\/h2>\n<p>OSCS is a website that <strong>helps you choose colors for your digital interface<\/strong>, like a website or mobile app. It gives you different color palettes and shows you how to use them, along with examples of what they look like in an actual application.<\/p>\n<p>If you\u2019re having trouble <strong>finding the right colors for your project<\/strong>, OSCS is a good place to start to get some inspiration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/oscs.jpg\" alt=\"oscs\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hydephp\/hyde\">Hyde<\/a><\/h2>\n<p>A tool that helps you <strong>create static HTML pages, blog posts, and documentation sites using <a href=\"https:\/\/www.hongkiat.com\/blog\/open-source-laravel-projects-openlaravel\/\">Laravel<\/a><\/strong>. It comes with a front-end starter kit based on <a href=\"https:\/\/www.hongkiat.com\/blog\/tailwind-css\/\">TailwindCSS<\/a> that works right out of the box and is responsive and customizable.<\/p>\n<p>You can <strong>use Markdown or Blade<\/strong> to create your content, and Hyde comes with templates to help you get started.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/hyde.jpg\" alt=\"hyde\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/dinerojs\/dinero.js\">Dinero.js<\/a><\/h2>\n<p>A JavaScript library that makes it easier and safer to work with money in your app. It lets you <strong>express monetary values and do things like change, convert, compare, and format to different currencies<\/strong> for display. Dinero.js makes it easier to manipulate money in your application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/dinerojs.jpg\" alt=\"dinerojs\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/component.gallery\/\">The Component Gallery<\/a><\/h2>\n<p>A <strong>collection of user interface components that you can use as a reference<\/strong> when building your own component-based UI. It\u2019s updated regularly and has examples of components and design patterns from real-world design systems.<\/p>\n<p>You can find components like <strong>navigation, pagination, progress indicators, breadcrumbs<\/strong>, etc. It\u2019s a great resource for designers and developers looking for inspiration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/component-gallery.jpg\" alt=\"component-gallery\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/usememos.com\/\">useMemos<\/a><\/h2>\n<p>An <strong>open-source, self-hosted web app for managing and sharing knowledge and information<\/strong>. It\u2019s free and easy to set up on your own servers using Docker. It has a simple text area for writing memos, with some basic Markdown support.<\/p>\n<p>You can choose to make your memos private or public, and an API is available for customizing the tool to fit your needs. It\u2019s a great way to <strong>organize and share memos within your organization, company, or with the public<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/usememos.jpg\" alt=\"usememos\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codeimage.dev\/\">CodeImage<\/a><\/h2>\n<p>A tool that <strong>helps you make your code screenshots look nice<\/strong>. You can use it to share code snippets. You can customize your snippets by changing the syntax theme, colors, and window theme, and once you\u2019re happy with how it looks, you can <strong>generate the image and share it with others on social media<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/codeimage.jpg\" alt=\"\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.expo.dev\/\">Expo<\/a><\/h2>\n<p>A <strong>package for React Native apps that gives you a ton of useful features<\/strong>. With it, you can build apps entirely in JavaScript that work on all kinds of devices, without having to use tools like Xcode or Android Studio. Expo has great <strong>support for TypeScript<\/strong>. All these allow you to use the same codebase to develop incredible apps.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/expo.jpg\" alt=\"expo\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/flexdinesh\/blogster\">Blogster<\/a><\/h2>\n<p>A collection of <strong>fast and accessible blog templates with a variety of customizable themes<\/strong>. It\u2019s built with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/astro.build\/\">Astro<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/markdoc.dev\/\">Markdoc<\/a>. It includes features like a built-in dark mode, support for custom markdown components, and an RSS feed for SEO.<\/p>\n<p>All of the templates are performant and have a perfect score on the Lighthouse accessibility and performance testing tool.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/blogster.jpg\" alt=\"blogster\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.useragents.me\/\">UserAgents.me<\/a><\/h2>\n<p>A collection of <strong>common user agents for various operating systems and browsers<\/strong>, including Windows, Linux, and macOS. It provides a free API that lets you access the data in a convenient JSON format, which you can use in your code or application.<\/p>\n<p>I think it\u2019s a really <strong>handy source for web scrapers, researchers, and website administrators<\/strong> who need accurate, up-to-date user agent strings.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/useragents.jpg\" alt=\"useragents\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vite-plugin-ssr.com\/\">Vite Plugin SSR<\/a><\/h2>\n<p>A <strong>plugin for building server-side rendered apps<\/strong> with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vitejs.dev\/\">Vite.js<\/a>, a fast JavaScript build tool. It works with any UI framework, like React, Vue, Svelte, or Solid, and you can use it with other tools as well.<\/p>\n<p>You can <strong>choose between client routing and server routing<\/strong>, and it supports all types of rendering, including Single-page (SPA) and Multi-page Apps (MPA). It\u2019s easy to use and requires almost no configuration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/vite-plugin-ssr.jpg\" alt=\"vite-plugin-ssr\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.svggobbler.com\/\">SVGGobbler<\/a><\/h2>\n<p>A <strong>browser extension that helps you work with <a href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic\/\">SVG files<\/a><\/strong>. It works with Chrome and Firefox and gives you options like downloading, copying, viewing the code and exporting the icons as images. It\u2019s a convenient tool for anyone who <strong>works with <a href=\"https:\/\/www.hongkiat.com\/blog\/download-svg-icons\/\">SVG icons<\/a> on the web<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/svggobbler.jpg\" alt=\"svggobbler\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.wordpress.org\/playground\/\">WordPress Playground<\/a><\/h2>\n<p>A recent experimental tool that <strong>lets you run WordPress in your browser without a PHP server<\/strong>. It uses WebAssembly to make this possible.<\/p>\n<p>It has a lot of <strong>potential uses, like running code snippets in documentation, testing plugins and themes, switching between PHP and WordPress versions<\/strong>, and fixing failed CI tests.<\/p>\n<p>It\u2019s not completely stable yet, but it has the potential to revolutionize how we use WordPress in the future.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/wordpress-playground.jpg\" alt=\"wordpress-playground\" width=\"750\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/pocketbase\/pocketbase\">Pocketbase<\/a><\/h2>\n<p>An open-source backend tool that includes <strong>SQLite, real-time subscriptions, built-in file and user management, a dashboard UI, and a simple API<\/strong>. It\u2019s designed to handle a large number of concurrent connections that could work even on a budget VPS.<\/p>\n<p>It\u2019s currently in active development and overall has the potential to be a good alternative to paid SaaS options.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/pocketbase.jpg\" alt=\"pocketbase\" width=\"750\" height=\"480\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>As the holiday season approaches and the year comes to a close, it\u2019s important to look at some of this year\u2019s latest tools and technologies. In this post, we\u2019ll take a look at some of the fresh resources for our fellow web developers to stay ahead of the curve and start the new year off&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 2022) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As the holiday season approaches and the year comes to a close, it&#039;s important to look at some of this year&#039;s latest tools and technologies. In this post,\" \/>\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-2022\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fresh Resources for Web Designers and Developers (December 2022)\" \/>\n<meta property=\"og:description\" content=\"As the holiday season approaches and the year comes to a close, it&#039;s important to look at some of this year&#039;s latest tools and technologies. In this post,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-29T13:01:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/github-unwrapped.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=\"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-12-2022\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (December 2022)\",\"datePublished\":\"2022-12-29T13:01:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/\"},\"wordCount\":1393,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-12-2022\\\/github-unwrapped.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-2022\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (December 2022) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-12-2022\\\/github-unwrapped.jpg\",\"datePublished\":\"2022-12-29T13:01:01+00:00\",\"description\":\"As the holiday season approaches and the year comes to a close, it's important to look at some of this year's latest tools and technologies. In this post,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-12-2022\\\/github-unwrapped.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-12-2022\\\/github-unwrapped.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-12-2022\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fresh Resources for Web Designers and Developers (December 2022)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fresh Resources for Web Designers and Developers (December 2022) - Hongkiat","description":"As the holiday season approaches and the year comes to a close, it's important to look at some of this year's latest tools and technologies. In this post,","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-2022\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (December 2022)","og_description":"As the holiday season approaches and the year comes to a close, it's important to look at some of this year's latest tools and technologies. In this post,","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-12-29T13:01:01+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/github-unwrapped.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":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (December 2022)","datePublished":"2022-12-29T13:01:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/"},"wordCount":1393,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/github-unwrapped.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-2022\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/","name":"Fresh Resources for Web Designers and Developers (December 2022) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/github-unwrapped.jpg","datePublished":"2022-12-29T13:01:01+00:00","description":"As the holiday season approaches and the year comes to a close, it's important to look at some of this year's latest tools and technologies. In this post,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/github-unwrapped.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-12-2022\/github-unwrapped.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-12-2022\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fresh Resources for Web Designers and Developers (December 2022)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-gKL","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/64403","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=64403"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/64403\/revisions"}],"predecessor-version":[{"id":64405,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/64403\/revisions\/64405"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=64403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=64403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=64403"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=64403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}