{"id":47189,"date":"2019-03-05T22:10:03","date_gmt":"2019-03-05T14:10:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=47189"},"modified":"2025-04-21T18:13:18","modified_gmt":"2025-04-21T10:13:18","slug":"fresh-resources-for-web-designers-and-developers-march-2019","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (March 2019)"},"content":{"rendered":"<p>A lot has happened in the world of web development during the last few months. First, the new <strong>block-based editor, codenamed Gutenberg<\/strong>, has finally been merged into WordPress 5.0. This is a significant change since its inception, as it sets a new foundation for WordPress to evolve in the future and will change how developers extend WordPress functionality.<\/p>\n<p>Second, several of our fellow developers have created some really useful tools, such as one that allows <strong>viewing JSON in the terminal<\/strong> and a couple of React libraries that can prove helpful in web design and development projects.<\/p>\n<p>Finally, some of the most effective <strong>resources, references, and plugins<\/strong> have been launched to help you update your projects according to newer trends.<\/p>\n<p>Let\u2019s get to the most comprehensive list of fresh web development resources.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-47189-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-47189-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:\/\/wordpress.org\/gutenberg\/handbook\/\">Gutenberg Handbook<\/a><\/h2>\n<p>The official WordPress handbook where you can look up references for the design, <strong>code examples for creating blocks<\/strong>, and a guide to contributing to the project. It is your first reference for developing with Gutenberg.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Gutenberg Handbook\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-handbook.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.wordpress.org\/cli\/commands\/scaffold\/block\/\">Block Scaffold<\/a><\/h2>\n<p>With the block-based editor, WP-CLI now provides a convenient way to get started with <strong>creating a Gutenberg Block with a new CLI command<\/strong>, <code>wp scaffold block<\/code>. You can create and include it in your existing plugins and themes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Block Scaffold\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/wp-cli-block-scaffold.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">CGB<\/a><\/h2>\n<p>Another way to easily start up a Gutenberg block is Create Guten Block (CGB), a tool to <strong>generate a boilerplate<\/strong> to develop a Gutenberg block. It consists of modern tools such as React.js, Webpack, ESLint, Babel, etc. The best part is that you <strong>don\u2019t need to configure any of these tools<\/strong>, so you can simply focus on writing your code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Create Guten Block\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/create-guten-block.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/block-builder\/\">Elementor Blocks for Gutenberg<\/a><\/h2>\n<p>A WordPress plugin that allows you to <strong>insert any Elementor templates<\/strong> and preview them right within the editor. The plugin comes with numerous other compatibilities that provide a <strong>seamless editing experience<\/strong> between Elementor and Gutenberg. Check out <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=QsiAuuPlB_c\">this video<\/a> to see how it works in action.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Elementor Blocks for Gutenberg\" height=\"386\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/elementor-gutenberg-block.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/atomic-blocks\/\">Atomic Blocks<\/a><\/h2>\n<p>A set of Gutenberg blocks with a growing collection. At the time of this writing, it provides the \u201cPost Grid Block\u201d which allows you to <strong>add a list of posts from your site in a grid layout<\/strong>. There\u2019s also a \u201cTestimonial Block\u201d which, as the name implies, inserts a Testimonial within the page. Check out the full previews of the Blocks in this page.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Atomic Blocks\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/atomic-blocks.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/block-gallery\/\">Block Gallery<\/a><\/h2>\n<p>An eye-catching block to insert your image gallery, Block Gallery provides a seamless experience to add images to your post. Simply drop your images, style the gallery display (Masonry-style, Carousel, or Fullscreen), and it\u2019s all set. It\u2019s, at the moment, simply the best Gallery Block for WordPress.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Block Gallery\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/block-gallery.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/coblocks\/\">CoBlocks<\/a><\/h2>\n<p>A suite of blocks from the same author who developed the above-mentioned Block Gallery, CoBlocks consists of a number of Blocks that\u2019ll enhance your site content with features such as <strong>Accordion, Pricing Table, Gif, Click-to-Tweet<\/strong>, and more Blocks to be added.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CoBlocks\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/coblocks.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/stag-blocks\/\">StagBlocks<\/a><\/h2>\n<p>Another suite of Gutenberg Blocks. The plugin brings a number of interesting Blocks that many of you would appreciate. It includes Stat Block which allows you to customize statistics within your posts and pages, Website Card Block which will <strong>preview websites in a fancy Card-style<\/strong>, and Code Block which will render code with highlighted color.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"StagBlocks\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/stag-blocks.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/demo.themeisle.com\/otter-blocks\/\">Otter Blocks<\/a><\/h2>\n<p>Also, a collection of Gutenberg Blocks such as the \u201cGoogle Maps Block\u201d to insert a map, \u201cOur Service Block\u201d to <strong>insert a list of services with a button in a grid view<\/strong>, and \u201cTestimonials Area Block\u201d to insert a list of testimonials. Otter Block is a collection of Gutenberg Blocks that businesses and theme developers would appreciate.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Otter Blocks\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/otter-blocks.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/advanced-gutenberg-blocks\/\">Advanced Gutenberg Blocks<\/a><\/h2>\n<p>This plugin comes with a handful of <strong>advanced Blocks to enrich your content<\/strong> such as the auto-generated table of contents, \u201cGiphy Blocks\u201d to include GIF images from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/giphy.com\/\">Giphy.com<\/a>, \u201cUnsplash Block\u201d to insert images from Unsplash.com, \u201cBanner Ad Block\u201d, WooCommerce \u201cAdd-to-Cart Button Block\u201d, and a lot more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Advanced Gutenberg Blocks\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/advanced-gutenberg-blocks.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/block-lab\/\">Block Lab<\/a><\/h2>\n<p>Block Lab makes it easy for developers to create a Gutenberg Block. The plugin allows you to <strong>register a new Block with a user-friendly GUI<\/strong> and templates in PHP. You don\u2019t even need to learn React.js.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Block Lab\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/block-lab.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/edd-blocks\/\">EDD Blocks<\/a><\/h2>\n<p>A plugin that allows you to render <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/easydigitaldownloads.com\/\">Easy Digital Downloads<\/a> products in the Gutenberg editor. Unlike using the Shortcode, the block will display product views.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"EDD Blocks\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/edd-block.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/testgutenberg.com\/\">Test Gutenberg<\/a><\/h2>\n<p>Not ready to install the Gutenberg plugin or update your site to WordPress 5.0? You can simply <strong>load this site to try out the new editor<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Test Gutenberg\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/testgutenberg.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gutenbergcloud.org\/\">Gutenberg Cloud<\/a><\/h2>\n<p>It\u2019s like an AppStore for Gutenberg Blocks. A central place where you can get <strong>Gutenberg Blocks that can be used in WordPress and Drupal<\/strong>. Yes, Drupal is also going to adopt the Gutenberg editor for their editor.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Gutenberg Cloud\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-cloud.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/gutenberg-examples\">Gutenberg Examples<\/a><\/h2>\n<p>A Github repository of code samples to create Gutenberg Blocks. Here you can find the <strong>simplest Block to a more complex example<\/strong>, such as the one to create a \u201cRecipe Block\u201d which sets a template in the editor for users to add <em>recipe<\/em> content. A good reference for those who prefer to learn from real examples rather than a textbook.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Gutenberg Examples\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-example.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/front\/gutenberg-js\">GutenbergJS<\/a><\/h2>\n<p>The JavaScript-only version of Gutenberg. It\u2019s available as an NPM package which allows you to integrate Gutenberg into any of your JavaScript applications.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"GutenbergJS\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-js.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/disable-gutenberg\/\">Disable Gutenberg<\/a><\/h2>\n<p>Although Gutenberg brings new possibilities to WordPress, not everyone is ready for it. If your existing sites do not work well with Gutenberg, you can install this plugin. It allows you to <strong>disable the Gutenberg editor<\/strong> for particular posts, post types, user roles, themes, as well as disable the Gutenberg stylesheets in the front-end.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Disable Gutenberg\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/disable-gutenberg.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a><\/h2>\n<p>Alternatively, you can install this plugin so you can keep updated to WordPress 5.0 while continuing to use the old classic editor. This plugin will be supported until 2022.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Classic Editor\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/classic-editor.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.classicpress.net\/\">ClassicPress<\/a><\/h2>\n<p>Another alternative is to switch to a WordPress fork, ClassicPress. ClassicPress focuses on <strong>businesses, stability and security<\/strong>. It\u2019s compatible with WordPress plugins and it plans to bring new interesting features in their future releases. Check-out our post: <a href=\"https:\/\/www.hongkiat.com\/blog\/classicpress-alternative-to-wordpress-without-guternberg-and-reactjs\/\">ClassicPress: Alternative to WordPress without Gutenberg & React.js<\/a><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"ClassicPress\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/classic-press.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/kinsta.com\/learn\/speed-up-wordpress\/\">Speed-up WordPress<\/a><\/h2>\n<p>As WordPress has become so big \u2013 more than just a blogging platform. Gutenberg, especially, has added some extra loads, codes, and files to your site that may slow it down. This is a detailed guide that you can refer to help you identify the pain points on your site and address them with the latest best practices in the industry.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Speed Up WordPress\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/wordpress-speed.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/auchenberg\/vscode-browser-preview\">Visual Studio Code Browser Preview<\/a><\/h2>\n<p>A Visual Code editor that adds a real browser powered by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.chrome.com\/blog\/headless-chrome\/\">Chrome Headless<\/a> inside Visual Studio Code. This allows you to <strong>preview your work in realtime<\/strong> right inside the code editor and enables features such as in-editor debugging.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Visual Studio Code Browser Preview\" height=\"448\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/vs-browser-preview.jpg\" width=\"740\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/siddharthkp\/bundlesize\">Bundlesize<\/a><\/h2>\n<p>Bundlesize is a tool to <strong>keep your JavaScript file <em>bundling<\/em> size in check<\/strong>. You can define the maximum size of each of your bundled files and it will alert you when it\u2019s about to or has passed the defined maximum size. Bundlesize can be integrated with a CI service like TravisCI and CircleCI for seamless deployment workflow in your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Bundlesize\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/bundlesize.jpg\" width=\"740\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wpemerge.com\/\">WP Emerge<\/a><\/h2>\n<p>A modern <strong>WordPress theme framework based on the MVC pattern<\/strong>. If you\u2019re used to working with a PHP framework like Laravel and Slim, I\u2019m sure you will really appreciate this framework. You can use things like Router and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laravel.com\/docs\/5.7\/controllers\">Controller<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laravel.com\/docs\/5.7\/container\">DI Container<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/laravel.com\/docs\/5.7\/middleware\">Middleware<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WP Emerge\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/wpemerge.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/lighthousebot\">Lighthouse Bot<\/a><\/h2>\n<p>A utility tool that allows you to run <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=en\">Lighthouse<\/a> in a CI service using Docker. It\u2019s a great tool to <strong>automate your website performance checkup<\/strong> every time you push a new change to your website code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Lighthouse Bot\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/lighthoustbot.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/tyroprogrammer\/learn-react-app\">Learn React App<\/a><\/h2>\n<p>Learn React App is a resource to learn React.js. But unlike other resources out there, this should be <strong>installed locally on your computer<\/strong>. It not only contains learning materials but also code and interactive samples. The best part is that you can do it while offline once it is installed.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Learn React App\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/learn-react-app.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/10up\/wpacceptance\">WP Acceptance<\/a><\/h2>\n<p>WP Acceptance is a new tool that allows you to perform acceptance tests. To put it simply, Acceptance Tests are a series of <strong>tests to emulate user behavior<\/strong>. There are a number of frameworks out there to perform this type of test.<\/p>\n<p>However, if you\u2019re primarily working with WordPress, you\u2019ll appreciate this tool for its ease of use as it is designed and tailored to typical WordPress project needs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WP Acceptance\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/wp-acceptance.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/rikschennink\/shiny\">Shiny<\/a><\/h2>\n<p>A JavaScript library to <strong>emulate lighting reflection on your website when viewed on mobile devices<\/strong>. You can view the demo in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/pqina.nl\/shiny\/\">https:\/\/pqina.nl\/shiny\/<\/a>. It is worth noting that it will only work on mobile devices as it relies on a certain API that\u2019s only available on mobile devices.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Shiny\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/shiny.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactlucid.io\/\">React Lucid<\/a><\/h2>\n<p>ReactLucid is a tool to help you <strong>debug React and GraphQL applications<\/strong> in a more interactive way. It allows you to see the component hierarchy, state\/props changes within your React application as well as the GraphQL schema, queries, and mutations in real-time.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Lucid\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/reactlucid.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/css-feature-toggles\/aeinmfddnniiloadoappmdnffcbffnjg\">CSS Features Toggle<\/a><\/h2>\n<p>A Chrome extension that allows you to <strong>disable certain CSS features in Chrome<\/strong>. With this, you can see how your website will render and behave when certain features do not exist. Quite useful to help you implement new CSS features that may not be implemented in all browsers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS Features Toggle\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/css-feature-toggle.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2>Blendy<\/h2>\n<p>A tool that can help you <strong>customize CSS background blend modes with your image<\/strong>. You can preview blend modes, change colors, and apply gradients. You can use images from Unsplash or upload them from your computer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Blendy\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/blendy.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react-elemental-docs.static.kevinlin.info\/\">React Elemental<\/a><\/h2>\n<p>A collection of React elements that work right out of the box. No external CSS to import or customize configurations to add on Webpack. It comes with essential components like the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react-elemental-docs.static.kevinlin.info\/component\/button\">Button<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react-elemental-docs.static.kevinlin.info\/component\/checkbox\">Checkbox<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react-elemental-docs.static.kevinlin.info\/component\/select-list\">SelectList<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react-elemental-docs.static.kevinlin.info\/component\/tabs\">Tabs<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react-elemental-docs.static.kevinlin.info\/component\/tooltip\">Tooltip<\/a>, and a lot more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Elemental\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/react-elemental.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/antonmedv\/fx\">FX<\/a><\/h2>\n<p>If you\u2019re often dealing with JSON-formatted data, I\u2019m sure you will appreciate this tool. <code>fx<\/code> is a <strong>command line tool that allows you to visualize JSON data in Terminal<\/strong> with interactive mode, in a way that you can expand or collapse the data. <code>fx<\/code> can be installed via NPM or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/brew.sh\/\">Homebrew<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"FX Command Line Tool\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/fx.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/monicahq\/monica\">Monica<\/a><\/h2>\n<p>Monica is quite in its own category. It\u2019s a kind of <a href=\"https:\/\/www.hongkiat.com\/blog\/best-crm-tools\/\">Customer Relationship Manager<\/a> (CRM) but is meant not for your customers but for your loved ones like your family and friends.<\/p>\n<p>Like a CRM, it allows you to keep track of things like your activities with them, and when you last called them, etc. Even more, it can be set to remind you to call someone you haven\u2019t talked to in a while. They call it a PRM (Personal Relationship Manager).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Monica\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/monica.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ionicframework.com\/\">Ionic Framework<\/a><\/h2>\n<p>The Ionic framework has actually been around for a while. But lately, it has made quite a big jump in its functionality. Now not only is it faster, but Ionic is also <strong>compatible with two rising star frameworks: React.js and Vue.js<\/strong>.<\/p>\n<p>This lays down the ground for Ionic to be a <strong>framework agnostic tool<\/strong>. So not only does it work for particular frameworks, but it may also work with new ones as front-end development evolves in the future.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Ionic Framework\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/ionic-framework-4.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/notable\/notable\">Notable<\/a><\/h2>\n<p>Notable is a note-taking desktop application. Unlike any other similar app, it does not come with proprietary formatting, WYSIWYG, or other typical bells and whistles. The <strong>app editor is mainly powered by Github-flavored Markdown<\/strong>. Notes are stored in flat file <code>.md<\/code> files as well as attachments. It just works and is simple.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Notable\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/notable.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tiptap.dev\/\">TipTap<\/a><\/h2>\n<p>TipTap is a <a href=\"https:\/\/www.hongkiat.com\/blog\/wysiwyg-html-editors\/\">WYSIWYG editor<\/a> built on top of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/prosemirror.net\/\">ProseMirror<\/a> with Vue.js. Apart from inheriting a number of features from ProseMirror out of the box, such as the awesome Markdown syntax support, TipTap brings a few modern features like the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tiptap.dev\/menu-bubble\">Menu Bubble<\/a> where the formatting menu will appear when highlighting text, the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tiptap.dev\/docs\/content-ai\/capabilities\/suggestion\/features\/display-suggestions#selected-suggestions\">Suggestion<\/a> feature where you can tag or mention a person within the content, and the <strong>ability to export content in JSON formatting<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"TipTap\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/tiptap.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/humanmade\/Restsplain\">Restplain<\/a><\/h2>\n<p>Restplain is a WordPress plugin that allows you to easily generate documentation of your WordPress REST API endpoints, including the custom endpoints on your site as well as <strong>making an API call from within the docs<\/strong>. One thing to note is that it relies on the endpoint schema to generate the documentation, so make sure that you\u2019ve added a proper schema for your custom endpoints.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Restplain\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/restsplain.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/danilowoz\/react-content-loader\">React Content Loader<\/a><\/h2>\n<p><strong>React Content Loader<\/strong> is a React custom component that allows you to display content placeholders while the actual content is being loaded. It\u2019s similar to the type of loader that you see on Facebook and Instagram.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Content Loader\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/react-content-loader.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/justintadlock\/mythic\">Mythic<\/a><\/h2>\n<p>Mythic is a WordPress starter theme with modern best practices such as Dependency Injection, Views, and Controllers, as well as modern tooling such as the use of <strong>Webpack, Sass, Linting, PHP7<\/strong> minimum requirement, and BEM. It\u2019s a great theme to level up your skill as a theme developer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mythic\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/mythic.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/refined-github\/refined-github\">Refined Github<\/a><\/h2>\n<p>A browser extension to refine your experience when using Github. It adds several handy hotkeys, refines some layouts and UIs, automatically adds links to issues and PRs, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/refined-github\/refined-github#highlights\">and a lot more<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Refined Github\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/refined-github.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/open-wc.org\/\">Open WC<\/a><\/h2>\n<p>Open WC is a set of tools that allow you to create Custom Web Components. It includes the main library to create a Web Component, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/yeoman.io\/generators\/\">Yeoman generators<\/a> to quickly generate an \u201cOpen WC\u201d project, which includes the scaffold for testing, <em>linting<\/em>, and continuous integration.<\/p>\n<p>Open WC can be a good alternative if you\u2019d <strong>prefer implementing with a native web feature<\/strong> rather than using a framework like Vue.js or React.js.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Open WC\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/open-wc.jpg\" width=\"740\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gridsome.org\/\">Gridsome<\/a><\/h2>\n<p>Gridsome is a <strong>tool to build static websites and web applications with Vue.js and GraphQL<\/strong>. It\u2019s able to handle multiple data streams such as from CMS like WordPress and Drupal, a local file like Markdown or Yaml, or external API like AirTable and Contentful. This is a really great alternative to Gatsby.js, especially if you prefer Vue.js over React.js.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Gridsome\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gridsome.jpg\" width=\"740\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/worldwideweb.cern.ch\/worldwideweb\/\">The Browser<\/a><\/h2>\n<p>This is the browser as envisioned by the World Wide Web inventor himself, Tim Berners-Lee. It\u2019s a <strong>simple browser to render HTML<\/strong> and does not show an address bar like a modern browser, but you can view by navigating to <strong>Document &gt; Open from full document reference<\/strong> and paste in a URL and click <strong>Open<\/strong>. And there you\u2019ll see how your site will render with the original browser.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"The Browser\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/original-browser.jpg\" width=\"740\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rsms.me\/raster\/\">Raster<\/a><\/h2>\n<p>Raster is a modern grid framework that\u2019s built with modern HTML and CSS specifications like CSS Grid, CSS Custom Property (Variable), and custom elements. A perfect framework for those who like to live on the edge.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Raster\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/raster.jpg\" width=\"740\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/baianat.github.io\/hooper\/\">Hooper<\/a><\/h2>\n<p>A Vue.js component to add a Carousel or Slider. It\u2019s accessible and usable through Touch, Keyboard, Mouse Wheel, and other assistive navigation, it supports RTL and vertical direction, extensible, and of course responsive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Hooper\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/hooper.jpg\" width=\"740\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>A lot has happened in the world of web development during the last few months. First, the new block-based editor, codenamed Gutenberg, has finally been merged into WordPress 5.0. This is a significant change since its inception, as it sets a new foundation for WordPress to evolve in the future and will change how developers&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":[],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (March 2019) - Hongkiat<\/title>\n<meta name=\"description\" content=\"A lot has happened in the world of web development during the last few months. First, the new block-based editor, codenamed Gutenberg, has finally been\" \/>\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\/fresh-resources-for-web-designers-and-developers-march-2019\/\" \/>\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 (March 2019)\" \/>\n<meta property=\"og:description\" content=\"A lot has happened in the world of web development during the last few months. First, the new block-based editor, codenamed Gutenberg, has finally been\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/\" \/>\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=\"2019-03-05T14:10:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:13:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-handbook.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=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (March 2019)\",\"datePublished\":\"2019-03-05T14:10:03+00:00\",\"dateModified\":\"2025-04-21T10:13:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/\"},\"wordCount\":2464,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-03-2019\\\/gutenberg-handbook.jpg\",\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (March 2019) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-03-2019\\\/gutenberg-handbook.jpg\",\"datePublished\":\"2019-03-05T14:10:03+00:00\",\"dateModified\":\"2025-04-21T10:13:18+00:00\",\"description\":\"A lot has happened in the world of web development during the last few months. First, the new block-based editor, codenamed Gutenberg, has finally been\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-03-2019\\\/gutenberg-handbook.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-03-2019\\\/gutenberg-handbook.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/fresh-resources-for-web-designers-and-developers-march-2019\\\/#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 (March 2019)\"}]},{\"@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 (March 2019) - Hongkiat","description":"A lot has happened in the world of web development during the last few months. First, the new block-based editor, codenamed Gutenberg, has finally been","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\/fresh-resources-for-web-designers-and-developers-march-2019\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (March 2019)","og_description":"A lot has happened in the world of web development during the last few months. First, the new block-based editor, codenamed Gutenberg, has finally been","og_url":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-03-05T14:10:03+00:00","article_modified_time":"2025-04-21T10:13:18+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-handbook.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":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (March 2019)","datePublished":"2019-03-05T14:10:03+00:00","dateModified":"2025-04-21T10:13:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/"},"wordCount":2464,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-handbook.jpg","articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/","url":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/","name":"Fresh Resources for Web Designers and Developers (March 2019) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-handbook.jpg","datePublished":"2019-03-05T14:10:03+00:00","dateModified":"2025-04-21T10:13:18+00:00","description":"A lot has happened in the world of web development during the last few months. First, the new block-based editor, codenamed Gutenberg, has finally been","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-handbook.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-03-2019\/gutenberg-handbook.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/fresh-resources-for-web-designers-and-developers-march-2019\/#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 (March 2019)"}]},{"@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-ch7","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/47189","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=47189"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/47189\/revisions"}],"predecessor-version":[{"id":73907,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/47189\/revisions\/73907"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=47189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=47189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=47189"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=47189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}