{"id":42965,"date":"2018-01-18T21:01:12","date_gmt":"2018-01-18T13:01:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=42965"},"modified":"2025-04-21T19:51:51","modified_gmt":"2025-04-21T11:51:51","slug":"designers-developers-monthly-01-2018","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (January 2018)"},"content":{"rendered":"<p>Welcome to 2018! The web development landscape has transformed dramatically over the past five years, introducing revolutionary concepts like VirtualDOM that have reshaped how we build websites. Today, we\u2019re diving into this exciting world of modern web development tools and libraries.<\/p>\n<p>At its core, the Document Object Model (DOM) represents your website\u2019s structure, but manipulating it can be resource-intensive and impact performance. That\u2019s where VirtualDOM comes in \u2013 it\u2019s a game-changing approach that optimizes how we update and render web pages.<\/p>\n<p>In this month\u2019s roundup, we\u2019ll explore powerful libraries that make implementing VirtualDOM a breeze, along with other essential tools to supercharge your development workflow. Let\u2019s get started!<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-42965-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-42965-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:\/\/maquettejs.org\/\">MaquetteJS<\/a><\/h2>\n<p>An <strong>implementation of VirtualDOM<\/strong> that allows you to build fluid user-interface that keeps updated with the data around it. It\u2019s a pure JavaScript and <em>unopiniated<\/em> library thus it\u2019s possible to <strong>use it along with a synthetic language such as CoffeeScript, TypeScript, and JSX<\/strong>. A great alternative library to React.js; MaquetteJS is much smaller in size (only <code>3kb<\/code>) comparably.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"MaquetteJS\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/maquette.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/redom.js.org\/\">ReDOM<\/a><\/h2>\n<p>This is one of my favourite VirtualDOM libraries, as it easy to pick it up just by looking at the syntax. <em><strong>With just 2Kb<\/strong><\/em>, you can build a fast-rendering web page or custom HTML component. The library consists <strong>two primary functions <code>el<\/code>, to create or manipulate an element<\/strong>, and <code>mount<\/code> to add it to a selected element. You can load it in the browser and server-side with NodeJS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"ReDOM\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/redom.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ractive.js.org\/\">ReactiveJS<\/a><\/h2>\n<p>A templating <strong>UI library to build highly interactive web application<\/strong>. Originally built for TheGuardian, ReactiveJS is built to work across browsers and mobile devices; so you can depend on its reliability. ReactiveJS also comes with <strong>many features needed for modern web application right out-of-the-box<\/strong>, such as Scoped CSS, Custom Components, SVG, and animation.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"ReactiveJS\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/reactivejs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/riot.js.org\/\">RiotJS<\/a><\/h2>\n<p>RitoJS is a pleasant to work with and much easier to learn library for beginners as it <strong>allows defining a custom component with HTML element<\/strong> and the HTML attributes while the previous libraries will force to use pure JavaScript syntax.<\/p>\n<p>RiotJS is compatible to Node.js environement or in the browsers, and could be a <strong>great alternative to Vue.js given the similarties<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"RiotJS\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/riot.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/WebReflection\/hyperHTML\">HyperHTML<\/a><\/h2>\n<p><em>hyperHTML<\/em>, as the name implies, <strong>features performance when rendering and manipulating DOM<\/strong>. You can use it to create Custom Element and Web Component. It works as easy as jQuery in which it can be used in the browser by <strong>loading the script from the CDN and accessing the hyperHTML<\/strong>. No need of complicated <em>tooling<\/em>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"HyperHTML\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/hyperhtml.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mithril.js.org\/\">Mithril<\/a><\/h2>\n<p>As cool as it sound, Mithril is a <strong>powerful JavaScript library<\/strong>. Aside from the VirutalDOM and Components, Mithril is also equipped with Routing and XHR with which <strong>you can build single-page web application without relying on any other library<\/strong>. Benchmark shows that it outperforms some popular libraries such as Vue.js, React.js and Angular.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mithril\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/mithril.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/slimjs.com\/\">SlimJS<\/a><\/h2>\n<p>SlimJS is a JavaScript library to <strong>build custom web component using the native Web Component API<\/strong>. Since it\u2019s built surrounding the native browser component SlimJS is equipped with a <strong><code>Polyfill<\/code> which shims the API in browser that does not support it yet<\/strong>. It\u2019s a great framework if you prefer to adopt the native way.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"SlimJS\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/slimjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/jcblw\/vsvg\">VSVG<\/a><\/h2>\n<p>While it has similar syntax to HTML, SVG is another kind of beast with its own quirks. This library, as the name suggests, will <strong>allow you to create and manipulate SVG on the fly<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"VSVG\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/vsvg.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/emotion.sh\/\">EmotionSH<\/a><\/h2>\n<p>EmotionSH is <strong>CSS-in-JS framework that you might need when building website with VirtualDOM<\/strong>. This allows you to deliver only bits of CSS needed on your site and you can <strong>dynamically update the styling<\/strong> without being convulated with the class naming and specificity as the style is scopped to only the Component it is applied to.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"EmotionSH\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/emotion.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/glitch.com\/react-starter-kit\">React Starter Kit<\/a><\/h2>\n<p>If you\u2019ve been following the web in the last couple of years, you\u2019ll find React (almost) every where. This is a <strong>5 short-video course introducing React<\/strong>. If you want to keep up with the industry, these might be the right place to get started.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Starter Kit\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/react-starter-kit.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sketchapp.com\/elements\">Elements<\/a><\/h2>\n<p>Elements is a collection of <strong>iOS components to create iOS app prototype in Sketch<\/strong>. It\u2019s built by the people by Sketch and been updated with iPhone X UI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Elements\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/elements-sketch.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/humaan.com\/modaal\/\">Modaal<\/a><\/h2>\n<p>Modaal is a JavaScript library built with accesibility in mind. It\u2019s been <strong>verified for \u201cWCAG 2.0 Level AA Support\u201d<\/strong> that (I think) the most <em>accessible<\/em> \u201cModal\u201d library today. It\u2019s <strong>lightweight, jQuery compatible, and can be used for images, videos, and even Instagram<\/strong>. Furthermore, this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/profile\/badges\/playlists\/webdev\/learn-accessibility\">this short course from Google<\/a> will help you get started with Web Accessibility and why it\u2019s important.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Modaal\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/modaal.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.wordpressify.co\/\">WordPressify<\/a><\/h2>\n<p>An NPM package that allows you to get a WordPress development environement up and running in minutes. It\u2019s all set up with <strong>modern tools like Gulp, LiveReload, PostCSS, Babel<\/strong> so you can focus on developing your project rather tuning-up configuration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WordPressify\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/wordpressify.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.devwithlando.io\/\">Lando<\/a><\/h2>\n<p>Lando is also a handy tool to spin up a development environment quickly and easily, much like to <strong>WordPressify<\/strong> that we\u2019ve just mentioned above. But instead of Node.js, it takes <strong>advantage of Docker a lightweight containerization<\/strong> technology and it offers more flexibility in term of the stack you\u2019d like to use in your development.<\/p>\n<p>For example, you can <strong>specify the PHP version, enable XDebug, and install Composer<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Lando\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/lando.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/tfirdaus\/wp-docklines\">WP-Docklines<\/a><\/h2>\n<p>WP-Docklines is a <strong>collection of images that you can use as baseline to perform Continuous Integration and Delivery<\/strong> for your WordPress themes and pluins in services like Bitbucket, CircleCI, and Gitlab. Each image is bundled with <strong>tools commonly needed when developing WordPress<\/strong> such as PHP Code Sniffer, PHPUnit, and WP-CLI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WP Docklines\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/wp-docklines.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/tfirdaus\/wp-locker\">WP-Locker<\/a><\/h2>\n<p>WP-Locker is Docker Compose configuration to spin a WordPress development environment in just minutes. It is <strong>set up with Apache, MySQL and phpMyAdmin<\/strong> and since it extends WP-Docklines image, it also carries out the extra tools on the image out-of-the-box.<\/p>\n<p>Simply <strong>type <code>bin\/start<\/code> to let it, configure the <em>localhost<\/em> and install plugins<\/strong> and themes that you have configure in the configuration file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WP Locker\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/wp-locker.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docusaurus.io\">Docusaurus<\/a><\/h2>\n<p>Another open-source initiative from Facebook, <strong>Docusaurus is a tool to create a documentation website of your project<\/strong>. Built with React and Markdown, you can easily compose documentation, maintain it, and even creating a blog for your site, and <strong>publish it to Github Pages<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Docusaurus\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/docusaurus.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/SamVerschueren\/vscode-yo\">VSCode Yo<\/a><\/h2>\n<p>Yeoman is an Node Package that allows you to start up project quickly by <strong>selecting pre-made scaffolding that suit your projects<\/strong>. If you\u2019re using Visual Studio Code, this plugin will streamline the start up workflow even further as it enables you to <strong>run the \u201cYo\u201d command right from the Visual Studio Code window<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"VSCode Yo\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/vscode-yo.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/bluebirdjs.com\/\">BluebirdJS<\/a><\/h2>\n<p>A JavaScript library that <strong>allows you to use <code>Promise<\/code>, <code>await<\/code>, <code>async<\/code> today in all browsers<\/strong>; said it even works in Netscape. <code>Promise<\/code> is one of the strongest point in the latest JavaScript specifications that would <strong>make your code leaner, readable, and easily maintainable<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"BluebirdJS\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/bluebird.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/prettier.io\">Prettier<\/a><\/h2>\n<p>Prettier is a tool to <strong>format your code to conform with the coding standard of the language<\/strong>. It will rewrite your code from the scracth following the rule allowing you and your team be <strong>more productive instead of debating over code writing styles<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Prettier\" height=\"469\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/prettier.jpg\" width=\"750\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>Welcome to 2018! The web development landscape has transformed dramatically over the past five years, introducing revolutionary concepts like VirtualDOM that have reshaped how we build websites. Today, we\u2019re diving into this exciting world of modern web development tools and libraries. At its core, the Document Object Model (DOM) represents your website\u2019s structure, but manipulating&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2539],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (January 2018) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Welcome to 2018! The web development landscape has transformed dramatically over the past five years, introducing revolutionary concepts like VirtualDOM\" \/>\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-2018\/\" \/>\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 2018)\" \/>\n<meta property=\"og:description\" content=\"Welcome to 2018! The web development landscape has transformed dramatically over the past five years, introducing revolutionary concepts like VirtualDOM\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/\" \/>\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=\"2018-01-18T13:01:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:51:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/maquette.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=\"6 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-2018\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (January 2018)\",\"datePublished\":\"2018-01-18T13:01:12+00:00\",\"dateModified\":\"2025-04-21T11:51:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/\"},\"wordCount\":1205,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2018\\\/maquette.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (January 2018) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2018\\\/maquette.jpg\",\"datePublished\":\"2018-01-18T13:01:12+00:00\",\"dateModified\":\"2025-04-21T11:51:51+00:00\",\"description\":\"Welcome to 2018! The web development landscape has transformed dramatically over the past five years, introducing revolutionary concepts like VirtualDOM\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2018\\\/maquette.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-01-2018\\\/maquette.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-01-2018\\\/#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 2018)\"}]},{\"@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 2018) - Hongkiat","description":"Welcome to 2018! The web development landscape has transformed dramatically over the past five years, introducing revolutionary concepts like VirtualDOM","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-2018\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (January 2018)","og_description":"Welcome to 2018! The web development landscape has transformed dramatically over the past five years, introducing revolutionary concepts like VirtualDOM","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-01-18T13:01:12+00:00","article_modified_time":"2025-04-21T11:51:51+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/maquette.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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (January 2018)","datePublished":"2018-01-18T13:01:12+00:00","dateModified":"2025-04-21T11:51:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/"},"wordCount":1205,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/maquette.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/","name":"Fresh Resources for Web Designers and Developers (January 2018) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/maquette.jpg","datePublished":"2018-01-18T13:01:12+00:00","dateModified":"2025-04-21T11:51:51+00:00","description":"Welcome to 2018! The web development landscape has transformed dramatically over the past five years, introducing revolutionary concepts like VirtualDOM","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/maquette.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-01-2018\/maquette.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-01-2018\/#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 2018)"}]},{"@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-baZ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42965","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=42965"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42965\/revisions"}],"predecessor-version":[{"id":74013,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42965\/revisions\/74013"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=42965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=42965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=42965"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=42965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}