DEV Community: CodeinWP

WordPress.com vs WordPress.org: Key Differences and Which One You Should Use

Dobrin Robert Adrian — Wed, 30 Sep 2020 08:05:16 +0000

WordPress is the most popular way to build a website. But despite its popularity, there’s one question that many new users still struggle with – what’s the difference between WordPress.com vs WordPress.org?

If you search for “WordPress” on Google, the two websites will rank #1 and #2. And if you’re new to WordPress, you might not know which one to use.

This article will explain the key differences between WordPress.com vs WordPress.org and help you pick the best one for your needs.

WordPress.com vs WordPress.org

The key difference between WordPress.com and WordPress.org is who’s actually hosting your website.

With WordPress.org, you host your own site (we recommend this).

With WordPress.com, on the other hand, it’s WordPress.com that takes care of all of this for you (easier to start, less freedom). And that’s the major difference.

Nowadays, hosting companies like Bluehost or SiteGround are as easy to start with as WordPress.com, cheaper and with more freedom.

The cost of using WordPress.com vs WordPress.org

WordPress.com does allow you to set up a website entirely for free, but there are some downsides to this:

You can only place your site under a subdomain
You cannot remove WordPress.com’s own ads and branding from your site
You get limited disk space of 3GB
You can’t monetize your blog or website
You can’t install plugins or any themes that aren’t available on the platform by default

If you do want to use your site for a commercial purpose, you will have to pay at least $8 / month on your WordPress.com plan + the cost of a custom domain name usually in the range of $15 / year. In total, this means at least $111 annually to run a site on WordPress.com.

With WordPress.org, on the other hand, you can launch a completely functional website at $35 for the first year and then $50 every year after that.

To make that happen, you first need to pick a web host. We have some suggestions for you here, but if you’re in a hurry, just go with Bluehost. They’re a respected company with tons of options for WordPress. Here’s what’s good about Bluehost’s offering:

You can get started at $2.95 / month
You get a free domain name for the first year
WordPress will be installed for you automatically

From a user’s point of view, Bluehost works similarly to WordPress.com – as in, you sign up, pick a hosting plan, tell them to install WordPress for you, finalize the purchase and you’re good to do.

Plus, what you also get is complete freedom over what you want to do with your site – something that WordPress.com doesn’t give you. Go here to get started with Bluehost and WordPress.org.

If you need some more info before making up your mind, here’s a more in-depth look at the differences between WordPress.com and WordPress.org:

WordPress.com vs WordPress.org: Pros and cons

Each version has its own pros and cons. (Although, I personally think the .com version has more cons than pros. But you can decide for yourself!)

When to use WordPress.com

With WordPress.com, you don’t have to worry about purchasing hosting or maintaining your site. It also can be free, though there are paid plans as well.

The free plan limits you to 3GB of data and a subdomain (like mywebsite.wordpress.com). It also includes WordPress.com ads.

Furthermore, you won’t be able to install your own “plugins” or “themes” unless you pay for the expensive business plan. Plugins and themes are one of the most helpful things about the WordPress software because they make it easy to customize your site, so that’s a pretty big loss.

If the thought of changing a domain name server (DNS) or backing up your website data sounds incredibly daunting, WordPress.com may be the way to go to create a basic blog/website. But if you want any kind of flexibility, plan to monetize your site, or want your site to grow in the long run, WordPress.com can be very limiting.

When to use WordPress.org

WordPress.org has to be set up with your hosting provider. In most cases, this is a simple one-click install, and is really easy.

In fact, if you purchase your domain name from your hosting provider, you don’t even have to worry about changing DNSs. It will be done for you!

Plus, WordPress.org has much better customization options. You’re able to install plugins, use custom website themes, and do just about anything you want with your site.

You can also monetize your website however you want, which is great if you’re planning to make it a business.

If you want full control over your site and the best possible options, go with WordPress.org.

Even though there’s a bit more of a learning curve, in the long run you’ll thank yourself for making this decision.

Ready to get started? As mentioned, we recommend Bluehost as the place to launch your WordPress website. The setup is easy and they help you along the way, too. For more guidance, here’s our 15 minute tutorial to starting a WordPress website.

10+ Best JavaScript Animation Libraries to Use in 2020

Chris Fitzgerald — Fri, 12 Jun 2020 11:56:21 +0000

If you’re looking to grab your website visitor’s attention, what can be better than animations? Using the many application engines freely available on the web, you can easily get your website’s elements to fade, bounce or whoosh. In today’s post, we’ll see how JavaScript animation libraries can help with all that.

First, a little about JavaScript animations

It’s one thing to add simple animations that need just one action (for instance, toggling). For this, you can always use simple CSS animations. But, for more complex or advanced effects, JavaScript is a better tool. It goes without saying that using JavaScript to create animations is more challenging than using CSS.

Nevertheless, JavaScript can handle things that CSS can’t. This gives developers way more power to control complex animations that need to coordinate multiple moving parts.

JavaScript animations are implemented by adding gradual changes to an element’s style. You can add them in-line as part of your code, or include them in other objects. When rendering, these changes are called up by a timer. Also, you can control the continuity of the animations by adjusting the time interval of the changes.

The best JavaScript animation libraries

Here’s a list of JavaScript animation libraries that you can use to add some awesome-looking animations to your website:

1. Anime.js

Let’s start this list of JavaScript animation libraries with Anime.js. This lightweight animation library clocks 35K+ stars on GitHub. Working from a single powerful API, you can use it to animate HTML, CSS, JS, SVG and DOM attributes. With a built-in staggering system, it can make creating ripples, directional movements, follow-through and overlapping effects appear simple. This system is usable on both timings and properties.

There’s a lot you can do using the built-in callback and control functions. For instance, you can play, pause, control, reverse and trigger events in sync. To see what else is possible using this library, you can visit Codepen.

2. Velocity.js

Velocity.js combines the best of jQuery and CSS transitions. It rates close to 17K stars on GitHub and boasts of prominent users like WhatsApp and Mailchimp. Looping, reversing, delaying, hiding/showing elements, property math (+, -, *, /), and hardware acceleration, all form part of the features.

You can use Velocity.js to scroll browser windows. It can work both with jQuery loaded in your browser and independent of it, and even undo previous animations.

3. Popmotion

At close to 18K stars, Popmotion is a functional animation library for any JavaScript environment. It can work with just about any API that accepts numbers as inputs such as React, Three.js, A-Frame and PixiJS.

Popmotion weighs only 11.7kB, but packs a punch nevertheless. It features animations like keyframes, decay, timeline for synchronizing multiple instances and more. You can stagger any series of animations or functions, as well as use pure functions to compose your own configurations.

4. Three.js

Three.js tops this list of JavaScript animation libraries with 60K+ stars on GitHub. It’s dependent on WebGL to create and render 3D animations in the browser.

There’s a ton of documentation to help you, and once you get past the learning curve, there’s not much you cannot accomplish using this library. Firstly, using the Three.js editor, you create a scene. Thereafter, you get to add geometrical figures, and adjust lighting and camera. The material, texture, object, color and fogging can all be tweaked, and the final file published to your project.

5. GreenSock JS

GreenSock’s GSAP works with a set of small JavaScript files that make animations look great in all major browsers. It smoothly chains multiple animation properties and eliminates browser bugs.

GSAP actions include creating animations on Canvas and animating any object in a scene. Also progressively revealing, morphing or moving any object along a path. For this purpose, it works with a bunch of software applications like SVGPlugins, PixiPlugin, WebGL, Adobe Animate and EaseJS. Its modular structure helps you choose just the functions you need. With 8 million users and 10K+ stars on GitHub, this powerful library has a lot going for it.

6. AniJS

Among the JavaScript libraries in this list, AniJS is somewhat unique. It allows you to add animations to elements in a simple ‘sentence-like’ structure, great for folks new to animation. What’s more, its non-specific nature allows almost everyone to use it in routine UX design.

On GitHub, AniJS rates more than 3.5K stars. It does not rely on any third-party library and generally helps to speed up development. It works just as well on Android and iOS, and also in all the popular browsers.

7. Mo.js

Motion graphics has a big part to play in animations, and Mo.js is one option with which you can make an impact. With a number of tutorials and demos to help out, beginners may not find it hard to create geometrical shapes and time animations to the dot.

The APIs may appear simple, but there’s a lot you can do with them. Within the toolkit, you’ll find a Curve Editor and Timeline Editor to help you build your animations, as well as a Player to control your animations. There are different modules for staggering, easing, timeline and more. All this earns Mo.js close to 16K stars on GitHub.

8. Vivus.js

If you wish to mimic a pen drawing on a screen in real-time, you’ll hit the mark with Vivus. It lets you animate SVGs giving the impression of being drawn. Since it has no dependencies, it’s fast and lightweight.

You can choose any of the available animations – Delayed, Sync or OneByOne. Else, you can also create a custom script to draw your SVG. For more flexibility, you can override the animation of each path using a simple JavaScript function. More than 13K users give a thumbs-up to this library on GitHub.

9. ScrollReveal JS

If you wish to animate your web elements as they scroll into view, ScrollReveal won’t disappoint. This easy to learn animation library has zero dependencies and 18.5K+ stars on GitHub.

ScrollReveal supports different types of effects and works well with web and mobile browsers. It intentionally works with a bare-bones configuration, so you can use it as a canvas for your creativity. To maximize the effect of the animations, the creators advise that you use it sparingly.

10. Typed.js

Typed.js is a simple library (more of a plugin, really) to animate typing on your screen. Once you enter any string, a visitor can watch it being typed at a set speed. Not only that, you can work the backspace button, as well as begin a new sentence. If you wish to allow visitors with JS disabled to also view it, you simply need to place an HTML div on the page. That way, bots and search engines also get to view the typed words.

This library rates 9.5K+ stars on GitHub. Power users include Slack and Envato.

11. Lottie by AirBnB

Lottie is a lightweight animated graphics format that balances high quality graphics against the cost of rendering them. It makes applications smaller and includes dynamic features. It can be used for web, Android, iOS and IoTs, without the need for additional software.

Lottie can run on any browser that supports JavaScript. The animations are stored in plain text and are human readable. Since the text data is stored in the JSON format, it’s easily assimilated with any JavaScript environment. This makes it a popular animated graphics format to enhance mobile frontends. The android version alone enjoys close to 30K stars on GitHub.

15+ Front-End Tools You Should Know About: My Favorite Finds for 2020

Chris Fitzgerald — Tue, 09 Jun 2020 12:28:17 +0000

This post was originally written by Louis Lazaris for CodeinWP

If you’re like many web developers in the industry, you probably discover new front-end tools every day. I’m in the same boat, especially since I’m deeply involved in regularly researching what’s new in the tools landscape.

In this post, I’m going to round up (with some screenshots and demos) some of the most interesting front-end tools I’ve found that I think you’ll find useful. These aren’t necessarily the most popular tools or the hottest tools, but I think each of them is unique in their use case and deserve a little more attention. These are essentially my favorite finds from the past months in front-end tools.

Hotkey

Detecting keystrokes with JavaScript isn’t an overly complex task, but this little utility from the team at GitHub makes it super simple.

With it you can trigger an action on an element with a keyboard shortcut.

The types of shortcuts include a key, key combo, or even key sequence. You can also have multiple shortcuts for a single action.

The JavaScript is just one declaration along with an import:

import {install} from './hotkey.js';

for (const el of document.querySelectorAll('[data-hotkey]')) {
  install(el)
}

Once that code is in place, the main work is done in the HTML. Here’s a list of links that I created to display some content depending on the shortcut used:

<ul>
  <li><a href="#a" data-hotkey="a">Example</a></li>
  <li><a href="#b" data-hotkey="Control+b">Example</a></li>
  <li><a href="#f" data-hotkey="f,p">Example</a></li>
  <li><a href="#and" data-hotkey="& *">Example</a></li>
  <li><a href="#enter" data-hotkey="Enter">Example</a></li>
</ul>

Notice the data-hotkey attributes added to each of the links. These are what enable the hotkeys for the targeted actions (in this case, triggering a :target selector via CSS). Multiple hotkeys are separated by a comma; key combinations are separated by a plus symbol; and key sequences are separated by a space.

Here’s a live demo:

Try out each of the shortcuts and notice that the code in the JavaScript panel is minimal. Very simple to set up, once the module is imported. And as a side point here, if you have an app with multiple shortcut keys that you want to display in a modal window (as is done on Twitter, GitHub, etc.), you might want to check out QuestionMark.js, an old project of mine.

Of course, with keyboard shortcuts, you’ll want to take note of accessibility concerns so be sure to check out the repo’s README for info on that.

Freezeframe.js

Embedding brief videos in web pages is common to show an action taking place. Sometimes an animated GIF is also appropriate. But GIFs tend to be distracting because they play their content automatically.

This little utility allows you to add video-like functionality to animated GIFs embedded in your HTML.

Once you include the Freezeframe.js source in your page, you need only a single JavaScript declaration:

new Freezeframe('.freezeframe', {
  trigger: 'hover',
  overlay: false
});

If you drop the second argument (e.g. new Freezeframe('.freezeframe')) it will default to no play button and the animation triggers on hover. The only flaw with this is that, because it’s an animated GIF, you technically can’t “pause” it, you can only “stop” it (which means it starts again from the beginning). But usually with GIFs, this isn’t a big deal.

Here’s a demo with three different examples:

Using this tool alone, however, might not save on performance as it seems the full GIF loads behind the scenes. But I’m assuming this could be used along with a lazy load library if the GIF is off screen when the page loads.

ARC Toolkit

Your go-to front-end tools should include plenty of accessibility options.

This is a Chrome extension that adds a tab to your developer tools to help you find accessibility errors and warnings related to the WCAG 2.1 Level A and AA guidelines.

Two reasons why this tool is so great:

It integrates with your existing testing/debugging workflow inside the developer tools
It’s made by the The Paciello Group, who are well known in the developer community for their accessibility insights

Once the extension is installed, just choose the tab in your developer tools and select “Run Tests”. The initial output will be similar to what you see in the previous screenshot. From there you can drill down to view any potential accessibility problems related to a specific feature, as shown in the next screenshot:

Notice the “Links” option on the left has the checkmark next to it. That’s what I’ve chosen to examine in this instance. This also adds an overlay on the page showing where all the selected objects are, as you can see above the developer tools on the live page.

Scene.js

Every year there seems to be a new animation library of sorts on the front-end tools landscape.

My pick for this year (so far) is Scene.js.

This is not one you can just pick up and work with in a matter of minutes like the others featured so far.

There’s a learning curve to get used to the API, which looks something like this:

let scene = new Scene({
  ".searchbox": {
    "0%" : "width: 50px",
    "70%": "width: 300px",
  },
  ".line": {
    "30%" : "width: 0%",
    "100%": "width: 100%",
  }
}, {
  duration: 1,
  easing: Scene.EASE_IN_OUT,
  selector: true,
}).exportCSS();

scene.setTime(0);
let toggle = false;

document.querySelector(".submit").addEventListener("click", function() {
  toggle = !toggle;
  scene.setDirection(toggle ? "normal" : "reverse");
  scene.play();
});

That’s the code for one of the examples on the home page. It’s a simple little animated search box. Here’s their CodePen demo:

Again, this won’t be an easy tool to learn quickly, but if you’re interested in trying out a new animation library with what seems to be a pretty straightforward API, this might be a good option.

Commento

The current privacy-aware online landscape could use more tools like this one. I’ve been considering options for improved commenting systems on my WordPress website for a while now and Commento looks solid.

I like the functionality of something like Disqus (upvotes/downvotes, top comments, etc.) but it has too much bloat.

I also like that WordPress comments are self-hosted by default, but they lack those extra features of Disqus. I think Commento is a step in the right direction to fix these problems.

If you are considering switching from an existing commenting platform to Commento, it is quite a bit of work from what I’ve read, so that’s a big downside.

Also, although Commento allows you to import from Disqus, you won’t be able to import the “votes” on old comments from Disqus or the avatars from the users who posted comments.

There’s also no way to import old WordPress comments into Commento unless you first export to Disqus, then import from Disqus to Commento (which can be done using a Disqus import tool when you sign up for Commento).

The final drawback is the fact that Commento is not free unless you self-host it. But when you consider the bloat and privacy issues of Disqus, the small monthly fee is worthwhile.

Git History

Although this is not solely in the front-end tools category, it’s one of my favorites on this list because of its simplicity and novelty in the way it works.

Git History allows you to view the history for any file in a public Git repo (GitHub, GitLab, or Bitbucket).

For example, let’s say you want to view the history of changes to the source file for Normalize.css. The file is located at:

https://github.com/necolas/normalize.css/blob/master/normalize.css

In order to view its history, replace github.com in the URL with github.githistory.xyz:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

The output at the new URL loads up a neat, interactive way to view the file’s changes over time. Some cool animations are triggered every time you choose a history point, allowing you to see which changes took place and which user committed them.

CSS Feature Toggles

If you’re still working in an environment where you have to do some legacy browser testing, this might be a nice little Chrome extension to add to your testing toolbox.

CSS Feature Toggles, similar to ARC Toolkit mentioned above, adds a new tab to your browser’s developer tools.

In the tab, you’ll notice a list of modern CSS features.

You can toggle these to instantly see how your page looks when a user visits the page in a browser that doesn’t support that particular feature. This is a great way to get a quick overview of how your layouts degrade in older environments.

When selecting the different features, the page will update automatically to display the changes. A site built with Flexbox, for example, will benefit from some older CSS to keep the layout sane while progressively enhancing in newer browsers.

Create App

No doubt your front-end tools workflow includes plenty of options for builds. This website is a combination of a learning site and a project generation tool for developers using (or wanting to learn how to use) webpack or Parcel, the popular asset bundlers.

Drill down into the categories on the left to choose the options you want for your build, then see the necessary files and configuration options appear in the main window.

The page is fully interactive, so you can click on any of the virtual files to view their contents, or you can hover over a selected option to view a description along with highlighted portions of the build that are relevant to that option.

Very useful both for learning and for creating new projects!

CSSJanus

In the area of internationalization, this is an online tool that allows you to convert stylesheets from left-to-right to right-to-left, and vice-versa.

This allows you to easily create stylesheets for right-to-left (rtl) languages like Arabic and Hebrew.

Here’s a CSS example:

.example {
  float: left;
  text-align: left;
  padding: 1px 2px 3px 4px;
  margin-left: 1em;
  background-position: 5% 100px;
  cursor: ne-resize;
  border-radius: 1px 2px;
}

The above will get converted to the following:

.example {
  float: right;
  text-align: right;
  padding: 1px 4px 3px 2px;
  margin-right: 1em;
  background-position: 95% 100px;
  cursor: nw-resize;
  border-radius: 2px 1px;
}

Notice that the differences include not only lines like float: left and text-align: left but others like horizontal padding declarations and background-position values.

And usefully, if you want the tool to ignore a style block or a single declaration, you can use the @noflip directive:

/* @noflip */ .ignored {
  float: left;
}

.not-ignored {
  float: left;
  /* @noflip */ background: #fff (poster-ltr.png);
}

Color Thief

Color Thief is really neat and fairly simple to use but is very specific in its use cases.

Basically, using this utility, you can use JavaScript to grab a color palette of anywhere from 2 to 20 colors based on a given image.

This isn’t something you’ll use on every website or app, but it’s a nice idea and apparently has been around for a while and was updated over the past year.

Using the simple API, you can grab a palette from the image with a single line:

let myPalette = colorThief.getPalette(img, 10);

From there, it’s just a matter of manipulating the array that’s returned. You can see a demo I built in CodePen below that grabs a user-entered number of colors from the image shown. The code I’m using on the array is:

myPalette.forEach(
  element => colors.innerHTML += "<div class='color' style='background-color: rgb(" + element + ")'></div>"
);

I’m building the palette using <div> elements and inline styles. The colors are returned as RGB values.

In the CodePen demo, I’m using a workaround to get around the cross-origin problems I ran into on CodePen, but normally you won’t need those lines (commented) in a customary environment.

RegexGuide

It seems like every year I find a cool interactive app to add to my collection of front-end tools that helps build regular expressions, so here’s this year’s entry. And if you’re like me, you’ll take all the help you can get building these.

This one is a little odd to get your head around at first because it goes through the steps one by one, like a wizard.

When you’re done and have all conditions in place, you’re able to try different values to meet the specified conditions and the page will interactively indicate what works.

These kinds of tools are always some of my favorites because they work not only as a way to create code that would otherwise be tedious, but they help you learn the syntax too.

Front-end tools: honorable mentions

So those are, in my opinion, some of the more interesting front-end tools I’ve found that I think didn’t get enough attention over the past year. I’m sure you have your own such finds so feel free to drop them in the comments below. Meantime, here’s a final list of stuff that didn’t quite make the main list but I thought were worth mentioning:

wehatecaptchas - A captcha alternative with no image or letter/number deciphering, not even a checkbox to “confirm I’m not a robot”
simpleParallax – An easy way to do parallax effects with JavaScript.
Lite YouTube Embed – Apparently 224X faster than the traditional embed code.
Browser Default Styles – Enter any HTML element and this tool will tell you each browser’s default CSS for that element.
Who Can Use – Enter a two-color combination and this tool will tell you which kinds of visually impaired users can use that combo for text/background.

20+ Best React UI Component Libraries / Frameworks for 2020

Chris Fitzgerald — Fri, 17 Jan 2020 12:22:17 +0000

React is open-source JavaScript library that helps you build a top interface for both the web as well as mobile apps. It combines conveniently with other JavaScript frameworks and libraries and contains tiny, standalone bits of code called components. It’s these components that are going to be in the spotlight in this list of Best React UI component libraries and frameworks.

The nice thing about components is that they’re modular without many app-specific dependencies. This means that you get to reuse the components to build awesome apps and interfaces super fast. And thanks to Bit, you can share them with other React enthusiasts too.

Before you start your next project with React, take a few minutes to scan this list of best React UI component libraries that can help you create an awesome looking UI.

Best React UI component libraries and frameworks in 2020

Material Kit React

Created with inspiration from Google’s material design, Material Kit React builds a set of elements that put consistency as the main feature. That way, your web project retains a similarity in appearance and functions all through.

The general layout resembles multiple sheets of paper. This imparts a depth and order to the layouts. Three example pages are included. Not only will these pages illustrate what’s possible with this kit, they also serve as templates where you can substitute text and images with your own.

The kit also contains a number of basic elements such as buttons, badges, sliders, menu, pagination, navigation bars, tabs and pills. You’ll be able to customize the style, size and color for most elements. The JavaScript elements include Modals, tooltips, date-time picker, carousels and popovers. Besides using the kit to start a new project, you can also restyle any old Bootstrap project. The Pro version contains a lot more components, sections and example pages.

Shards React

Shards React is an open source, modern React UI kit that’s built from scratch and geared towards fast performance. The modern design system allows you to change many things. What’s more, you can download the source files to change things at code level too. The SCSS used for styling only enhances developer experience.

This library is based on Shards, and uses React Datepicker, React Popper (a positioning engine) and noUIShlider. It supports Material and Fontawesome icons. The Shards Pro package has 15 pre-made pages that help you get started. Helpfully, these pages use blocks that you can move around.

With ~270 stars on Github, it also includes dozens of custom components such as range sliders and toggle inputs. The 350+ components ensure that you can build almost every type of website with Shards React.

Material-UI

With close to a whopping 45K stars on Github, Material-UI ranks among the most popular React UI component libraries. The components rely on React, but use Google’s Material Design. For those of you who need filling in, material design takes inspiration from the physical world and textures while keeping the actual UI elements to a minimum.

A wide range of helpful components are available, like app bars, auto complete, badges, buttons, cards, dialog boxes, icons, menus, sliders and more. Helpfully, Material-UI also offers React themes and templates, so you can have a custom color theme for your app.

React Bootstrap

Next on our list of React UI component libraries is React Bootstrap, a UI kit that retains it’s Bootstrap core. In order to give you more control over the form and function of each component, it replaces Bootstrap’s JavaScript with React. Each component is built to be easily accessible, important for front-end framework building.

And since React Bootstrap doesn’t deviate much from its Bootstrap origins, developers can choose from the thousands of Bootstrap themes readily available. It’s earned 14500+ stars on Github.

React Virtualized

Building a frontend that’s data heavy? React Virtualized may be the library you need to dip into. It includes numerous components for efficiently rendering large lists, tables and grids. For example, you’ll find masonry, columns, autosizers, direction sorters, window scrollers and more. Further, you can customize the tables by configuring the row heights, and display placeholders in the cells.

Also, React Virtualized has very few dependencies and supports standard browsers, including recent mobile browsers for iOS and Android. It has 14,000+ stars on Github.

Argon Design System React

This library offers a free design system for Bootstrap 4, React, and Reactstrap. It comes with 100 modern and gorgeous elements that are implemented in a fully-functional code, so you can switch from a page to the actual website effortlessly.

The Argon Design System offers pre-built example pages and a handful of variations for all the components such as colors, styles, hover, and focus.

Take a sneak peek at the entire set of components, featuring basic elements, typography, navbars, alerts, images, icons, Javascript components, and more.

Blueprint

The React components in Blueprint are primarily for use on desktop applications. These components are particularly suitable for building complex and data-dense interfaces. From the component library, you can pick up bits of code for generating and displaying icons, for interacting with dates and times, for picking timezones and more.

What else is in this components library? A lot really – breadcrumbs, buttons, callouts, cards, divider, navbars, tabs, tags and much more. On Github, it clocks 13,000+ stars.

Semantic UI React

Semantic UI uses human-friendly HTML for it’s development framework, and has integrations with React, Angular, Meteor, Ember and many other frameworks. All jQuery functionality has been re-implemented in React.

It allows you to load any Semantic UI CSS theme on top of your Semantic UI React app. What’s more, you’ll also have complete access to the markup, which means there’s flexibility in customizing components. It’s star count on Github is near 9,000.

React Toolbox

Another React UI components library that you can use to implement Google’s material design principles in your project is React Toolbox. React Toolbox relies on CSS modules for this purpose. Though you can use any module bundler, it integrates neatly with webpack workflow. Thoughtfully, the team at React Toolbox provides visitors with an in-browser editor where you can experiment with the components in real-time.

While working with React Toolbox, you can choose to import components in bundles or raw components. The difference is, for the former, the components come with all necessary dependencies and themes injected for you. This means that the CSS for each dependency will be available in your final CSS automatically. On the contrary, with raw components, no CSS is included. This means you’ll have to provide a theme via properties to the component to be properly styled. React Toolbox is reaching the 8,500 mark on Github.

React Desktop

Our next components library, React Desktop uses macOS, Sierra and Windows 10 components with the aim of bringing a native desktop experience to the web.

This collection is a JavaScript library built on top of Facebook’s React library and it’s compatible with any JavaScript based project. This tool crosses the 8,000 star rating on Github.

Onsen UI

In case you’re into creating cross platform mobile apps, you’ll be interested in this offering on our list of React UI component libraries. Onsen UI is a mobile app development framework that uses HTML5 and JavaScript and provides integration with Angular, Vue.js and React. All the components are auto-styled based on the platform, and so it supports both iOS and Android using the same source code.

Onsen UI is compatible with many popular frameworks. An interactive tutorial helps you get a good start with this tool. The component library employs pure CSS with no JavaScript behavior. For some extra details, custom elements help out. The star count on Github exceeds 7,000.

Evergreen

Evergreen contains a set of React components that’s suitable for enterprise-grade web applications. Since it uses React Primitive, it’s highly flexible. At the same time, it works just as easily right out of the box.

It includes a wide range of components and tools starting from basic layouts, typography, colors and icons to function-based components such as dropdowns, toggles, file uploads and feedback indicators. After installing the Evergreen package, you can pick and choose the components you want to import. It scores a 7,000+ star rating on Github.

Reactstrap

For simple React Bootstrap 4 components, check out Reactstrap. It comes with two primary distribution versions. One, a basic version that excludes optional dependencies. This gives you more flexibility in configuring required dependencies.

The second version is the full version that includes all the optional dependencies. This one is recommended for smaller applications. Reactstrap is yet another collection in the React UI components library that crosses the 7,000 star mark on Github.

Rebass

Rebass contains only eight foundational components, all in a super-small file. The components are extensible and themable, and built for responsive web design.

The components use styled-system and serve as a great starting point for extending into custom UI components for your app. The ThemeProvider can also help you with this. The star count on Github is nearing 5,000.

Grommet

Grommet has a wide library of components in its kit and counts big names like Netflix and Boeing among its users. Whether your app is for phones or for wider screens displays, you’ll be able to design layouts. Accessibility is via keyboard or screen reader.

Theming tools help with the customization for color, type and layout. This React UI components library rates a star count exceeding 4,000 on Github.

Elemental UI

Elemental UI provides a number of basic functional components for standalone use or in any combination, whether in default style or after theming. Some of the components include forms, buttons, cards and modals.

The project is under development, but manages a 4,000+ star rating on Github.

RSUITE

RSUITE contains a range of component libraries for enterprise system products. It supports all major browsers and platforms as well as server-side rendering.

If you’re at home with Less development, customizing the components should not pose any problem. The components in this library include icons, loaders, dividers, tooltips and more, and RSUITE has close to 2,500 stars on Github.

Belle

Among the most interesting React UI component libraries, Belle offers a truly wide range of components. You can customize these components at two levels – the base level for all components collectively, as well as each component individually.

The components come with support for mobiles and ARIA support. The way to go about using Belle is to first set up a simple app with React, and then import any Belle component and begin using it right away. This component library has more than 2,300 stars on Github.

React-md

One more React UI components library that you should consider if you want to implement material design in your project is React-md. It gives you a choice of React components that work with Sass. For this purpose, there’s a separation of styles in Sass in lieu of inline styling. This makes it easier for you to customize components in line with existing styles.

Colors and typography can be customized and the detailed documentation will help you get past the basics. On Github, React-md counts close to 2,000 stars.

PrimeReact

This list of React UI component libraries would not be complete without PrimeReact. It provides components to cover almost all basic interface requirements such as input options, menus, data presentation, messages and more.

It pays attention to mobile experience, too, with touch-optimized responsive design elements. There are a number of templates and themes that allow you to customize and choose between flat and material design. This component library is nearing 800 stars on Github.

KendoReact

Unlike the foregoing React UI component libraries, KendoReact is a premium set of components, with licenses starting at $799. It boasts an impressive client list that includes Microsoft, NASA and Sony. And you too can use it to create fast and feature-rich apps with impressive UI.

The component set is built specifically for React development. This ensures zero dependencies and all the components are fully optimized for React. Plus, if you’ve got an existing component library, you can simply add to it from KendoReact without having to rewrite the whole library.

5 Email Scripts to Crank Out the Perfect Follow Up Email to an Unresponsive Client

Chris Fitzgerald — Thu, 21 Nov 2019 13:48:20 +0000

If you’re a freelancer, contractor, or small business owner, working with clients can be one of the most challenging parts of your job. This is especially true when those clients become mysteriously unresponsive. When this happens, you’ll need to be vigilant in sending a follow-up email. And this is where some handy email scripts come into play.

When written with a little thought and foresight, the right follow up email can produce quick results.

If you’re not sure how to do this, don’t worry! Seeing a few examples and understanding how (and why) they work is usually all you’ll need to start using this tactic effectively in your business.
In this post, we’re going to introduce five common situations involving unresponsive clients.

For each, we’ll provide a sample follow up email, and explain why it’s likely to produce results. Let’s start at the top!

Why it pays to design a carefully-worded follow up email

When it comes to creating email scripts, it’s well worth your time to design them carefully. A hastily-sent email can do more harm than good, so you’ll want to be strategic.

This involves a number of considerations. You’ll want to think about the action you’d like the recipient to take, and how you can gently (yet firmly) encourage them in that direction. In addition, it’s vital to pay attention to every single word you use. Tone and intent matter just as much here as content – especially when you’re dealing with an unresponsive or difficult client.

Writing solid email scripts that return results takes practice. However, to get you started, we’re going to present a number of examples you can use and learn from.

We’ve worked with a lot of challenging and hard-to-contact clients over the years, and what follows are the types of emails we’ve found work best.

Five email scripts you can use to follow up with unresponsive clients

Let’s now take a look at the five scripts themselves! By using (and perhaps slightly tweaking) these emails yourself, you can greatly increase your chance of making successful connections.

They’re in no order of importance or relevance, so you’re free to dip into whichever one takes your fancy first!

1. Follow up after a proposal submission

Few things are more frustrating then sending off a detailed proposal for a new project, and hearing nothing back. You’re ready and waiting to get started, and each day’s delay means one more day you’ll have to wait for payment once the project wraps up.

The good news is that a lack of response to a proposal rarely means the client is unhappy with it or unwilling to move forward. On the contrary, they’ll usually let you know of this straightaway. Instead, you’ll often find they’ve been too busy to give it much thought, or even to fully read your email.

In the words of Mercedes Cardona at OMH Communications:

Everybody gets far more email than they can read every day, and we’re all weeding out spam aggressively. Sometimes, a useful lead gets thrown out by mistake – it happens.

Even so, you’ll certainly want to follow up with this client. You need to stay at the forefront of their minds, and remind them to take time out of their schedule to give your proposal the attention it deserves. Usually, a gentle nudge is all it will take:

Hi [Client name],

I was wondering if you've had a chance yet to look over our most recent proposal. [Brief, one-sentence summary of the proposal itself].

We're eager to hear your thoughts, and to get started on this project! Please let me know if you have any questions regarding the specifics of the proposal (as outlined in my previous email).

This message opens with a polite acknowledgment of how busy the client is, and that you understand they may not have been able to give your proposal a thorough look yet. Then, it briefly reminds them of the proposal’s focus, so they don’t have to go back to the previous email in order to orient themselves.

The second paragraph is the crucial element here. It’s a good idea to let the client know you’re excited about the project (even if you’re also feeling frustrated). This enthusiasm can be the push they need. Plus, by soliciting questions, you’re telling them they don’t need to immediately approve or reject your proposal, but are free to voice any queries or concerns they may have about it first.

Of course, you’ll want to close the follow up email with your favorite sign-off phrase and your name. In addition, you should avoid terminology such as “there’s no rush” in this sort of message. While you want to remain polite and thoughtful, you also want to encourage the client to take action as soon as possible (your bank account is depending on it!).

2. Reminder that you’re waiting on a response

This may be the most common situation you find yourself in when dealing with unresponsive clients. You’re in the middle of some kind of project, and you can’t proceed further until the client answers a key question or provides a particular resource. Yet you’re met with radio silence.

Following up promptly in this situation is in the best interests of both you and your client. After all, both of you want the project to carry on smoothly and avoid wasting time. As with the previous scenario, it’s highly likely that the client did see your email, but forgot about it or has it marked to deal with later.

This follow up email can be sent anywhere from a few days to a week after the prior communication, depending on the project’s urgency:

Hi [Client name],

I wanted to follow up, and see if you've had a chance to review my previous email. As I mentioned, [briefly restate the question or remind them of what you need].

Once we have your answer, we'll be able to proceed straightaway to the next stage of the project. Let me know if I can provide any further clarification on what we need!

The first paragraph is structured in a similar way to our last example, which is deliberate. Here too, it’s important to acknowledge how busy the client is, and to avoid any air of impatience or frustration.

Plus, reminding them briefly of your query lets them know exactly what you’re looking for. At the same time, you don’t want to get too detailed here, as the client can simply go back to the previous email to read over your full request.

The next sentence is designed to let the client know (politely) the importance of this particular message. In other words, they may not have realized the lack of response has led to a roadblock on your end.

Then, the offer to provide clarification wraps up this brief follow up email, while making it clear you’re ready and waiting to discuss anything unclear in your original message (thus delaying their response).

3. Solicitation for new work

Staying in close communication with your clients is always important. However, it’s never more essential than right after a project wraps up. It’s all too easy for a client to forget about you and move on to the next thing at this point – which is the last thing you’ll want.

Therefore, if you’ve finished a project for a particular client and haven’t heard anything from them for a little while, you’ll want to send along a request for new work. The best approach to this email can vary a bit depending on the specific circumstances, but here’s an example of an effective message:

Hi [Client name],

As you know, we recently wrapped up [project name/description of project]. We hope you're happy with the results!

We're eager to move forward with the next project – here's all we'll require from you:

- [Brief list, in bullet point form, of necessary questions and/or requests for information or resources.]

Once we have this infraction, we can move forward to the next phase. Of course, please let me know if there are any questions I can answer as well.

This follow up email relies somewhat on the assumption that both you and your client are aware of your usual process, and have worked on multiple projects in the past. It may need a little personalization to reflect the type of projects you’re working on, but it provides a solid framework nonetheless.

The first paragraph serves two purposes (besides simply being an introduction to the email). It reminds the client of the recently-completed project, and of their (hopefully) positive reaction to its quality. Remembering what a good job you did previously should whet their appetite for more of the same.

Expressing your own eagerness to get started is always a good touch. However, the real star of the show here is the bullet point list of questions/requests. Listing out what you need from the client (instead of writing it all out in paragraph form) makes your requirements crystal-clear. It also increases the chances of getting a response to each specific inquiry.

Wrap it all up with a nudge forward and a request for any questions the client might have, and you have a simple but effective follow up email on your hands.

4. Request for an overdue payment

This one is a little tricky. Talking about money can be stressful, especially if you’re a creative who’d rather have nothing to do with the financial element of the business. This is even more pertinent when it comes to following up with a difficult client who’s overdue on their payment.

First and foremost, you’ll want to go into this communication as polite as possible. Don’t insinuate that the client is negligent, or start making threats. Instead, proceed with the assumption that the client has simply forgotten to pay. Even if there’s another reason for their delinquency, this approach can essentially guilt them into pulling out their wallet:

Hi [Client name],

I wanted to touch base, and remind you about the payment due on [date on invoice]. As of yet, we've not received your payment. Could you let us know when we can expect to receive it please?

It’s best to keep this type of follow up email short and sweet. You don’t want the key message to get overlooked. Plus, there’s no reason to throw in a bunch of qualifiers. Simply reminding them that payment is due – politely – often does the trick. However, you do want to give them all of the pertinent information, such as an invoice number, and the email it was sent to originally. The idea is to make payment as easy as possible.

You can essentially repeat this email as many times as you feel necessary. However, if you still don’t receive a response, you may eventually need to get more forceful. Here’s a follow up email you might send if they fail to respond to a few messages like the one above:

Hi [Client name],

We have still not received your payment for [project name/description]. We'll be expecting the full invoice amount – [amount of payment] – by [new due date], or we'll potentially have to refer this matter to a collection agency.

This is a firm and straightforward message, which is appropriate for a client who is both failing to pay and to respond. Giving them a reminder of the payment amount and a new due date may finally spur them into action.

If not, you might have to cut your losses with this particular client and consider this a learning experience. Of course, you can actually hire a collection agency to follow up for you – but the hassle and fees involved make this a less desirable option unless the bill owed is very large.

5. The final email

The previous follow up emails are designed to get a response whenever possible. However, sometimes a client simply goes quiet despite your best efforts.

If you’ve sent several messages to a client and they just aren’t responding (and they don’t owe you any money), it’s time to send one last follow up email. It might look something like this:

Hi [Client name],

It's been some time since we've heard from you. At this point, we have to assume your priorities have changed, or you're taking your business in a different direction.

Please feel free to reach out in the future if we can be of any further assistance!

This message accomplishes a few things. It’s polite and understanding for one, showing that you bear the client no ill will for their lack of response. Even if you don’t hear from them now, you’ll want to keep the relationship on as positive a note as possible.

What’s more, making it clear you’re moving on this way plays on the client’s fear of missing out (FOMO). They should recognize that if they want to continue benefiting from your services, they’ll need to act quickly.

Finally, you’ve made it clear you’re open to any future communications. It’s not uncommon to suddenly hear back from an old client months or years down the line, when priorities and personnel have changed. Wrapping your email up this way gives you the best possible shot of getting a response.

Conclusion

Unfortunately, there’s no way (yet!) to reach through your computer screen and make your client respond to a crucial message. However, sending a carefully-crafted follow up email can produce the results you’re looking for, while keeping your relationship on a positive note.

In this article, we’ve introduced you to five email scripts you can use to chase up unresponsive clients:

1. Follow-up after a proposal submission.
2. A reminder that you’re waiting on a response.
3. Solicitation for new work.
4. Request for an overdue payment.
5. The final email.

Have you ever had success getting an unresponsive client to talk?

How to Make Your Plugin Compatible With Gutenberg: Part 2 (Sidebar API)

Chris Fitzgerald — Thu, 19 Sep 2019 06:25:31 +0000

If you’re trying to make your plugin compatible with Gutenberg, you have a couple of paths that you can/should take – depending on what your plugin does and how it delivers its features to the user.

In the first part of this mini-series, we explored Gutenberg’s Block API – which is what most plugins need in terms of Gutenberg-compatibility. This time, we will be exploring another piece of the Gutenberg puzzle – Gutenberg’s Sidebar API.

Just to make sure we’re on the same page, a quick explanation:

Gutenberg’s Block API is very extensive and allows you to build almost everything as blocks, but, at times, it is not enough.
Sidebar API, on the other hand, allows plugins to register a sidebar where they can take their functionality beyond blocks. The Sidebar is similar to Block Inspector.

For example, Gutenberg Sidebar API in use as demonstrated by Yoast SEO:

Where can you use Sidebar API?

We recently worked on making our plugin – WP Product Review – ready for Gutenberg. WP Product Review used meta fields for adding review data to the post, and we couldn’t turn into a block for various backward-compatibility reasons. Hence, we used Sidebar API.

Here's the plugin's block in the classic editor:

When users indicate that the post is a review with a sidebar toggle, they’ll be able to configure everything about their review box from the sidebar options.

WP Product Review is one of the examples where Sidebar API can be useful. Another great example is the Drop It plugin, which allows users to insert stock images from Unsplash and Giphy using the sidebar.

In this post, I’ll walk you through the process of implementing something similar and making your plugin Gutenberg-compatible through Sidebar API.

Meta boxes are kind of ready for Gutenberg by default, but not quite

Let’s start with meta boxes. Let’s take a plugin that uses a simple meta box to deliver some functionality to the user on the editor screen.

This can look like the following in the Classic Editor:

You can use the following code to create such a meta box – it is also available in the Hello Gutenberg repository:

/**
 * Register Hello Gutenbert Meta Box
 */
function hello_gutenberg_add_meta_box() {
    add_meta_box( 'hello_gutenberg_meta_box', __( 'Hello Gutenberg Meta Box', 'hello-gutenberg' ), 'hello_gutenberg_metabox_callback', 'post' );
}
add_action( 'add_meta_boxes', 'hello_gutenberg_add_meta_box' );

/**
 * Hello Gutenberg Metabox Callback
 */
function hello_gutenberg_metabox_callback( $post ) {
    $value = get_post_meta( $post->ID, '_hello_gutenberg_field', true );
    ?>
    <label for="hello_gutenberg_field"><?php _e( 'What\'s your name?', 'hello-gutenberg' ) ?></label>
    <input type="text" name="hello_gutenberg_field" id="hello_gutenberg_field" value="<?php echo $value ?>" />
    <?php
}

/**
 * Save Hello Gutenberg Metabox
 */
function hello_gutenberg_save_postdata( $post_id ) {
    if ( array_key_exists( 'hello_gutenberg_field', $_POST ) ) {
        update_post_meta( $post_id, '_hello_gutenberg_field', $_POST['hello_gutenberg_field'] );
    }
}
add_action( 'save_post', 'hello_gutenberg_save_postdata' );

So the question to ask here is:

Do we need to make this Gutenberg-compatible in the first place?

At this point, we should consider asking ourselves what Gutenberg-compatible is. For instance, if you use this very meta box in Gutenberg without making any changes to it, it will still work.

However, when we talk about Gutenberg compatibility, we are not talking merely about the plugin working in the Gutenberg environment, but the plugin working like Gutenberg.

“Why?” – you’d ask. Quite simply, users who will start using WordPress after Gutenberg is the default editor will find the old ways to be counter-intuitive. Furthermore, they will expect a more Gutenberg-like style for everything in the editor.

If you don’t provide users with a native feel, they will certainly look for alternatives that will work better with Gutenberg.

Finally, let’s get our hands dirty with some code!

Getting started with Sidebar API

We will start coding our Sidebar in Gutenberg to include our meta field. You can continue using the Gutenberg Boilerplate repository as a starting point.

Getting your meta box ready for Gutenberg

Before we start, we first need to tell Gutenberg that we won’t be using our meta box in Gutenberg. You can do it by passing the __back_compat_meta_box argument to the add_meta_box function, like so:

/**
 * Register Hello Gutenberg Metabox
 */
function hello_gutenberg_add_meta_box() {
    add_meta_box( 'hello_gutenberg_meta_box', __( 'Hello Gutenberg Meta Box', 'hello-gutenberg' ), 'hello_gutenberg_metabox_callback', 'post',  array(
        '__back_compat_meta_box' => false,
    ) );
}
add_action( 'add_meta_boxes', 'hello_gutenberg_add_meta_box' );

Gutenberg Handbook has more details on how you can handle porting PHP meta boxes to Gutenberg (here).

This will make sure that our old PHP meta boxes don’t appear in Gutenberg anymore. Now we also need to make our meta field ready for Gutenberg by adding it to WordPress REST API. You can add the following code to register the meta field with REST API:

/**
 * Register Hello Gutenberg Meta Field to Rest API
 */
function hello_gutenberg_register_meta() {
    register_meta(
        'post', '_hello_gutenberg_field', array(
            'type'      => 'string',
            'single'    => true,
            'show_in_rest'  => true,
        )
    );
}
add_action( 'init', 'hello_gutenberg_register_meta' );

This will add the _hello_gutenberg_field to the meta object in REST API.

This function will only do the job of displaying our value in the REST API. Now we also need to add a method to update our meta field using REST API.

The following code will add our custom route to WordPress REST API, which will be /hello-gutenberg/v1/update-meta/:

/**
 * Register Hello Gutenberg Metabox to Rest API
 */
function hello_gutenberg_api_posts_meta_field() {
    register_rest_route(
        'hello-gutenberg/v1', '/update-meta', array(
            'methods'  => 'POST',
            'callback' => 'hello_gutenberg_update_callback',
            'args'   => array(
                'id' => array(
                    'sanitize_callback' => 'absint',
                ),
            ),
        )
    );
}
add_action( 'rest_api_init', 'hello_gutenberg_api_posts_meta_field' );

/**
 * Hello Gutenberg REST API Callback for Gutenberg
 */
function hello_gutenberg_update_callback( $data ) {
    return update_post_meta( $data['id'], $data['key'], $data['value'] );

This REST API route will be used to modify our meta field from the Gutenberg sidebar. You can learn more about WordPress REST API and how to register custom routes from here.

Similarly, if you want to know what WordPress REST API is and how to get started, you can read our blog post: WordPress REST API: What it is and how to get started using it.

Adding a sidebar block to Gutenberg

Let’s start with the Sidebar code from Gutenberg Boilerplate:

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;

const { Fragment } = wp.element;

const {
    PluginSidebar,
    PluginSidebarMoreMenuItem,
} = wp.editPost;

const { registerPlugin } = wp.plugins;

const Component = () => (
    <Fragment>
        <PluginSidebarMoreMenuItem
            target="gutenberg-boilerplate-sidebar"
        >
            { __( 'Gutenberg Boilerplate' ) }
        </PluginSidebarMoreMenuItem>
        <PluginSidebar
            name="gutenberg-boilerplate-sidebar"
            title={ __( 'Gutenberg Boilerplate' ) }
        >
            <h2>{ __( 'Hello World!' ) }</h2>
        </PluginSidebar>
    </Fragment>
);

registerPlugin( 'gutenberg-boilerplate', {
    icon: 'admin-site',
    render: Component,
} );

This will insert a very simple sidebar to the Gutenberg editor. We will take this as a starting point and build our project upon it.

The example code is from our Gutenberg Boilerplate repository, and as a result, we need to replace all occurrences of “Gutenberg Boilerplate” with “Hello Gutenberg”.

Components Used

While our sidebar already imports many components, we will need more. You can replace the top part of the code with the following:

/**
 * Internal block libraries
 */

const { __ } = wp.i18n;

const {
    PluginSidebar,
    PluginSidebarMoreMenuItem
} = wp.editPost;

const {
    PanelBody,
    TextControl
} = wp.components;

const {
    Component,
    Fragment
} = wp.element;

const { withSelect } = wp.data;

const { registerPlugin } = wp.plugins;

Let’s learn quickly about all the components that we have imported.

As discussed in the previous article, the __ component is used to make our text translatable.
The PluginSidebar component is used to add our sidebar to Gutenberg. PluginSidebarMoreMenuItem is used to add a button to Gutenberg menu, which toggles sidebar’s visibility.
The PanelBody component is used to add a panel to our sidebar.
TextControl is used for our input field.
After that, we imported the Component and Fragment components. Both of them are React components that we use in our sidebar. The Fragment component is used to group a list of children without adding extra nodes to the DOM. We need to use the Fragment component in our code as JSX doesn’t allow us to have more than one parent node.
withSelect is a higher-order component. To learn what higher-order components are, I recommend that you read this documentation.
And finally, we import registerPlugin, which is similar to registerBlockType that we used in the previous article. Instead of registering a block, registerPlugin registers your plugin.

Adding Controls

So far our sidebar is just a Component function, but since we will be using React’s lifecycle methods, we will turn it into a React component, like so:

class Hello_Gutenberg extends Component {
    render() {
        return (
            <Fragment>
                <PluginSidebarMoreMenuItem
                    target="hello-gutenberg-sidebar"
                >
                    { __( 'Hello Gutenberg' ) }
                </PluginSidebarMoreMenuItem>
                <PluginSidebar
                    name="hello-gutenberg-sidebar"
                    title={ __( 'Hello Gutenberg' ) }
                >
                    <h2>{ __( 'Hello World!' ) }</h2>
                </PluginSidebar>
            </Fragment>
        )
    }
}

registerPlugin( 'hello-gutenberg', {
    icon: 'admin-site',
    render: Hello_Gutenberg,
} );

This should make your sidebar work with plain text.

Now let’s add our field to the sidebar. It should make our component look like this:

class Hello_Gutenberg extends Component {
    render() {
        return (
            <Fragment>
            <PluginSidebarMoreMenuItem
                target="hello-gutenberg-sidebar"
            >
                { __( 'Hello Gutenberg' ) }
            </PluginSidebarMoreMenuItem>
            <PluginSidebar
                name="hello-gutenberg-sidebar"
                title={ __( 'Hello Gutenberg' ) }
            >
                <PanelBody>
                    <TextControl
                        label={ __( 'What\'s your name?' ) }
                        // value={}
                        // onChange={}
                    />
                </PanelBody>
            </PluginSidebar>
        </Fragment>
        )
    }
}

This will add a simple input field to the sidebar that will do absolutely nothing at this point.
Now we have two tasks left:

Display the value of our meta field.
Allow updating the value of our meta field from the sidebar.

Display the meta value

To fetch the meta data, we will be using wp.apiFetch. apiFetch is a utility library that allows us to make REST API requests.

We will use apiFetch in our React component’s constructor, like this:

class Hello_Gutenberg extends Component {
    constructor() {
        super( ...arguments );

        this.state = {
            key: '_hello_gutenberg_field',
            value: '',
        }

        wp.apiFetch( { path: `/wp/v2/posts/${this.props.postId}`, method: 'GET' } ).then(
            ( data ) => {
                this.setState( { 
                    value: data.meta._hello_gutenberg_field
                } );
                return data;
            },
            ( err ) => {
                return err;
            }
        );
    }

    render() {
        return (
            <Fragment>
            <PluginSidebarMoreMenuItem
                target="hello-gutenberg-sidebar"
            >
                { __( 'Hello Gutenberg' ) }
            </PluginSidebarMoreMenuItem>
            <PluginSidebar
                name="hello-gutenberg-sidebar"
                title={ __( 'Hello Gutenberg' ) }
            >
                <PanelBody>
                    <TextControl
                        label={ __( 'What\'s your name?' ) }
                        value={ this.state.value }
                        // onChange={}
                    />
                </PanelBody>
            </PluginSidebar>
        </Fragment>
        )
    }
}

First, we have defined an initial state, which is basically the key and the value of our meta field. After that, we are using apiFetch to fetch the data from our current post.

We are passing the ID of our current post with the ${this.props.postId} variable. We will get back to this point later.

Once the data is fetched, we update our state with the value from our REST API.

Now, let’s get back to the postId variable. We currently don’t know the ID of our current post, so for that we use the withSelect higher-order component, like this:

const HOC = withSelect( ( select ) => {
    const { getCurrentPostId } = select( 'core/editor' );
    return {
        postId: getCurrentPostId(),
    };
} )( Hello_Gutenberg );

registerPlugin( 'hello-gutenberg', {
    icon: 'admin-site',
    render: HOC,
} );

This will pass the ID of our current post as a postId variable. Now you can run an older post, and our Gutenberg sidebar will display the value of your meta field.

Update the meta value

Now we need to allow our sidebar to also update the meta value. Similar to fetching the details, we will use the wp.apiRequest utility.

Every time the value of our state changes, we will be updating it with REST API. For this, we first need to add an onChange event to our TextControl, like this:

<TextControl
    label={ __( 'What\'s your name?' ) }
    value={ this.state.value }
    onChange={ ( value ) => { 
        this.setState( {
            value
        } );
    } }
/>

And then we will be using the getDerivedStateFromProps lifecycle method to send our REST request.

You can add the following code below your constructor:

static getDerivedStateFromProps( nextProps, state ) {
    wp.apiRequest( { path: `/hello-gutenberg/v1/update-meta?id=${nextProps.postId}`, method: 'POST', data: state } ).then(
        ( data ) => {
            return data;
        },
        ( err ) => {
            return err;
        }
    );
}

This will update our meta field every time we change it from the field. Now you should see an issue with this approach.

The meta values will be updated every time you change the meta value, there are two issues with this approach:

Your data will be saved even if you decide not to update the post.
It will make an HTTP call too often, which is not ideal.

The data should only be saved when you save or publish the post. For this, we can make use of our higher-order component to find out when the post is being saved.

You can replace our HOC function with the following code:

const HOC = withSelect( ( select, { forceIsSaving } ) => {
    const {
        getCurrentPostId,
        isSavingPost,
        isPublishingPost,
        isAutosavingPost,
    } = select( 'core/editor' );
    return {
        postId: getCurrentPostId(),
        isSaving: forceIsSaving || isSavingPost(),
        isAutoSaving: isAutosavingPost(),
        isPublishing: isPublishingPost(),
    };
} )( Hello_Gutenberg );

This will give us a few variables that we can use to check if our post is being saved or published.

We need to add this condition to our post request function:

static getDerivedStateFromProps( nextProps, state ) {
    if ( ( nextProps.isPublishing || nextProps.isSaving ) && !nextProps.isAutoSaving ) {
        wp.apiRequest( { path: `/hello-gutenberg/v1/update-meta?id=${nextProps.postId}`, method: 'POST', data: state } ).then(
            ( data ) => {
                return data;
            },
            ( err ) => {
                return err;
            }
        );
    }
}

Now meta values will only update when we save, update or publish the post.
That’s it! Your sidebar is complete now, and you’ve just learned how to make your plugin compatible with Gutenberg!

You can test your block to make sure it works. If not then please leave your response in the comments section below, and I’ll try to help you.

What’s next when you’re done with Sidebar API?

You can find the finished example in the Hello Gutenberg repository. If you find any problems then feel free to open an issue.

Once again, this is a small example of what’s possible with Gutenberg’s Sidebar API. There are many amazing things you can create with Gutenberg and its APIs.

What are you trying to achieve with Gutenberg? Let us know.

The article was originally published on CodeinWP.com

Micro-Interactions Tutorial for Beginner Developers: How to Create an Interactive “Like” Button With CSS and JavaScript

Chris Fitzgerald — Thu, 12 Sep 2019 08:58:52 +0000

I think it’s safe to say that micro-interactions are cool. We – web people – universally all enjoy them. And no matter if you’re noticing them or not, they provide a significant user experience improvement. By making your website or web tool come to life subtly and in a friendly way, they simply make the user enjoy the whole interaction a tiny bit more.

In that spirit, I want to give you a quick micro-interactions tutorial and show you how to create a cool “Like” button for your site. With minimal code. Here it is in action:

But first:

Why bother with micro-interactions in the first place?

I’m not going to try to convince you too heavily here, but let’s just look at a couple of things.

Micro-interactions have been around for a while – enough so that they even have full books written about them. Plus, there have been many experiments and studies looking into how useful and effective they actually are.

One of the most notable research houses, the Nielsen Norman Group, looked at micro-interactions more closely in 2018. As per their conclusions, micro-interactions have proven to, among other things, improve user experience by encouraging engagement, and communicating brand.

In short, micro-interactions can be really beneficial if used right and, also, not too heavily. Today, we’re going to show you one simple example of a micro-interaction in action:

Micro-interactions tutorial: The markup and basic CSS of our thumbs-up button

💡 Note; at the bottom, we have some options for you that don’t involve writing code by hand.

First of all, we need some good old HTML and CSS magic to make it work. The structure is pretty straightforward.

We are going to use an SVG tag for the like icon itself – this is from Font Awesome; you can find most of the icons here. Just to adjust the width and height attributes of the SVG tag, we’re going to use the HTML below:

<html>
  <body>
    <a href="#" class="like-button">
      <svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z"/></svg>
      </svg>
    </a>
  </body>
</html>

Now for the CSS, we’re going to go real basic. What we want to happen here is to give a nice look to our like button and have everything nicely centered on the screen. We already know that we’re going to toggle a class upon click (the active class), so we need to account for that. We’re going to fill the icon with a blue color when active and dark-gray when not:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.like-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.like-button.active {
  -webkit-animation: pop 0.9s both;
  animation: pop 0.9s both;
}

.like-button svg {
  opacity: 1;
}

.like-button svg path {
  fill: #333;
  transition: fill .4s ease-out;
}

.like-button.active svg path {   
  fill: #2196f3;
}

Another thing we want here is the pop animation used when the button becomes active, so we’re going to add that to our CSS file:

@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pop {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

The “interaction” part of this micro-interactions tutorial

Now that we’ve got the basic styling out of the way, it’s time to handle the actual interactions – that means JavaScript!

First of all, we’re going to need a JavaScript function that generates a random integer between a given interval (a minimum and a maximum):

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Next up, we’re going to need another function that randomly returns +1 or -1 so we can have random negative or positive values:

function plusOrMinus() {
  return Math.random() < 0.5 ? -1 : 1;
}

Now for the actual interaction handling; let’s look at the code to explain it properly:

First up, we’re going to save our button in a variable and add a click event listener to it.
When the button is clicked, we’re going to add a preventDefault() function so that we’re sure that nothing unwanted happens.
After that, we’re going to add our active class to the button, which we previously styled with a blue color via CSS.
Then we’re going to run the generateClones() function (that isn’t defined yet), passing our button as a parameter via this.

let button = document.querySelector(".like-button");

button.addEventListener("click", function(e) {
  e.preventDefault();
  this.classList.toggle("active");
  generateClones(this);
});

Now let’s define the generateClones() function and run through the following steps with it:

First, let’s decide on a random number of clones. We’re going to instantiate between two and four clones for the icon. We’re going to use the previously defined randomInt() function.
Then, for each clone, we’re going to use the SVG tag inside our button as a “model” and use the cloneNode(true) JavaScript function to clone it into a new variable. We’re also going to define a size between 5 and 16 for our clone using the random integer generator function.
Next up, we’re going to add our clones to the button, set their width and height with the previously generated number, and make their position absolute so that we can move them around independently from the button.
Another thing we need is a transition for our clones, so they don’t just pop into their new place when clicking.
Now, for adding the actual transformations that will move our icon around, we’re going to go a bit crazy. We want our clones to move from the center of our button outwards randomly. Using a combination of our randomInt() and plusOrMinus() functions, we’re going to move our clones in the XY axis with the translate3d CSS property. We’re also going to use a “hack”, as our transition wouldn’t apply otherwise. So adding a simple setTimeout() function is going to help us achieve that. At the same time, we’re going to move the opacity to 0, making the clones disappear.
Deleting our clones. We have to clear up the DOM after we’re done with all the jazz. So we need another setTimeout() function that’s going to remove our clones from the DOM after one second.

generateClones(button) {
  // 1. Generate clones and iterate over the set number
  let clones = randomInt(2, 4);
  for (let it = 1; it <= clones; it++) {
    // 2. Get the SVG tag clone in a variable and generate a random size
    let clone = button.querySelector("svg").cloneNode(true),
        size = randomInt(5, 16);
    // 3. Add our clone to the button and change its' width/height/position
    button.appendChild(clone);
    clone.setAttribute("width", size);
    clone.setAttribute("height", size);
    clone.style.position = "absolute";
    // 4. Add some flashy transitions
    clone.style.transition =
      "transform 0.5s cubic-bezier(0.12, 0.74, 0.58, 0.99) 0.3s, opacity 1s ease-out .5s";
    // 5. Animate our icon outwards with a setTimeout function so that CSS complies.
    let animTimeout = setTimeout(function() {
      clone.style.transform =
        "translate3d(" +
        plusOrMinus() * randomInt(10, 25) +
        "px," +
        plusOrMinus() * randomInt(10, 25) +
        "px,0)";
      clone.style.opacity = 0;
      clearTimeout(animTimeout);
    }, 1);
    // 6. Removing the clones after 0.9 seconds
    let removeNodeTimeout = setTimeout(function() {
      clone.parentNode.removeChild(clone);
      clearTimeout(removeNodeTimeout);
    }, 900);
  }
}

That’s it! We’ve made it through the end! Down below you’ll find the CodePen example:

Thanks for going through this!

Other options to add micro-interactions to WordPress

If writing code manually isn’t entirely your thing, there are actually quite a handful of WordPress plugins that you can use to get micro-interactions onto your site without needing to worry about how it all works under the hood.

First, you can use the Animate It! plugin to animate pretty much any element on your pages using CSS3.

For example, you can add a button, or a piece of text, and then set it to animate in a certain way on click.

Here’s an example of what the plugin can do – video 📹.

Another plugin, and one of our editor’s favorites, is Shortcodes Ultimate.

Among a whole plethora of different shortcodes, there’s one for simple animations. There are some presets as to how the animation should behave, and you can put pretty much anything inside the block that’s going to get animated.

Here’s an example of an animated button:

These two plugins should give you more than enough options to animate certain elements on your pages and make them pop a little more when the user is interacting with them. Of course, you don’t want to go overboard with those, but giving the user an additional nudge when they’re interacting with your key call to actions might help a lot.

What do you think of micro-interactions, are you considering putting this micro-interactions tutorial to good use and adding something to your site? Let us know in the comments.

The article was originally published on CodeinWP.com

How to Adapt Your Plugin for Gutenberg: Part 1 (Block API)

Chris Fitzgerald — Tue, 20 Aug 2019 08:41:13 +0000

“I have a plugin,” says you, “how do I make it Gutenberg-ready?”

The story is straightforward; Gutenberg is the new editor experience in WordPress, which is going to be merged into core in the next major release. A lot of plugins that do not keep up with this will become obsolete. This makes it essential that you adapt your plugin for Gutenberg before it’s too late.

Who’s affected?

Almost all the plugins that have anything to do with the post editor will be affected by Gutenberg. For example, if your plugin adds a button in TinyMCE to then place a shortcode in the editor, bad news; it will be the end of it.

“Do I need to adapt my plugins for Gutenberg?”

So which plugins need updating for Gutenberg? Any plugins that work with:

Custom metaboxes
Shortcodes
TinyMCE buttons
or any editor feature at all

While some plugins will still work with Gutenberg, like a plugin that adds a simple metabox, for instance, it will not be as smooth an experience for your users.

Even shortcodes will keep working as before, but it will just be plain text node in the editor, while all the shortcode plugins for Gutenberg will follow its block UI and will be easier for users to use.

So yes, users will prefer plugins that are crafted for the Gutenberg experience. And the ones to stay behind will be replaced by a competitor plugin.

Just to give you an idea, here’s an example of what the user’s standard old-editor experience looks like with a plugin of ours (a), and then what it looks like in Gutenberg (b) – with the plugin optimized for it.

Fear not! We are here to help you with making your plugins Gutenberg-ready. There are many ways to integrate your plugin towards Gutenberg, depending on how your plugin works, which we are going to be discussing in this article.

Things worth knowing beforehand

Gutenberg is written on React. And Gutenberg plugins are coded in JavaScript, which also can be a rough transition for developers who only code in PHP. While you don’t need to have knowledge of React to make plugins for Gutenberg, you will need some basic understanding of JavaScript. If you have previously worked on React and JSX then it will be similar grounds for you.

While there’s not enough official documentation for Gutenberg, its Github repository has a lot of valuable information for developers. If you want to learn Gutenberg development deeply, you must keep your eyes open on everything that is going on in Gutenberg’s GitHub repository because the project is moving really fast, and things are changing every single day.

How to adapt your plugin for Gutenberg

Gutenberg’s API provides us with many ways to extend the editor, like Block API, Shortcode API, and more. Which API to use depends on what type of plugin we are building.

If your plugin is a simple shortcode plugin, then Block API can be used to make a beautiful block for the editor. But if your plugin uses complex metaboxes where a block isn’t enough, we can use Sidebar API.

Also, we will be using a modern stack of JavaScript development tools, such as NodeJS, NPM, webpack, and ESNext. We will be providing you with example files, so you don’t need to worry about setting up your development environment.

In this post, we will be looking at how to make your plugin Gutenberg-compatible by using the Block API. We’ll get into the other methods (Sidebar API, Publish Panel, Status Bar & similar APIs) in part two if needed.

You can find all the mentioned examples in this GitHub repository.

Gutenberg development environment

Developing for Gutenberg requires you to setup bunch of tools, such as NPM, webpack, Babel, and JSX. It takes a lot of time and effort, so we have prepared the environment for you.

Gutenberg Boilerplate is a plugin with minimal Gutenberg development setup and examples. It contains one block and sidebar example. You can use this to extend into your custom block.

You can fork or clone Gutenberg Boilerplate repository to your /wp-content/plugins/ and use it as your development environment.
After that, you need to install NodeJS to your machine to get started. Navigate to Gutenberg Boilerplate folder, and run npm install

From this point on, you need to know three commands that you will be using during the development process:

npm install – Install project dependencies when you clone the project.
npm run dev – Compile code during the development process. You need to run this once, and it will keep watching for the changes.
npm run build – Compile code for an optimized build once development process is finished.

Block API

Blocks are the fundamental element of Gutenberg, it being a block-based editor. Block API allows you to make blocks for Gutenberg. You can make blocks that can render basic HTML, shortcodes, or even make dynamic blocks to display, for example, your latest posts.

The process based on an existing plugin

In our example, we will adopt a Click to Tweet shortcode to a Gutenberg block. This Click to Tweet shortcode renders a Tweet Box with your text, and a button to tweet that text. Like this:

Our shortcode looks something like this:

[clicktotweet tweet="Text to be displayed" tweetsent="Text to be tweeted" button="Tweet" theme="click-to-tweet"]

Our shortcode has four parameters:

tweet: Text that appears on your site.
tweetsent: Text that goes to Twitter.
button: Tweet button text.
theme: Either click-to-tweet or click-to-tweet-alt as box theme.

Adapting plugins for Gutenberg with Block API

There are two ways of going about it with Gutenberg, either we can render the HTML to the front-end, or we can use our Gutenberg block to render the shortcode to front-end. For this article, we will be doing the latter.

All the code is available in Hello Gutenberg plugin repository on GitHub. You can clone the repository to see the plugin in action, or to modify the code.

Enqueue scripts/styles for Gutenberg

First, we need to enqueue our scripts and styles to Gutenberg editor using enqueue_block_assets:

/**
 * Enqueue front end and editor JavaScript and CSS
 */
function hello_gutenberg_scripts() {
    $blockPath = '/dist/block.js';
    $stylePath = '/dist/block.css';

    // Enqueue the bundled block JS file
    wp_enqueue_script(
        'hello-gutenberg-block-js',
        plugins_url( $blockPath, __FILE__ ),
        [ 'wp-i18n', 'wp-blocks', 'wp-editor', 'wp-components' ],
        filemtime( plugin_dir_path(__FILE__) . $blockPath )
    );

    // Enqueue frontend and editor block styles
    wp_enqueue_style(
        'hello-gutenberg-block-css',
        plugins_url( $stylePath, __FILE__ ),
        '',
        filemtime( plugin_dir_path(__FILE__) . $stylePath )
    );

}

// Hook scripts function into block editor hook
add_action( 'enqueue_block_assets', 'hello_gutenberg_scripts' );

We have added four dependencies to our script that we will be using in our block. Let’s learn about these dependencies first:
wp-i18n is Gutenberg’s version of internationalization functions, such as __(). wp-blocks is used for the registerBlockType function which registers your block. We use wp-editor and wp-components scripts for various components in our block.

Now that we have enqueued your assets, we can start writing our block in /src/block.js file.

Importing dependencies

If you are using Gutenberg Boilerplate then your block.js file should have a basic block structure that you can use to build plugins for Gutenberg:

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;

/**
 * Register block
 */
export default registerBlockType( 'gutenberg-boilerplate/block', {
    // Block Title
    title: __( 'Gutenberg Boilerplate' ),
    // Block Description
    description: __( 'An example block.' ),
    // Block Category
    category: 'common',
    // Block Icon
    icon: 'admin-site',
    // Block Keywords
    keywords: [
        __( 'Boilerplate' ),
        __( 'Hello World' ),
        __( 'Example' ),
    ],
    attributes: {
    },
    // Defining the edit interface
    edit: props => {
        return (
            <h2>{ __( 'Hello Backend' ) }</h2>
        );
    },
    // Defining the front-end interface
    save: props => {
        return (
            <h2>{ __( 'Hello Frontend' ) }</h2>
        );
    },
});

You can run npm run dev to start compiling our code in real time.

First, we will import all the components and libraries that we need for the block on the top:

/**
 * Block dependencies
 */

import classnames from 'classnames';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;

const {
    RichText,
    InspectorControls,
    BlockControls,
} = wp.editor;

const {
    PanelBody,
    TextareaControl,
    TextControl,
    Dashicon,
    Toolbar,
    Button,
    Tooltip,
} = wp.components;

The first imports classnames which we installed using npm to use multiple classes in our code, as JSX doesn’t allow multiple classes in elements.

We will learn about other components that we have imported as we use them.

Define attributes

Now we will define four attributes for our Gutenberg block, same as our shortcode:

attributes: {
    tweet: {
        type: 'string',
    },
    tweetsent: {
        type: 'string',
    },
    button: {
        type: 'string',
        default: __( 'Tweet' ),
    },
    theme: {
        type: 'boolean',
        default: false,
    },
},

As you can see, all the attributes are same as our shortcode. All attributes have a type key, which tells Gutenberg its data type. You can use string, number, boolean & object as accepted types.

Some of the attributes also contain a default value. Attributes can also have other properties, such as source and selectors, which we won’t be using in our example, but you can learn more about them here.

Edit interface

Now we will be building the edit interface of our block, which will be the display – users will see it while editing the block in Gutenberg.

To get a basic idea, we can first hard-code our block and build upon it by replacing the following area in our code:

// Defining the edit interface
edit: props => {
    return (
        <h2>{ __( 'Hello Backend' ) }</h2>
    );
},

With the following code:

// Defining the edit interface
edit: props => {
    return [
        <div className={ props.className }>
            <div className="click-to-tweet">
                <div className="ctt-text">Pumpkins and Penguins</div>
                <p><a href="https://twitter.com/intent/tweet?text=Pumpkins%20and%20Penguins" className="ctt-btn">Tweet</a></p>
            </div>
        </div>
    ];
},

This should give you an idea of our end result. It will look something like this:

The first element of the block is the tweet text area. We will replace it with an editable text field, similar to Gutenberg’s heading block.

We will use RichText component that we previously imported to replace our hard-coded text.

<div className="ctt-text">
    <RichText
        format="string"
        formattingControls={ [] }
        placeholder={ __( 'Tweet, tweet!' ) }
        onChange={ onChangeTweet }
        value={ props.attributes.tweet }
    />
</div>

Our RichText component has five arguments. format is a string, as we are going to use our shortcode to display the elements in the front-end. If we wanted to use a selector in our attribute, then format would have been an array.

RichText has some formatting options by default, like bold and italic, which we have disabled by passing an empty array in formattingControls argument.

placeholder is the placeholder text when there is no text in the field, and onChange will trigger onChangeTweet function when a change event takes place.

Finally, value will be the value of our field, which will be taken from tweet attribute that we defined earlier.

Once that we have defined our RichText area, we need to build onChangeTweet function which will trigger when value changes in our text field.

// Defining the edit interface
edit: props => {
    const onChangeTweet = value => {
        props.setAttributes( { tweet: value } );
    };
    return [
    ...rest of the code

We pass value of RichText field to onChangeTweet function, which uses props.setAttributes function to update the value of tweet attribute.

You will see the power of Gutenberg now when you use your block.

Isn’t it awesome?

Block Inspector

When building plugins for Gutenberg, you don’t need to reinvent the wheel every time to make option panels for your plugins. Gutenberg provides us with a simplified way to allow block customization and ensures that every user has a consistent experience with built-in UI patterns.

Similarly to RichText component, InspectorControls component adds a sidebar when the block is selected. Something like this:

We will also be using TextareaControl and TextControl to add a textarea and text input field to our Inspector area.

We will be adding the following code to your return statement:

!! props.isSelected && (
    <InspectorControls key="inspector">
        <PanelBody title={ __( 'Tweet Settings' ) } >
            <TextareaControl
                label={ __( 'Tweet Text' ) }
                value={ props.attributes.tweetsent }
                onChange={ onChangeTweetSent }
                help={ __( 'You can add hashtags and mentions here that will be part of the actual tweet, but not of the display on your post.' ) }
            />
            <TextControl
                label={ __( 'Button Text' ) }
                value={ props.attributes.button }
                onChange={ onChangeButton }
            />
        </PanelBody>
    </InspectorControls>
),

props.isSelected checks to make sure that the Inspector only appears when the block is selected.
TextareaControl and TextControl components, similarly to RichText, have a value and onChange method.

We also need to change the code of your block display to accommodate new changes. In our case, we only need to add Button Text to our block as Tweet Text will be added to the link, so we don’t need to show it in our backend.

You can replace hyperlink in our initial code with the following:

<a className="ctt-btn">
    { props.attributes.button }
</a>

As mentioned before, we are removing hyperlink from our code because we don’t need to show it in the backend. This will make our block look like so:

Block Inspector can be a potent tool for your block. If your plugin has advanced options that are too complicated for editor area, then you can put them in the Inspector area.

We will add one last option to our block to finish the JavaScript part in the next section.

Block Toolbar

Block Toolbar is another pre-built UI component that we can use to add more options to our block. It will appear above your block when you select it. Example:

Ideally, Block Toolbar should contain the primary controls of your block, with Inspector hosting the secondary controls. However, that is debatable and depends on your block.

We will be using the Block Toolbar area to host our alternative style control.

Similar to Block Inspector, we need to add the following code to our return statement to add Block Toolbar to our block:

!! props.isSelected && (
    <BlockControls key="custom-controls">
        <Toolbar
            className='components-toolbar'
        >
            <Tooltip text={ __( 'Alternative Design' ) }>
                <Button
                    className={ classnames(
                        'components-icon-button',
                        'components-toolbar__control',
                        { 'is-active': props.attributes.theme },
                    ) }
                    onClick={ toggletheme }
                >
                    <Dashicon icon="tablet" />
                </Button>
            </Tooltip>
        </Toolbar>
    </BlockControls>
),

We use BlockControls and Toolbar components to add a toolbar to our block. Similar to Block Inspector, props.isSelected makes sure our toolbar only appears when we put focus on our block.
We also use Tooltip and Button components for our control. Tooltip component is wrapped around Button component to make sure there’s a tooltip when you hover over the control to give you more context.

Button component is using classnames module that we imported earlier in the article. We used classnames function to give three classes to our control. The third class, is-active, only appears when our theme attribute value is true.

Its onChange function toggles the theme attribute to true/false. In the end, Dashicon components is used to display an icon for our control.

We will also have to change our block code for it to work with the changes. We need to replace the following line:

<div className="click-to-tweet">

With:

<div className={ ( props.attributes.theme ? 'click-to-tweet-alt' : 'click-to-tweet' ) }>

We are checking if the theme attribute is true or false, and assigning a class to our block accordingly.

Now your block should look something like this:

We have finished the JavaScript-side part of our Gutenberg block. You can find the entire source code of the file here.

Now we will finish our block by handling the server-side output.

Server-side rendering

Gutenberg allows you to use server-side rendering to show your blocks on the front-end. That server-side rendering makes it possible for us to create blocks for shortcodes.

First, we will make our save method to return null by replacing it with the following code:

// Defining the front-end interface
save() {
    // Rendering in PHP
    return null;
},

We will use register_block_type PHP function to register our block type in PHP:

if ( function_exists( 'register_block_type' ) ) {
    // Hook server side rendering into render callback
    register_block_type(
        'hello-gutenberg/click-to-tweet', [
            'render_callback' => 'hello_gutenberg_block_callback',
            'attributes'      => array(
                'tweet'  => array(
                    'type' => 'string',
                ),
                'tweetsent' => array(
                    'type' => 'string',
                ),
                'button'    => array(
                    'type'  => 'string',
                    'default' => 'Tweet',
                ),
                'theme'  => array(
                    'type'  => 'boolean',
                    'default' => false,
                ),
            ),
        ]
    );
}

Our register_block_type function. We first pass our block name to it, along with an array of arguments.
The first argument is the render_callback function, which calls to our hello_gutenberg_block_callback function for server-side rendering.

After our render callback, we pass attributes as an array, similar to block.js file, which we use in our render callback function.

Our render callback function looks like this:

function hello_gutenberg_block_callback( $attr ) {
    extract( $attr );
    if ( isset( $tweet ) ) {
        $theme = ( $theme === true ? 'click-to-tweet-alt' : 'click-to-tweet' );
        $shortcode_string = '[clicktotweet tweet="%s" tweetsent="%s" button="%s" theme="%s"]';
        return sprintf( $shortcode_string, $tweet, $tweetsent, $button, $theme );
    }
}

We extract all the attributes and then return it inside our shortcode. That is all it takes to adapt your shortcode plugins for Gutenberg.

You can find all the code used in this article in this hello-gutenberg repository.

In the next part, we will take a look at others ways to adapt existing plugins for Gutenberg, including the Sidebar API.

If you have any questions on how to adapt your plugin for Gutenberg, please ask them in the comments!

The article was originally published on CodeinWP.com

9 of the Best Node.js Hosting Platforms of 2019 (Free and Paid)

Chris Fitzgerald — Mon, 29 Jul 2019 10:45:22 +0000

Looking for the best Node.js hosting for your next application project? In this post, I’ll share a variety of premium and free Node.js hosting services for users of all knowledge levels.

In total, the options that we’ll cover are:

1) Heroku
2) Amazon Web Services
3) DigitalOcean
3) A2 Hosting
4) Glitch
5) Google Cloud Platform
6) Microsoft Azure
7) Platform.sh
8) NodeChef

Keep reading for a more detailed look at each platform!

1. Heroku (Heroku.com)

Heroku is a cloud application platform that offers free Node.js hosting, which is a pretty big draw by itself. Of course, there are some limitations, and, much like free WordPress hosting, you’ll probably want to go for paid hosting for a serious project. But if you’re okay with those limitations and are just looking for free Node.js hosting to play around with, it’s a good place to start!

Heroku also offers paid plans, which are also a good option depending on your needs.

So what are the limits for Heroku’s free Node.js hosting? Namely:

512MB of memory
Sleeps after 30 minutes of inactivity
Only one user
Comes with a limit of 1,000 “dyno hours” for your entire account (if you verify + with a credit card – otherwise it’s only 550)

If those restrictions get in the way of your plans, Heroku’s paid plans can still be affordable, starting at just $7.

Heroku is well-documented, offers easy scaling, and is just generally pretty developer friendly.

2. Amazon Web Services (AWS.Amazon.com)

You’ve probably heard of Amazon Web Services because it powers like…the entire Internet. Okay, that’s a bit of an exaggeration, but it’s pretty, pretty popular.

Through its many integrated services, AWS makes a great option for hosting Node.js applications.

While there are a lot of different services to choose from, you’ll most likely want to start with Elastic Beanstalk, which “makes it easy to deploy, manage, and scale your Node.js web applications using Amazon Web Services.”

You just need to upload your code, and then AWS handles deployment and provisioning. Plus, there’s no special charge for the Elastic Beanstalk service – you still only pay for the actual AWS services that you use.

Another interesting option is Lambda, which offers a serverless hosting approach.

If you aren’t super familiar with AWS yet, you can check out the “Deploy a Node.js Web App” project guide to learn the basics and get your app up and running.

3. DigitalOcean (DigitalOcean.com)

DigitalOcean, the popular cloud infrastructure service, also makes a good option for Node.js hosting and lets you spin up a new Node.js Ubuntu droplet with just a few clicks. Or, you can also create your own droplet and set everything up yourself.

It’s not the best option for inexperienced users because you’ll need to manage the infrastructure yourself, but the prices are affordable and DigitalOcean makes it super easy to scale your application as needed.

You can get started with a new droplet for as little as $5 per month, and you’ll have your choice of eight different data centers on three different continents.

DigitalOcean also recently acquired Nanobox, which helps make it easier to deploy web apps – you can sign up for the beta here.

4. A2 Hosting (A2Hosting.com)

A2 Hosting is one of the few “traditional” hosts to offer a dedicated Node.js hosting package. That is, you’re typically looking at cloud or dedicated options for Node.js, but A2 Hosting lets you use their shared plans.

This makes A2 Hosting quite an affordable option, with plans starting at just $3.92 per month for:

1 website
5 databases
unlimited storage and transfer
a free SSL certificate via Let’s Encrypt
cPanel for server management

Plans go up from there for more websites and better performance.

However, the downside of A2 Hosting is that it won’t be as easy to scale your application as it would be with one of the many cloud Node.js hosting providers on this list.

5. Glitch (Glitch.com)

If you’re looking for free Node.js hosting for a fun project, Glitch might be the tool for you. It is not a good option for a serious business, but it is great for fun apps or prototyping.

You can even create an app anonymously, though you’ll need to log in via GitHub or Facebook if you want your projects to stay active (anonymous apps expire in five days).

Glitch does not let you use your own domain, and there are some other restrictions like:

Projects sleep after 5 minutes if not used and are automatically stopped after 12 hours. They wake when receiving another HTTP request.
200MB disk space limit and 512MB assets storage space.
512MB RAM, just like Heroku’s free Node.js hosting limits.
Limited to 4,000 requests per hour.

Glitch is from the same team as Stack Overflow, Stack Exchange, and Trello (before Trello was acquired by Atlassian), so it’s got some weight behind it.

6. Google Cloud Platform (Cloud.Google.com)

If you want to host your Node.js app on the same infrastructure that powers Google Search and YouTube, Google Cloud Platform might just be the best Node.js hosting for you.

Like Amazon Web Services, you’ll have your choice of a ton of different products and services. One that you’ll definitely want to consider is Google App Engine, which lets you “focus just on writing code, without the worry of managing the underlying infrastructure”.

And, like AWS, you’ll only pay for the resources that you actually use.

For a guide to getting started with hosting Node.js apps on Google Cloud Platform, check out Google’s Node.JS App Engine quick-start guide.

7. Microsoft Azure (Azure.Microsoft.com)

Another one of the big name cloud computing platforms, Microsoft Azure also offers a number of services that make it easy to host and deploy Node.js applications.

Specifically, Azure’s App Service offers a fully managed solution for hosting Node.js applications.

Another attractive thing about Microsoft Azure is that it offers 12 months of free core services, along with a $200 credit that you can use for additional services in your first 30 days. So while it’s not free forever, you can get a lot of mileage before you need to pay.

8. Platform.sh (Platform.sh)

If you hate managing infrastructure for your Node.js applications, Platform.sh might be the best Node.js hosting for your app.

As the name suggests, it’s a platform-as-a-service (PaaS) that handles managing all of your app’s infrastructure.

It’s not technically hosting itself because Platform.sh partners with AWS, Google Cloud Platform, Microsoft Azure, etc. But it does make it a lot easier for you to run Node.js applications on that cloud infrastructure.

Platform.sh’s plans start at $50 per month and go up from there depending on your needs. You can also get a free trial to test it out – no credit card required.

9. NodeChef (NodeChef.com)

With plans starting at just $9 per month, NodeChef offers affordable Node.js hosting for your app using Docker containers on bare metal servers in your choice of four data centers on four continents:

US-East
EU-West (Paris)
Singapore
Sydney

ou can choose between SQL and NoSQL databases, and NodeChef also offers easy scaling and automated SSL certificate provisioning.

NodeChef’s $9 per month entry-level plan gets you:

1 CPU
128 MB app memory
100 MB database memory
1 GB database storage
Unmetered bandwidth

You can then scale up individual resources as needed.

What’s the best Node.js hosting for your needs?

Here’s a quick summary:

Best Node.js hosting in the market

HOST	PRICE FORM	PAY BY USAGE?*	CLOUD-BASED?
Heroku	$0	✅	✅
AWS	$0	✅	✅
DigitalOcean	$5	❌	❌
A2 Hosting	$3.92	❌	❌
Glitch	$0	N/A-Free	N/A
Google Cloud Platform	$0	✅	✅
Microsoft Azure	$0	✅	✅
Platform.sh	$50	❌	✅
NodeChef	$9	❌	❌

By “Pay by usage”, we mean that you pay based on the actual resources that you use, rather than some set amount every month.

To close out this post and help you pick the best Node.js hosting for your specific situation, let’s run through some scenarios:

First, if you’re technically-savvy, the big cloud infrastructure services make a good option, and they usually give you services that help streamline managing your app and eliminate a lot of the more tedious infrastructure requirements.

Of course, you have the big three here:

AWS, along with Elastic Beanstalk
Google Cloud Platform, along with App Engine
Microsoft Azure, along with App Service

DigitalOcean and Heroku also offer good options, and Platform.sh offers a PaaS to help you with end-to-end development.

If you’re specifically looking for free Node.js hosting, Glitch is a good option for non-mission critical stuff, and Heroku also offers a limited free plan.

Finally, if you don’t want to go the cloud route, A2 Hosting offers an affordable entry point at ~$4 per month and is one of the few hosts that will let you run Node.js without getting your own VPS or dedicated server. And NodeChef also offers an affordable price point with its Docker container approach on bare metal servers.

Any questions about picking the best hosting for Node.js? Ask away in the comments!

The article was originally published on CodeinWP.com

Beginner’s Guide to Learning JavaScript as a WordPress Developer

Chris Fitzgerald — Mon, 22 Jul 2019 12:19:20 +0000

If you have been following the happenings in the WordPress community for the past couple of months, you might already be aware of the rising importance of JavaScript.

First up, the WordPress.com desktop app, Calypso, departed from the standard PHP route and has been coded using JavaScript (something CodeinWP talked about recently). And if that was not enough, in his annual “State of the Word” address in December 2015, Matt Mullenweg kept it straight and simple:

"Learn JavaScript, deeply."

Naturally, more and more WordPress developers are now turning towards JavaScript, and for all practical purposes, 2016 is going to be the year of JavaScript, at least from the perspective of WordPress developers.

If you are an existing WordPress developer, how should you begin your journey with JavaScript? More importantly, what aspects of this diverse coding language should you care the most about? In this post, I will attempt to answer these questions.

Your beginner’s guide to learning JavaScript as a WordPress developer

Introducing JavaScript to WordPress developers

Once again, if you have been active in the WordPress community, you might have already familiarized yourself with the basics of JavaScript and as such, we probably do not need to remind ourselves that JavaScript is different from JAVA.

Now, moving on to another question: is JavaScript really that unknown for WordPress?

Not really.

In fact, even before WordPress 4.4, JavaScript has had a role in WordPress – the js folder within wp-includes and wp-admin stands for JavaScript, which has so far, been mostly employed in theme development. Thus, even though JS has been around in the world of WordPress for quite a while, now with the first half of REST API on board and applications such as Calypso, its role has risen manifolds.

Any WordPress developer starting off with JavaScript might feel confused, simply because JavaScript has a world of its own. For example, take up three very common terms that are associated with JS: jQuery, AngularJS and Node.js.

All of the three above entities, even though related to JavaScript, are totally different from each other. JQuery is a JavaScript library, whereas AngularJS is a JavaScript framework, and Node.js is a JavaScript runtime environment.

There are some coders who believe it is wiser to start off with plain vanilla JS, while others prefer relying on a framework or a library. And the talk doesn’t end there. If you decide to start with a JavaScript library, you will also have to learn about its add-ons or plugins (yes, there are plugins that extend the core functionality of libraries, much like libraries extend the core features of JavaScript).

Confused already? Read on!

Know the fundamentals

If you are really serious about your JavaScript skills, you must focus heavily on the fundamentals. This is especially important because as a WordPress developer, you must already be aware of PHP, and JS is different from PHP in various aspects.

Most PHP developers are accustomed to PHP’s functional approach, and while PHP does have a lot of object-oriented principles, it is, for the most part, a functional language. JavaScript, on the other hand, is a strictly object-oriented language. Mozilla Developer documentation talks about the OOP basics of JavaScript in detail.

Once you have mastered the fundamentals and basics of JavaScript, you can get started with frameworks.

Pick a JavaScript framework

Learning a JavaScript framework is vital if you wish to get started with building JS applications and projects as quick as possible. If you have had some experience with theme development in WordPress, you might already be familiar with HTML and CSS, and more importantly, you will be aware of the ease of coding that a good framework can bring to the table.

Experts and coders are divided when it comes to picking the perfect JavaScript framework for beginners. Personally, for users who are familiar with the MVC framework, such as concrete5 developers, I have always recommended AngularJS as the better choice.

Angular supports the MVC structure and is really easy to get started with. However, WordPress coders, at times, are not very familiar with the MVC structure and as such, React seems to be an easier and more apt option. Furthermore, since React uses just the View component, it is popular among designers as well.

There are other options as well, but for the most part, any journey in the world of JavaScript frameworks should begin with either React or AngularJS. I once wrote a comparative article about the two frameworks, and for greater details, you can find that article here.

Decide what you need

Much like any other skill, learning a new programming language is a matter of needs and requirements. After all, you are trying to learn JavaScript because you need it.

In JavaScript, libraries and frameworks are defined on the basis of your needs. For example, Node.js is ideal for folks who have to deal with server-side programming. Similarly, while React is a great choice for web development, it is lacking when it comes to mobile app development.

For WordPress developers, the needs can basically be split as backend or frontend. If you are dealing with frontend development, frameworks such as AngularJS, React, or Backbone.js will suffice for your needs. You can find a longer list with more options here.

For backend coders, however, especially ones who are already well-versed with PHP, Node.js is a skill worth acquiring.

Where to learn

Thanks to the internet, there is no shortage of resources for anyone willing to learn something new, and JavaScript is no exception either. You can discuss your doubts at Stack Overflow, follow the tutorials at Udemy or Lynda.com, and of course, refer to the great literature produced by several WordPress blogs out there.

JavaScript is Sexy is a good resource for learning JavaScript, whether you are a beginner or an advanced learner. Unfortunately, this site has not been updated for quite a while, so you’ll need to proceed with caution. That said, certain threads such as OOP in JavaScript is still useful and relevant.

Codecademy’s JavaScript Track is quite popular among beginners, and you should give it a spin. Similarly, if you are keen on learning jQuery, Code School’s Try jQuery plan is a good pick.

For learning React, I have found React for Beginners to be the most well-planned and structured resource. Superhero.js is another amazing collection of resources and tutorials that you can learn from.

In terms of books, the options are plenty, and you can find some of the most useful and popular ones on this GitHub thread.

Conclusion

As a WordPress developer, your journey towards learning JavaScript will, more or less, be identical to the way you began with PHP.

Practical knowledge of PHP is sufficient to tweak and get more out of WordPress and themes or plugins, but if you wish to seriously build something big, knowledge of PHP fundamentals is essential. Similarly, while mastering a framework in JavaScript will give you a quick start, you will also need to master the fundamentals of JS, in order to get the most out of it.

Have you started learning JavaScript? How has your experience been so far?

The article was originally published on CodeinWP.com

Angular vs React vs Vue: Which Framework to Choose in 2019

Chris Fitzgerald — Tue, 16 Jul 2019 07:30:02 +0000

Just about a year ago, developers were mainly debating on whether they should be using Angular or React for their projects. But over the course of 2018, we saw a growth of interest in a third player called Vue.js. Looking forward into 2019, this post is a comprehensive guide on which is perhaps the right solution for you: Angular vs React vs Vue.

If you are a developer starting out on a project and cannot decide on which JavaScript framework to use, this guide should help you make a decision.

We cover various aspects of Angular, Vue, and React to see how they suit your needs. This post is not just a guide on Angular vs React vs Vue but aims to provide a structure to help judge front-end JavaScript frameworks in general. In case a new framework arrives next year, you will know exactly what parameters to look at!

* In this post, we assume that you have basic knowledge of JavaScript and have used JavaScript frameworks as well.

Let’s get started:

Part 1: A brief history of Vue vs React vs Angular

Before we get into the technical details, let’s first talk about the history behind these frameworks – just to better appreciate their philosophy and their evolution over time.

Angular, developed by Google, was first released in 2010, making it the oldest of the lot. It is a TypeScript based JavaScript framework. A substantial shift occurred in 2016 on the release of Angular 2 (and the dropping of the “JS” from the original name – AngularJS). Angular 2+ is known as just Angular. Although AngularJS (version 1) still gets updates, we will focus the discussion on Angular. The latest stable version is Angular 7, which was released in October 2018.

Vue, also known as Vue.js, is the youngest member of the group. It was developed by ex-Google employee Evan You in 2014. Over the last two years, Vue has seen a substantial shift in popularity, even though it doesn’t have the backing of a large company. The current stable version is 2.17, released in August 2018. Vue’s contributors are supported by Patreon. Vue 3, currently in the prototyping phase is planning to move to TypeScript.

React, developed by Facebook, was initially released in 2013. Facebook uses React extensively in their products (Facebook, Instagram, and WhatsApp). The current stable version in 16.X, released in November 2018.

Here’s a short summary of Angular vs React vs Vue, in terms of their status and history:

	Angular	React	Vue
Initial release	2010	2013	2014
Official site	angular.io	reactjs.org	vuejs.org
Approx. size (KB)	500	100	80
Current version	7	16.6.3	2.17
Used by	Google, Wix	Facebook, Uber	Alibaba, GitLab

License 👮‍♂️

Before you use an open source framework, make sure you go through its license. Interestingly, all three frameworks use the MIT license, which provides limited restrictions on reuse, even in proprietary software. Make sure you know the implications of the license before using any framework or software.

Here is a quick summary of the MIT license in plain English terms.

Popularity 🔥

As “angular” and “react” are common words, it is difficult to grasp their popularity from Google Trends. Though, a good proxy for their popularity is the number of stars that their GitHub repositories get. A sudden shift in the number of stars of Vue occurred in mid-2016 and, recently, Vue has been up there with React as the most popular frameworks.

Let us check how the job market is for Angular vs React vs Vue, which is also a good measure of popularity:

Job market for Angular vs React vs Vue 👷‍♂️

The best sources of data that indicate the trends on the job market are the various job boards.

As seen from the trends of late 2018, the number of jobs that require a skill set of Angular or React is roughly the same, whereas that of Vue’s is still only a fraction of this number (about 20%). This list is definitely not exhaustive but gives a good picture of the overall tech industry.

If you are looking strictly from the point of view of the current job market, your best bet is to learn Angular or React. However, given that Vue has gained popularity over the last two years, it may take some time for projects to use Vue, or new projects that adopt Vue to reach a maturity level that commands a higher number of developers.

Part 2: Community and development

Now that you are familiar with the history and trends of each of these frameworks, we will look at the community to assess the development of these frameworks. We have already seen that for all of the frameworks, a major release has been shipped in the last four months, which indicates that development is going on in full swing.

Let us look at Angular vs React vs Vue with respect to statistics on their GitHub repositories:

	Angular	React	Vue
# Watchers	3.3k	3.7k	5.7k
# Stars	43k	71k	122k
# Forks	11k	16k	17k
# Commits in last month	446	339	81
# Contributors	798	1.8k	240

Vue has a huge number of watchers, stars and forks. This shows its popularity among users and its value when comparing Vue vs React. However, the number of commits and contributors for Vue are lower than Angular and React.

One possible explanation is that Vue is driven entirely by the open source community, whereas Angular and React have a significant share of Google and Facebook employees contributing to the repositories.

From the statistics, all three projects show significant development activity, and this is surely going to continue in the future — just these statistics cannot be the basis of not deciding to use either of them.

Part 3: Migrations

As you’re working with your framework of choice, you don’t want to have to worry about a framework update coming along and messing up your code. Though in most cases you won’t encounter many issues from one version to another, it’s important to keep your finger on the pulse because some updates can be more significant and require tweaks to keep things compatible.

Angular plans major updates every six months. There is also a period of another six months before any major APIs are deprecated, which gives you the time of two release cycles (one year) to make necessary changes if any.

When it comes to Angular vs React, Facebook has stated that stability is of utmost importance to them, as huge companies like Twitter and Airbnb use React. Upgrades through versions are generally the easiest in React, with scripts such as react-codemod helping you to migrate.

In the FAQ section for Migration, Vue mentions that 90% of the APIs are same if you are migrating from 1.x to 2. There is a migration helper tool that works on the console to assess the status of your app.

Part 4: Working with Vue vs Angular vs React

There are a handful of important characteristics to look at here, chief of them being overall size and load times, the components available, and learning curve.

Size and load times ⏲️

The sizes of the libraries are as follows:

Angular: 500+ KB
React: 100 KB
Vue: 80 KB

Although there is a significant difference between the sizes of the frameworks, they are still small as compared to the average webpage size (2+ MB in 2018). Additionally, if you use a popular CDN to load these libraries, it is highly probable that a user has the library already loaded in their local system.

Components 🏗️

Components are integral parts of all three frameworks, no matter if we’re talking Vue, React, or Angular. A component generally gets an input, and changes behavior based on it. This behavior change generally manifests as a change in the UI of some part of the page. The use of components makes it easy to reuse code. A component may be a cart on an e-commerce site or a login box on a social network.

In Angular, components are referred to as directives. Directives are just markers on DOM elements, which Angular can track and attach specific behavior too. Therefore, Angular separates the UI part of components as attributes of HTML tags, and their behaviors in the form of JavaScript code, this is what sets it apart when looking at Angular vs React.

React, interestingly, combines the UI and behavior of components. For instance, here is the code to create a hello world component in React. In React, the same part of the code is responsible for creating a UI element and dictating its behavior.

In Vue, UI and behavior are also a part of components, which makes things more intuitive when looking at Vue vs React. Also, Vue is highly customizable, which allows you to combine the UI and behavior of components from within a script. Further, you can also use pre-processors in Vue rather than CSS, which is a great functionality. Vue is great when it comes to integration with other libraries, like Bootstrap.

To compare how the same app looks with different libraries, here is a great post on creating the same to do list app on React and Vue and contrasting the differences of the two frameworks.

Learning curve 🎓

So how difficult is it to learn each of these frameworks?

Angular has a steep learning curve, considering it is a complete solution, and mastering Angular requires you to learn associated concepts like TypeScript and MVC. Even though it takes time to learn Angular, the investment pays dividends in terms of understanding how the front end works.

React offers a Getting Started guide that should help one set up React in about an hour. The documentation is thorough and complete, with solutions to common issues already present on StackOverflow. React is not a complete framework and advanced features require the use of third-party libraries. This makes the learning curve of the core framework not so steep but depends on the path you take with additional functionality. However, learning to use React does not necessarily mean that you are using the best practices.

Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components. Hence, the transition to Vue from either of the two is an easy option. However, simplicity and flexibility of Vue is a double-edged sword — it allows poor code, making it difficult to debug and test.

Although Angular, React and Vue have a significant learning curve, their uses upon mastery are limitless. For instance, you can integrate Angular and React with WordPress and WooCommerce to create progressive web apps.

Angular vs React vs Vue: Who wins?

Towards the end of this post, let us recall the characteristic features of each framework to try to answer the question: Angular vs React vs Vue: which one should you choose?

Angular is the most mature of the frameworks, has good backing in terms of contributors and is a complete package.

However, the learning curve is steep and concepts of development in Angular may put off new developers.

Angular is a good choice for companies with large teams and developers who already use TypeScript.

Extra 👉 Here are some Angular admin dashboard templates that you might be interested in.

React is just old enough to be mature and has a huge number of contributions from the community. It is gaining widespread acceptance. The job market for React is really good, and the future for this framework looks bright.

React looks like a good choice for someone getting started with front-end JavaScript frameworks, startups and developers who like some flexibility. The ability to integrate with other frameworks seamlessly gives it a great advantage for those who would like some flexibility in their code.

Vue is new to the arena, without the backing of a major company.

However, it has done really well in the last few years to come out as a strong competitor for Angular and React. This is perhaps playing a role with a lot of Chinese giants like Alibaba and Baidu picking Vue as their primary front-end JavaScript framework.

However, it remains to be seen how it does in the future and one is justified to be cautious with it. Vue should be your choice if you prefer simplicity, but also like flexibility.

Extra 👉 Here are some Vue admin templates built with Bootstrap that you might be interested in.

The answer to the debate of Angular vs React vs Vue is that there’s no absolute right choice, which you’ve probably expected.

Each of these libraries has their own benefits and drawbacks. Based on the project you’re working on, and your individual requirements, one of them is going to be more suitable than the others. It’s always key to do your own research before deciding, especially if you’re going to be working on a business venture and not on a personal project.

Which framework do you think is the winner here – Angular vs React vs Vue?

The article was originally published on CodeinWP.com

A Vue.js Tutorial for Beginner Developers: Learn the Basics and Use This Starter Vue Structure

Chris Fitzgerald — Fri, 12 Jul 2019 10:55:50 +0000

Whenever you start using new technologies in your development flow, you might feel at least a bit intimidated. Especially when there’s a myriad of npm packages out there in the wild. Mixing and matching things can sometimes take a lot of time and effort, and is usually frustrating. This is where the following Vue.js tutorial for beginner developers comes into play.

What is Vue.js? Why should you care? 🤔

Vue.js or Vue for short is a JavaScript framework for building user interfaces. Compared to other frameworks, like Angular or React, Vue is more approachable and has not as steep of a learning curve.

Vue is also modular, and will allow you to split your code into reusable components. Each of them having their own HTML markup, CSS and JavaScript code.

What is the scope of this Vue.js tutorial? 🔍

The purpose of this short Vue.js tutorial is to provide you with some scaffolding on which you can build and experiment with Vue. We’re going to take a look at a basic setup of a Vue app inside the WordPress dashboard.

(Note; We will not be teaching you Vue per se in this guide, but you can go ahead and learn more about the framework from the official guide after you set up the project here – on which you can continue to experiment after we are done.)

What we’re going to do is use a predefined template for WordPress plugins using Vue. You can find it in the following GitHub repository if you want to take a deeper look: https://github.com/abaicus/vue-wp-bootstrap.

Vue.js tutorial: Prerequisites 🚀

There are a few things that you should already have set up on your computer to continue following this guide:

Firstly, you are going to need a LAMP stack – you can use XAMPP on Windows or Mac, or Local by Flywheel on Mac, and then set yourself up a fresh local WordPress install.

Make sure you have the NodeJS package manager (npm) installed on your machine. You will also need to install two more packages via the terminal – the Vue CLI and the Vue template initializing tool. Like so:

$ npm install -g @vue/cli
$ npm install -g @vue/cli-init

After you have installed these two dependencies, you need to change the active directory to your local WordPress instance’s wp-content/plugins directory and then run the following command there:

$ vue init abaicus/vue-wp-bootstrap my-vue-dashboard-plugin

Next up, you will be prompted to answer some questions regarding the setup of your project.

For the Build prompt, just go ahead and choose the first option for now “Runtime + Compiler: recommended for most users”.

You can enable ESLint linter if you want. It will detect any linting errors in your project, but you don’t necessarily have to worry about this right now.

Commit Lint and Pre-Commit Hooks are meant to check your commit messages and the code before sending a commit to GitHub – to keep everything tidy and nicely formatted.

You will end up with a terminal looking more or less like this after you are done:

You can go ahead and follow the instructions on the screen. Change the directory to the newly generated plugin directory and run the commands shown in the terminal prompt. This will get your application up and running, waiting for changes inside your code and it will transpile the Vue code to JavaScript.

What does it do? 💻

Not much. This is just a basic application that displays some data from the backend. Not much Vue under the hood. You can go ahead to the Plugins Dashboard page and activate it. It’s going to add a new page in your Admin Menu. Upon navigating to it, you’re going to find a dashboard page with two strings:

The plugin scaffolding structure 👨🏼‍💻

Let’s take a look at the file structure for the newly generated plugin. We’re going to ignore most of the config files in this Vue.js tutorial so that we can focus on the structure of the application:

First, we’ve got the plugin.php file, which is the entry point for the actual plugin. Here, we have the main Plugin class. This is where the main components of the application are included and ran.

Next up, there’s the package.json file where all the dependencies and a bunch of other project info is defined. The part in which you may be interested lives under the “scripts” field. There, you have all the commands that you can run with the npm run prefix. The important ones, for now, should be npm run dev (which builds the application for development) and npm run build (which you should run once you are ready to deploy your app for production). The other commands are adjacent to these two or do other stuff that you shouldn’t need to worry about at this moment.

Inside the includes directory, there are three files:

The rest.php class doesn’t do anything at the moment, but you already have a structure to add your RestAPI routes
The assets.php class handles style and script enqueueing. Here, the JavaScript file is localized to pass starting data from PHP to our Vue app. At the moment, there are just two texts sent, but you can include anything you want.
The admin.php file is the one that is taking care of adding a new page in the dashboard and rendering the actual plugin page. You’re going to notice the app itself is rendered just as two empty
tags inside the plugin_page() function. That’s because the JavaScript will handle the actual rendering of the application after it loads.
Inside the assets directory, you’re going to find four more directories:
- The src directory – the source files for our Vue app, which we’re going to talk about later.
- The scss directory – the SCSS style files from which we generate the CSS stylesheet.
- The js directory – the transpiled code which is generated from our files in the src directory.
- The css directory – the compiled style from the SCSS files.
The src directory and Vue template files

Inside this directory, there are two files: main.js and App.vue. The main.js file is the entry point for the application. It attaches the Vue app component to the DOM element with the corresponding id.
```
/* jshint esversion: 6 */
import Vue from 'vue'
import App from './App.vue'

window.addEventListener('load', function () {
  new Vue({ // eslint-disable-line no-new
    el: '#mvdp-app',
    components: { App },
    render: (h) => h(App)
  })
})
```
The actual application markup is inside the App.vue template:
```
/* jshint esversion: 6 */
<template>
  <div>
    <h1>{{this.strings.title}}</h1>
    <p>{{this.strings.description}}</p>
  </div>
</template>

<script>
  /* global MVDP */
  export default {
    data () {
      return {
        strings: MVDP.strings
      }
    },
    name: 'App.vue'
  }
</script>

<style scoped>

</style>
```
You can see inside the snippet above that we’re using the strings we localized in the Assets class. One of the great features of Vue is that the code of the component is neatly organized into template, script, and style making it easy to understand the structure.

That’s it, you now have a solid starting point for whatever you want to develop further with Vue.js! I hope this Vue.js tutorial has been helpful.

The article was originally published on CodeinWP.com