Fresh Resources for Web Designers and Developers (March 2019)

A lot has happened during the last few months in the world of web development. Firstly, the new block-based editor, codenamed Gutenberg, has finally been merged into WordPress 5.0. It’s a really big change since its inception as it sets a new foundation for WordPress to evolve in the future and will change the way how developers extend for WordPress functionalities.

Secondly, a few of our fellow developers have created some really useful tools such as one that allows view JSON in terminal and a couple of React libraries that can prove a great help in web design and development projects.

And lastly, some of the most effective resources, references, and plugins have been launched to help you update your projects according to the newer trends.

Let’s get on the most comprehensive list of fresh web development resources.

Gutenberg Handbook

The official WordPress handbook where you can look up references for the design, code examples for creating blocks and others and a guide to contribute to the project. It is your first reference for developing with Gutenberg.

Gutenberg HandbookGutenberg HandbookBlock Scaffold

With the block-based editor, WP-CLI now provides a convenient way to get started with creating a Gutenberg Block with a new CLI command, wp scaffold block. You can create and include it to your existing plugins and themes.

Block ScaffoldBlock ScaffoldCGB

Another way to easily start up a Gutenberg block is Create Guten Block (CGB) is a tool to generate a boilerplate to develop a Gutenberg block. It consists of modern tools such as React.js, Webpack, ESLint, Babel, etc. The best part is that you don’t need to configure any of these tools so you can simply focus on writing your code.

Create Guten BlockCreate Guten BlockElementor Blocks for Gutenberg

A WordPress plugin that allows you to insert any Elementor templates and preview it right within the editor. The plugin comes with numerous other compatibilities that provide seamless editing experience between Elementor and Gutenberg. Check out this video to see how it’s doing in action.

Elementor Blocks for GutenbergElementor Blocks for GutenbergAtomic Blocks

A set of Gutenberg blocks with a growing number of collection. At the time of this writing, it provides the “Post Grid Block” which allows you to add a list of posts of your site in a grid layout. There’s also a “Testimonial Block” which, as the name implies, to insert a Testimonial within the page. Check out the full previews of the Blocks in this page.

Atomic BlocksAtomic BlocksBlock Gallery

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’s all set. It’s, at the moment, simply the best Gallery Block for WordPress.

Block GalleryBlock GalleryCoBlocks

A suite of blocks from the same author who developed the above-mentioned Block Gallery, CoBlocks consists of a number of Blocks that’ll enhance your site content with such as Accordion, Pricing Table, Gif, Click-to-Tweet, and more Blocks to be added.

CoBlocksCoBlocksStagBlocks

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 preview website in a fancy Card-style. Code Block which will render code with highlighted color.

StagBlocksStagBlocksOtter Blocks

Also, a collection of Gutenberg Blocks such as the “Google Maps Block” to insert a map, “Our Service Block” to insert a list of services with a button in a grid view, and “Testimonials Area Block” to insert a list of testimonials. Otter Block is a collection of Gutenberg Blocks that businesses and theme developer would appreciate.

Otter BlocksOtter BlocksAdvanced Gutenberg Blocks

This plugin comes with a handful of advanced Blocks to enrich your content such as the auto-generated table of contents, “Giphy Blocks” to include GIF image from Giphy.com, “Unsplash Block” to insert images from Unsplash.com, “Banner Ad Block”, WooCommerce “Add-to-Cart Button Block”, and a lot more.

Advanced Gutenberg BlocksAdvanced Gutenberg BlocksBlock Lab

Block Lab makes it easy for developers to create a Gutenberg Block. The plugin allows you to register a new Block with a user-friendly GUI and templates in PHP. You don’t even need to learn React.js.

Block LabBlock LabEDD Blocks

A plugin that allows you to render Easy Digital Downloads products in Gutenberg editor. Unlike using the Shortcode, the block will display product views.

EDD BlocksEDD BlocksTest Gutenberg

Not ready to install Gutenberg plugin or update your site to WordPress 5.0? You can simply load this site to try out the new editor.

Test GutenbergTest GutenbergGutenberg Cloud

It’s like an AppStore for Gutenberg Blocks. A central place where you can get Gutenberg Blocks that can be used in WordPress and Drupal. Yes, Drupal is also going to adopt the Gutenberg editor for their editor.

Gutenberg CloudGutenberg CloudGutenberg Examples

A Github repository of code samples to create Gutenberg Blocks. Here you can find the simplest Block to a more complex example, such as the one to create a “Recipe Block” which sets a template in the editor for users to add recipe content. A good reference for those who prefer to learn from real examples, rather than a text book.

Gutenberg ExamplesGutenberg ExamplesGutenbergJS

The JavaScript-only version of Gutenberg. It’s available as an NPM package which allows you to integrate Gutenberg into any of your JavaScript application.

GutenbergJSGutenbergJSDisable Gutenberg

Although Gutenberg brings new possibilities to WordPress, but 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 disable the Gutenberg editor for particular posts, post types, user roles, themes, as well as disable the Gutenberg stylesheets in the front-end.

Disable GutenbergDisable GutenbergClassic Editor

Alternately, you can install this plugin so you can keep updated to WordPress 5.0 while keep using the old classic editor. This plugin will be supported until 2022.

Classic EditorClassic EditorClassicPress

Another alternative is to switch to a WordPress fork, ClassicPress. ClassicPress focuses is on businesses, stability and security. It’s compatible with WordPress plugins and it plans to bring new interesting features in their future releases. Check-out our post: ClassicPress: Alternative to WordPress without Gutenberg & React.js

ClassicPressClassicPressSpeed-up WordPress

As WordPress has become so big; more than just a blogging platform. Gutenberg, especially, has added some extra loads, codes, files to your site that may slow down your site. This is a detail that you can refer to help you identify the painpoints on your site and address it the latest best practices in the industry.

Speed-up WordPressSpeed-up WordPressVisual Studio Code Browser Preview

A Visual Code editor that adds a real browser powered by Chrome Headless inside Visual Studio Code. This allows you to preview your work in realtime right inside the code editor and enables features such as in-editor debugging.

Visual Studio Code Browser PreviewVisual Studio Code Browser PreviewBundlesize

Bundlesize is a tool to keep your JavaScript file bundling size in check. You can define the maximum size of each of your bundled file and it will alert you when it’s about or passed the defined maximum size. Bundlesize can be integrated with a CI service like TravisCI and CircleCI for seamless deployment of workflow in your project.

BundlesizeBundlesizeWP Emerge

A modern WordPress theme framework based on the MVC pattern. If you’re used to working with a PHP framework like Laravel and Slim, I’m sure you will really appreciate this framework. You can use things like Router and Controller, DI Container, and Middlerware.

WP EmergeWP EmergeLighthouse Bot

A utility tool that allows you to run Lighthouse in a CI service using Docker. It’s a great tool to automate your website performance checkup every time you push a new change to your website code.

Lighthouse BotLighthouse BotLearn React App

Learn React App is a resource to learn React.js. But unlike the other resources out there, this should be installed locally in your computer. It not only contains learning materials but it also code and interactive samples. The best part is that you can do it while offline once it is installed.

Learn React AppLearn React AppWP Acceptance

WP Acceptance is new a tool that allows you to perform acceptance tests. To put it simply, Acceptance Tests is a series of tests to emulate user behaviour. There are a number of frameworks out there to perform this type of test.

However, if you’re primarily working with WordPress, you’ll appreciate this tool for the ease of use as it is designed and tailored to the typical WordPress projects need.

WP AcceptanceWP AcceptanceShiny

A JavaScript library to emulate lighting reflection on your website when viewed on mobile device. You can view the demo in https://pqina.nl/shiny/. It is worth noting that it will only work in mobile device as it relies on a certain API that’s only available in a mobile devices.

ShinyShinyReact Lucid

ReactLucid is a tool to help you debug React and GraphQL applications 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.

React LucidReact LucidCSS Features Toggle

A Chrome extension that allows you to disable certain CSS features in Chrome. 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 the browsers.

CSS Features ToggleCSS Features ToggleBlendy

A tool that can help you customize CSS background blend modes with your image. You can preview blend modes, change colors, and apply gradients. You can use images from Unsplash or upload it from the computer.

BlendyBlendyReact Elemental

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 Button, Checkbox, SelectList,

Previous

Next

%d bloggers like this: