Fresh Resources for Web Designers and Developers (March 2019)
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 extend WordPress functionality.
Second, several of our fellow developers have created some really useful tools, such as one that allows viewing JSON in the terminal and a couple of React libraries that can prove helpful in web design and development projects.
Finally, some of the most effective resources, references, and plugins have been launched to help you update your projects according to newer trends.
Let’s get to the most comprehensive list of fresh web development resources.
Click Here for More Resources
Check out our complete collection of hand-picked tools for designers and developers.
Gutenberg Handbook
The official WordPress handbook where you can look up references for the design, code examples for creating blocks, 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 in your existing plugins and themes.
CGB
Another way to easily start up a Gutenberg block is Create Guten Block (CGB), 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 them right within the editor. The plugin comes with numerous other compatibilities that provide a seamless editing experience between Elementor and Gutenberg. Check out this video to see how it works in action.
Atomic Blocks
A set of Gutenberg blocks with a growing collection. At the time of this writing, it provides the “Post Grid Block” which allows you to add a list of posts from your site in a grid layout. There’s also a “Testimonial Block” which, as the name implies, inserts 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 features 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 websites in a fancy Card-style, and 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 developers 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 images 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 the Gutenberg editor. Unlike using the Shortcode, the block will display product views.
Test Gutenberg
Not ready to install the 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, 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
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.
ClassicPress
Another alternative is to switch to a WordPress fork, ClassicPress. ClassicPress focuses 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, 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.
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 files and it will alert you when it’s 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.
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 Middleware.
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 other resources out there, this should be installed locally on your computer. 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.
WP Acceptance
WP Acceptance is a new tool that allows you to perform acceptance tests. To put it simply, Acceptance Tests are a series of tests to emulate user behavior. 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 its ease of use as it is designed and tailored to typical WordPress project needs.
Shiny
A JavaScript library to emulate lighting reflection on your website when viewed on mobile devices. You can view the demo in https://pqina.nl/shiny/. It is worth noting that it will only work on mobile devices as it relies on a certain API that’s only available on 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 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 them from your 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 data, 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 in its own category. It’s a kind of Customer Relationship Manager (CRM) but is meant not for your customers 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
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 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 does it work for particular frameworks, but it may also work with new ones as 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-flavored Markdown. Notes are stored in flat file .md files as well as attachments. It just works and is 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 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 links to issues and PRs, and a lot more.
Open WC
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, Yeoman generators to quickly generate an “Open WC” project, which includes the scaffold for testing, linting, and continuous 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 you 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 specifications like CSS Grid, CSS Custom Property (Variable), and custom elements. A perfect framework for those who like to live on the edge.
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 responsive.
