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