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 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 contributing to the project. It is your first reference for developing with Gutenberg.
Block 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.
CGB
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.
Elementor 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.
Atomic 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.
Block 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.
CoBlocks
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.
StagBlocks
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.
Otter 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.
Advanced 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.
Block 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.
EDD 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.
Test 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.
Gutenberg 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 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 textbook.
GutenbergJS
The JavaScript-only version of Gutenberg. It’s available as an NPM package which allows you to integrate Gutenberg into any of your JavaScript applications.
Disable 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.
Classic 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.
ClassicPress
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
Speed-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.
Visual 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.
Bundlesize
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.
WP 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.
Lighthouse 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.
Learn 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.
WP 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.
Shiny
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.
React 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.
CSS 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.
Blendy
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.
React 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, Tabs, Tooltip, and a lot more.
FX
If you’re often dealing with JSON-formatted, I’m sure you will appreciate this tool. fx is a command line tool that allows you to visualize JSON data in Terminal with interactive mode. in a way that you can expand or collapse the data. fx can be installed via NPM or Homebrew.
Monica
Monica is quite on its own category. It’s a kind of Customer Relationship Manager (CRM) but is meant not for your customer but for your loved ones like your family and friends.
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’t talked to in a while. They call it a PRM (Personal Relationship Manager).
Ionic Framework
Ionic framework has actually been around for a while. But lately, it has made quite a big jump in its functionality. Now not only that it’s faster but Ionic is now compatible with two rising star frameworks: React.js, and Vue.js.
This lays down the ground for Ionic to be a framework agnostic tool. So not only that it works for particular frameworks but may also be working with the new ones as the front-end development evolves in the future.
Notable
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 app editor is mainly powered by Github-flavoured Markdown. Notes are stored in a flat file .md files as well as the attachment. It just works and simple.
TipTap
TipTap is a WYSIWYG editor built on top of ProseMirror 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 Menu Bubble where the formatting menu will appear when highlighting text, the Suggestion feature where you can tag or mention a person within the content, and export the ability to export content in JSON formatting.
Restplain
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 making an API call from within the docs. One thing to note is that it relies on the endpoint schema to generate the documentation, so make sure that you’ve added a proper schema for your custom endpoints.
React Content Loader
React Content Loader is a React custom component that allows you to display content placeholders while the actual content is being loaded. It’s similar to the type of loader that you see on Facebook and Instagram .
Mythic
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 Webpack, Sass, Linting, PHP7 minimum requirement, and BEM. It’s a great theme to level up your skill as a theme developer.
Refined Github
A browser extension to refine your experience when using Github. It adds several handy hotkeys, refines some layouts and UIs, automatically adds link to issues and PRs, and a lot more.
Open WC
Open WC is a set of tools that allow you to create Custom Web Component. It includes the main library to create a Web Component, Yeoman generators to quickly generate an “Open WC” project, which includes the scaffold for testing, linting, and continues integration.
Open WC can be a good alternative if you’d prefer implementing with a native web feature rather than using a framework like Vue.js or React.js.
Gridsome
Gridsome is a tool to build static websites and web applications with Vue.js and GraphQL. It’s 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 prefer Vue.js over React.js.
The Browser
This is the browser as envisioned by the World Wide Web inventor himself, Tim Berners-Lee. It’s a simple browser to render HTML and does not show an address bar like a modern browser but you can view by navigating to Document > Open from full document reference and paste in a URL and click Open. And there you’ll see how your site will render with the original browser.
Raster
Raster is a modern grid framework that’s built with modern HTML and CSS specification like CSS Grid, CSS Custom Property (Variable), and custom element. A perfect framework for those who like to live on the edges.
Hooper
A Vue.js component to add a Carousel or Slider. It’s accessible and usable through Touch, Keyboard, Mouse Wheel, and other assistive navigation, it supports RTL and vertical direction, extensible, and of course response.
