How to Migrate a Simple Web Server from Azure to Alibaba Cloud

This article was originally published on Alibaba Cloud. Thank you for supporting the partners who make SitePoint possible.

The cloud, despite its ubiquity, is still an emerging technology with vast innovations across multiple industries. Owing to its flexibility and advanced security model, organizations have already started to move most of their IT workloads to the cloud. Some of the high-level reasons to move to cloud are listed below:

  • Fast and efficient deployment
  • Less or no capital investment
  • Reliability, scalability, sustainability & resource pooling
  • Pay as you go, with no monthly commitment
  • Highly automated with utility based system
  • On-demand service

Seamless integration is what we all expect when it comes to information technology, especially with migration. However, this is easier said than done. Cloud migration is fairly complicated because it involves so many elements, from picking a suitable operating system (OS) to selecting the best geographical region for our deployments. Migration also involves some standard processes and considerations and is no small feat.

Migration strategies differ on a case-by-case basis, however as a whole, cloud migration should be based on best practices from previous examples. An effective migration strategy should maintain a reliable, real-time migration, with less or zero down time. Migration can be broadly categorized into physical to virtual (cloud migration), virtual to virtual (multi-cloud), and virtual to physical (hybrid cloud). Migration can have any combination of these categories.

In this article, we are focused on physical to virtual and virtual to virtual migration. Here the target is going to be the Alibaba Cloud platform. This whole process involves Alibaba tools for image conversion, OSS for storage, and some third-party tools to synchronize the data in real time.

For a successful migration, the standard process and procedures below are applicable for most organizations.

  • Cloud ready assessment (involves infra assessment to decide which workloads can be moved to the cloud)
  • Migration kick-off meeting (listing down servers, application, down time preparation, cutover and other requirements)
  • Creating a backup plan – A migration plan is incomplete without a backup plan. There is always a non-zero probability for errors to happen in a migration process, and damage is often irreversible.
  • Schedule migration, notify users if there is any down time expected during cutover.
  • Make a checklist of functions.
  • Post migration testing before moving to production, to ensure all are met in terms of functions, operations.

Cloud migration can be perform in two ways: application level migration and virtual machine (VM) migration. The choice is based on the applications running on virtual/physical servers; we may need to plan which one will be best suitable for migration.

Application Migration

During migration assessment, we need to check how many applications can support real time migration. For example, Microsoft Exchange can use native DAG; SQL replication tools can be used for database mirroring.

Irrespective of any application and platform, it is always better to get an insight from application experts. Typically, a migration expert will create similar infrastructure as the source on the target platform (such as Alibaba Cloud), and then establish a connection using VPN/MPLS to create site-site connection. Some applications can simply be migrated using public IP without VPN.

Do real time replication/migration using native methods and switchover. Switchover/cutover requires several steps to be performed by administrators like changing DNS, routing configuration, firewall customization and so on.

VM Migration (Image Migration)

If there is no available method for application migration, or if the application level migration is complicated, VM migration is an alternative. Also known as image migration, VM migration is the best option for any organization to simplify the migration process.

This method is sometimes simply referred to as migrating from a platform to another platform. Alibaba Cloud runs on the KVM/XEN platform, so we need to ensure that it has all required drives to support automation, licensing, and all other cloud dependencies.

There are few migration scenarios listed below:

  • On premise (IDC) to Alibaba Cloud
  • Traditional virtualization platform to Alibaba Cloud
  • Other public cloud to Alibaba Cloud
  • One region of Alibaba Cloud to another region of Alibaba Cloud

Alibaba Cloud Migration Tool

Irrespective of any source platform Alibaba Cloud has a tool called Alibaba Cloud Migration Tool (Cloud Migration Tool) to perform migration to create ECS instances. Alibaba Cloud invests resources into various categories of image migration to carry out the process with ease and effectiveness.

Before you use the Alibaba Cloud Migration Tool, you need to consider the following:

  • The on-premises server can access the Internet for uninterruptedly transferring data to Alibaba Cloud ECS console.
  • The system time of the on-premises server is synchronized with the real time. Otherwise, an error indicating abnormal TimeStamp is recorded in the migration log file.
  • To enable all the server configuration successfully after the migration, we recommend that you install cloud-init for your on-premises servers.

For on-premises servers running Windows OS

  • The go2aliyun_client.exe and Rsyncbinrsync.exe programs are not restricted by firewall on the server.
  • The system start loader is normal.
  • Run Alibaba Cloud Migration Tool as an administrator.

For on-premises servers running Linux OS

  • The go2aliyun_client program is not restricted by firewall on the server.
  • The Rsync library has been installed.

oCentOS: Run yum install rsync –y.
oUbuntu: Run apt-get install rsync –y.
oDebian: Run apt-get install rsync –y.
oOther distributions: See the installation documents of the distributions on their official website.

  • The Xen or Kernel-based Virtual Machine (KVM) driver is installed. For more information about how to install a KVM driver, see install virtio driver.
  • SELinux must has been deactivated. You can temporarily deactivate SELinux by running setenforce 0.
  • Run Alibaba Cloud Migration Tool as a root user.
  • If the kernel of your on-premises Linux servers is too old and the version of GRUB (GRand Unified Bootloader) is earlier than 1.9. You may update the boot loader GRUB to a version later than 1.9.

The migration process is as follows:

  • Request for migration tool from this link
  • After approval, decompress the folder at source and modify the JSON Script as needed
  • JSON Script needs to have the value of AccessID, Secret Key, Region ID, Image name, System disk size & Data disk
  • For more details refer to this link and refer to below screenshots to validate the process.

Sample Migration Process

Below are the steps performed to migrate a simple web server from Azure to Alibaba cloud.

Operating System: Windows Server 2016

1. Extract the folder and locate JSON > Open with > Notepad

2. Modify as below. Refer to this link for more parameters. To create and obtain new access key, refer here.

{
    "access_id": "ENTER_YOUR_ACCESS_ID",
    "secret_key": "ENTER_YOUR_SECRET_KEY",
    "region_id": "me-east-1",
    "image_name": "KingsonWS",
    "system_disk_size": 60,
    "platform": "",
    "architecture": "",
    "data_disks": [],
    "bandwidth_limit": 0
}

3. Save the file and run go2aliyun_client tool as an administrator.

Continue reading %How to Migrate a Simple Web Server from Azure to Alibaba Cloud%


Source: Sitepoint

Introduction to the Stimulus Framework

There are lots of JavaScript frameworks out there. Sometimes I even start to think that I’m the only one who has not yet created a framework. Some solutions, like Angular, are big and complex, whereas some, like Backbone (which is more a library than a framework), are quite simple and only provide a handful of tools to speed up the development process.

In today’s article I would like to present you a brand new framework called Stimulus. It was created by a Basecamp team led by David Heinemeier Hansson, a popular developer who was the father of Ruby on Rails.

Stimulus is a small framework that was never intended to grow into something big. It has its very own philosophy and attitude towards front-end development, which some programmers might like or dislike. Stimulus is young, but version 1 has already been released so it should be safe to use in production. I’ve played with this framework quite a bit and really liked its simplicity and elegance. Hopefully, you will enjoy it too!

In this post we’ll discuss the basics of Stimulus while creating a single-page application with asynchronous data loading, events, state persistence, and other common things.

The source code can be found on GitHub.

Introduction to Stimulus

Stimulus was created by developers at Basecamp. Instead of creating single-page JavaScript applications, they decided to choose a majestic monolith powered by Turbolinks and some JavaScript. This JavaScript code evolved into a small and modest framework which does not require you to spend hours and hours learning all its concepts and caveats.

Stimulus is mostly meant to attach itself to existing DOM elements and work with them in some way. It is possible, however, to dynamically render the contents as well. All in all, this framework is quite different from other popular solutions as, for example, it persists state in HTML, not in JavaScript objects. Some developers may find it inconvenient, but do give Stimulus a chance, as it really may surprise you.

The framework has only three main concepts that you should remember, which are:

  • Controllers: JS classes with some methods and callbacks that attach themselves to the DOM. The attachment happens when a data-controller “magic” attribute appears on the page. The documentation explains that this attribute is a bridge between HTML and JavaScript, just like classes serve as bridges between HTML and CSS. One controller can be attached to multiple elements, and one element may be powered up by multiple controllers.
  • Actions: methods to be called on specific events. They are defined in special data-action attributes.
  • Targets: important elements that can be easily accessed and manipulated. They are specified with the help of data-target attributes.

As you can see, the attributes listed above allow you to separate content from behaviour logic in a very simple and natural way. Later in this article, we will see all these concepts in action and notice how easy it is to read an HTML document and understand what’s going on.

Bootstrapping a Stimulus Application

Stimulus can be easily installed as an NPM package or loaded directly via the script tag as explained in the docs. Also note that by default this framework integrates with the Webpack asset manager, which supports goodies like controller autoloading. You are free to use any other build system, but in this case some more work will be needed.

The quickest way to get started with Stimulus is by utilizing this starter project that has Express web server and Babel already hooked up. It also depends on Yarn, so be sure to install it. To clone the project and install all its dependencies, run:

If you’d prefer not to install anything locally, you may remix this project on Glitch and do all the coding right in your browser.

Great—we are all set and can proceed to the next section!

Some Markup

Suppose we are creating a small single-page application that presents a list of employees and loads information like their name, photo, position, salary, birthdate, etc.

Let’s start with the list of employees. All the markup that we are going to write should be placed inside the public/index.html file, which already has some very minimal HTML. For now, we will hard-code all our employees in the following way:

Nice! Now let’s add a dash of Stimulus magic.

Creating a Controller

As the official documentation explains, the main purpose of Stimulus is to connect JavaScript objects (called controllers) to the DOM elements. The controllers will then bring the page to life. As a convention, controllers’ names should end with a _controller postfix (which should be very familiar to Rails developers).

There is a directory for controllers already available called src/controllers. Inside, you will find a  hello_controller.js file that defines an empty class:

Let’s rename this file to employees_controller.js. We don’t need to specifically require it because controllers are loaded automatically thanks to the following lines of code in the src/index.js file:

The next step is to connect our controller to the DOM. In order to do this, set a data-controller attribute and assign it an identifier (which is employees in our case):

That’s it! The controller is now attached to the DOM.

Lifecycle Callbacks

One important thing to know about controllers is that they have three lifecycle callbacks that get fired on specific conditions:

  • initialize: this callback happens only once, when the controller is instantiated.
  • connect: fires whenever we connect the controller to the DOM element. Since one controller may be connected to multiple elements on the page, this callback may run multiple times.
  • disconnect: as you’ve probably guessed, this callback runs whenever the controller disconnects from the DOM element.

Nothing complex, right? Let’s take advantage of the initialize() and connect() callbacks to make sure our controller actually works:

Next, start the server by running:

Navigate to http://localhost:9000. Open your browser’s console and make sure both messages are displayed. It means that everything is working as expected!

Adding Events

The next core Stimulus concept is events. Events are used to respond to various user actions on the page: clicking, hovering, focusing, etc. Stimulus does not try to reinvent a bicycle, and its event system is based on generic JS events.

For instance, let’s bind a click event to our employees. Whenever this event happens, I would like to call the as yet non-existent choose() method of the employees_controller:

Probably, you can understand what’s going on here by yourself.

  • data-action is the special attribute that binds an event to the element and explains what action should be called.
  • click, of course, is the event’s name.
  • employees is the identifier of our controller.
  • choose is the name of the method that we’d like to call.

Since click is the most common event, it can be safely omitted:

In this case, click will be used implicitly.

Next, let’s code the choose() method. I don’t want the default action to happen (which is, obviously, opening a new page specified in the href attribute), so let’s prevent it:

e is the special event object that contains full information about the triggered event. Note, by the way, that this returns the controller itself, not an individual link! In order to gain access to the element that acts as the event’s target, use e.target.

Reload the page, click on a list item, and observe the result!

Working With the State

Now that we have bound a click event handler to the employees, I’d like to store the currently chosen person. Why? Having stored this info, we can prevent the same employee from being selected the second time. This will later allow us to avoid loading the same information multiple times as well.

Stimulus instructs us to persist state in the Data API, which seems quite reasonable. First of all, let’s provide some arbitrary ids for each employee using the data-id attribute:

Next, we need to fetch the id and persist it. Using the Data API is very common with Stimulus, so a special this.data object is provided for each controller. With its help, we can run the following methods:

  • this.data.get('name'): get the value by its attribute.
  • this.data.set('name', value): set the value under some attribute.
  • this.data.has('name'): check if the attribute exists (returns a boolean value).

Unfortunately, these shortcuts are not available for the targets of the click events, so we must stick with getAttribute() in their case:

But we can do even better by creating a getter and a setter for the currentEmployee:

Notice how we are using the this.currentEmployee getter and making sure that the provided id is not the same as the already stored one.

Now you may rewrite the choose() method in the following way:

Reload the page to make sure that everything still works. You won’t notice any visual changes yet, but with the help of the Inspector tool you’ll notice that the ul has the data-employees-current-employee attribute with a value that changes as you click on the links. The employees part in the attribute’s name is the controller’s identifier and is being added automatically.

Now let’s move on and highlight the currently chosen employee.

Using Targets

When an employee is selected, I would like to assign the corresponding element with a .chosen class. Of course, we might have solved this task by using some JS selector functions, but Stimulus provides a neater solution.

Meet targets, which allow you to mark one or more important elements on the page. These elements can then be easily accessed and manipulated as needed. In order to create a target, add a data-target attribute with the value of {controller}.{target_name} (which is called a target descriptor):

Now let Stimulus know about these new targets by defining a new static value:

How do we access the targets now? It’s as simple as saying this.employeeTarget (to get the first element) or this.employeeTargets (to get all the elements):

Great! How can these targets help us now? Well, we can use them to add and remove CSS classes with ease based on some criteria:

The idea is simple: we iterate over an array of targets and for each target compare its data-id to the one stored under this.currentEmployee. If it matches, the element is assigned the .chosen class. Otherwise, this class is removed. You may also extract the if (this.currentEmployee !== id) { condition from the setter and use it in the chosen() method instead:

Looking nice! Lastly, we’ll provide some very simple styling for the .chosen class inside the public/main.css:

Reload the page once again, click on a person, and make sure that person is being highlighted properly.

Loading Data Asynchronously

Our next task is to load information about the chosen employee. In a real-world application, you would have to set up a hosting provider, a back-end powered by something like Django or Rails, and an API endpoint that responds with JSON containing all the necessary data. But we are going to make things a bit simpler and concentrate on the client side only. Create an employees directory under the public folder. Next, add four files containing data for individual employees:

1.json

2.json

3.json

4.json

All photos were taken from the free stock photography by Shopify called Burst.

Our data is ready and waiting to be loaded! In order to do this, we’ll code a separate loadInfoFor() method:

This method accepts an employee’s id and sends an asynchronous fetch request to the given URI. There are also two promises: one to fetch the body and another one to display the loaded info (we’ll add the corresponding method in a moment).

Utilize this new method inside choose():

Before coding the displayInfo() method, we need an element to actually render the data to. Why don’t we take advantage of targets once again?

Define the target:

And now utilize it to display all the info:

Of course, you are free to employ a templating engine like Handlebars, but for this simple case that would probably be overkill.

Now reload the page and choose one of the employees. His bio and image should be loaded nearly instantly, which means our app is working properly!

Dynamic List of Employees

Using the approach described above, we can go even further and load the list of employees on the fly rather than hard-coding it.

Prepare the data inside the public/employees.json file:

Now tweak the public/index.html file by removing the hard-coded list and adding a data-employees-url attribute (note that we must provide the controller’s name, otherwise the Data API won’t work):

As soon as controller is attached to the DOM, it should send a fetch request to build a list of employees. It means that the connect() callback is the perfect place to do this:

I propose we create a more generic loadFrom() method that accepts a URL to load data from and a callback to actually render this data:

Tweak the choose() method to take advantage of the loadFrom():

displayInfo() can be simplified as well, since JSON is now being parsed right inside the loadFrom():

Remove loadInfoFor() and code the displayEmployees() method:

That’s it! We are now dynamically rendering our list of employees based on the data returned by the server.

Conclusion

In this article we have covered a modest JavaScript framework called Stimulus. We have seen how to create a new application, add a controller with a bunch of callbacks and actions, and introduce events and actions. Also, we’ve done some asynchronous data loading with the help of fetch requests.

All in all, that’s it for the basics of Stimulus—it really does not expect you to have some arcane knowledge in order to craft web applications. Of course, the framework will probably have some new features in future, but the developers are not planning to turn it into a huge monster with hundreds of tools. 

If you’d like to find more examples of using Stimulus, you may also check out this tiny handbook. And if you’re looking for additional JavaScript resources to study or to use in your work, check out what we have available in the Envato Market

Did you like Stimulus? Would you be interested in trying to create a real-world application powered by this framework? Share your thoughts in the comments!

As always, I thank you for staying with me and until the next time.


Source: Nettuts Web Development

Single-Page React Applications With the React-Router and React-Transition-Group Modules

This tutorial will walk you through using the react-router and react-transition-group modules to create multi-page React applications with page transition animations.

Preparing the React App

Installing the create-react-app Package

If you’ve ever had the chance to try React, you’ve probably heard about the create-react-app package, which makes it super easy to start with a React development environment.

In this tutorial, we will use this package to initiate our React app.

So, first of all, make sure you have Node.js installed on your computer. It will also install npm for you.

In your terminal, run npm install -g create-react-app. This will globally install create-react-app on your computer.

Once it is done, you can verify whether it is there by typing create-react-app -V.

Creating the React Project

Now it’s time to build our React project. Just run create-react-app multi-page-app. You can, of course, replace multi-page-app with anything you want.

Now, create-react-app will create a folder named multi-page-app. Just type cd multi-page-app to change directory, and now run npm start to initialize a local server.

That’s all. You have a React app running on your local server.

Now it’s time to clean the default files and prepare our application.

In your src folder, delete everything but App.js and index.js. Then open index.js and replace the content with the code below.

I basically deleted the registerServiceWorker related lines and also the import './index.css'; line.

Also, replace your App.js file with the code below.

Now we will install the required modules.

In your terminal, type the following commands to install the react-router and react-transition-group modules respectively.

npm install react-router-dom --save

npm install react-transition-group@1.x --save

After installing the packages, you can check the package.json file inside your main project directory to verify that the modules are included under dependencies.

Router Components

There are basically two different router options: HashRouter and BrowserRouter.

As the name implies, HashRouter uses hashes to keep track of your links, and it is suitable for static servers. On the other hand, if you have a dynamic server, it is a better option to use BrowserRouter, considering the fact that your URLs will be prettier.

Once you decide which one you should use, just go ahead and add the component to your index.js file.

import { HashRouter } from 'react-router-dom'

The next thing is to wrap our <App> component with the router component.

So your final index.js file should look like this:

If you’re using a dynamic server and prefer to use BrowserRouter, the only difference would be importing the BrowserRouter and using it to wrap the <App> component.

By wrapping our <App> component, we are serving the history object to our application, and thus other react-router components can communicate with each other.

Inside <App/> Component

Inside our <App> component, we will have two components named <Menu> and <Content>. As the names imply, they will hold the navigation menu and displayed content respectively.

Create a folder named “components” in your src directory, and then create the Menu.js and Content.js files.

Menu.js

Let’s fill in our Menu.js component.

It will be a stateless functional component since we don’t need states and life-cycle hooks.

Here we have a <ul> tag with <li> tags, which will be our links.

Now add the following line to your Menu component.

import { Link } from 'react-router-dom'

And then wrap the content of the <li> tags with the <Link> component.

The <Link> component is essentially a react-router component acting like an <a> tag, but it does not reload your page with a new target link.

Also, if you style your a tag in CSS, you will notice that the <Link> component gets the same styling.

Note that there is a more advanced version of the <Link> component, which is <NavLink>. This offers you extra features so that you can style the active links.

Now we need to define where each link will navigate. For this purpose, the <Link> component has a to prop.

Content.js

Inside our <Content> component, we will define the Routes to match the Links.

We need the Switch and Route components from react-router-dom. So, first of all, import them.

import { Switch, Route } from 'react-router-dom'

Second of all, import the components that we want to route to. These are the HomeWorks and About components for our example. Assuming you have already created those components inside the components folder, we also need to import them.

import Home from './Home'

import Works from './Works'

import About from './About'

Those components can be anything. I just defined them as stateless functional components with minimum content. An example template is below. You can use this for all three components, but just don’t forget to change the names accordingly.

Switch

We use the <Switch> component to group our <Route> components. Switch looks for all the Routes and then returns the first matching one.

Route

Routes are components calling your target component if it matches the path prop.

The final version of our Content.js file looks like this:

Notice that the extra exact prop is required for the Home component, which is the main directory. Using exact forces the Route to match the exact pathname. If it’s not used, other pathnames starting with / would also be matched by the Home component, and for each link, it would only display the Home component.

Now when you click the menu links, your app should be switching the content.

Animating the Route Transitions

So far, we have a working router system. Now we will animate the route transitions. In order to achieve this, we will use the react-transition-group module.

We will be animating the mounting state of each component. When you route different components with the Route component inside Switch, you are essentially mounting and unmounting different components accordingly.

We will use react-transition-group in each component we want to animate. So you can have a different mounting animation for each component. I will only use one animation for all of them.

As an example, let’s use the <Home> component.

First, we need to import CSSTransitionGroup.

import { CSSTransitionGroup } from 'react-transition-group'

Then you need to wrap your content with it.

Since we are dealing with the mounting state of the component, we enable transitionAppear and set a timeout for it. We also disable transitionEnter and transitionLeave, since these are only valid once the component is mounted. If you are planning to animate any children of the component, you have to use them.

Lastly, add the specific transitionName so that we can refer to it inside the CSS file.

We also imported a CSS file, where we define the CSS transitions.

If you refresh the page, you should see the fade-in effect of the Home component.

If you apply the same procedure to all the other routed components, you will see their individual animations when you change the content with your Menu.

Conclusion

In this tutorial, we covered the react-router-dom and react-transition-group modules. However, there’s more to both modules than we covered in this tutorial. Here is a working demo of what was covered.

So, to learn more features, always go through the documentation of the modules you are using.

Over the last couple of years, React has grown in popularity. In fact, we have a number of items in the marketplace that are available for purchase, review, implementation, and so on. If you’re looking for additional resources around React, don’t hesitate to check them out.


Source: Nettuts Web Development

What You Need To Know To Increase Mobile Checkout Conversions

What You Need To Know To Increase Mobile Checkout Conversions

What You Need To Know To Increase Mobile Checkout Conversions

Suzanna Scacca

2018-04-20T13:35:58+02:00
2018-04-20T11:44:03+00:00

Google’s mobile-first indexing is here. Well, for some websites anyway. For the rest of us, it will be here soon enough, and our websites need to be in tip-top shape if we don’t want search rankings to be adversely affected by the change.

That said, responsive web design is nothing new. We’ve been creating custom mobile user experiences for years now, so most of our websites should be well poised to take this on… right?

Here’s the problem: Research shows that the dominant device through which users access the web, on average, is the smartphone. Granted, this might not be the case for every website, but the data indicates that this is the direction we’re headed in, and so every web designer should be prepared for it.

However, mobile checkout conversions are, to put it bluntly, not good. There are a number of reasons for this, but that doesn’t mean that m-commerce designers should take this lying down.

As more mobile users rely on their smart devices to access the web, websites need to be more adeptly designed to give them the simplified, convenient and secure checkout experience they want. In the following roundup, I’m going to explore some of the impediments to conversion in the mobile checkout and focus on what web designers can do to improve the experience.

Why Are Mobile Checkout Conversions Lagging?

According to the data, prioritizing the mobile experience in our web design strategies is a smart move for everyone involved. With people spending roughly 51% of their time with digital media through mobile devices (as opposed to only 42% on desktop), search engines and websites really do need to align with user trends.

Now, while that statistic paints a positive picture in support of designing websites with a mobile-first approach, other statistics are floating around that might make you wary of it. Here’s why I say that: Monetate’s e-commerce quarterly report issued for Q1 2017 had some really interesting data to show.

In this first table, they break down the percentage of visitors to e-commerce websites using different devices between Q1 2016 and Q1 2017. As you can see, smartphone Internet access has indeed surpassed desktop:

Website Visits by DeviceQ1 2016Q2 2016Q3 2016Q4 2016Q1 2017
Traditional49.30%47.50%44.28%42.83%42.83%
Smartphone36.46%39.00%43.07%44.89%44.89%
Other0.62%0.39%0.46%0.36%0.36%
Tablet13.62%13.11%12.19%11.91%11.91%

Monetate’s findings on which devices are used to access in the Internet. (Source)

In this next data set, we can see that the average conversion rate for e-commerce websites isn’t great. In fact, the number has gone down significantly since the first quarter of 2016.

Conversion RatesQ1 2016Q2 2016Q3 2016Q4 2016Q1 2017
Global3.10%2.81%2.52%2.94%2.48%

Monetate’s findings on overall e-commerce global conversion rates (for all devices). (Source)

Even more shocking is the split between device conversion rates:

Conversion Rates by DeviceQ1 2016Q2 2016Q3 2016Q4 2016Q1 2017
Traditional4.23%3.88%3.66%4.25%3.63%
Tablet1.42%1.31%1.17%1.49%1.25%
Other0.69%0.35%0.50%0.35%0.27%
Smartphone3.59%3.44%3.21%3.79%3.14%

Monetate’s findings on the average conversion rates, broken down by device. (Source)

Smartphones consistently receive fewer conversions than desktop, despite being the predominant device through which users access the web.

What’s the problem here? Why are we able to get people to mobile websites, but we lose them at checkout?

In its report from 2017 named “Mobile’s Hierarchy of Needs,” comScore breaks down the top five reasons why mobile checkout conversion rates are so low:

Reasons why m-commerce doesn’t convert

The most common reasons why m-commerce shoppers don’t convert. (Image: comScore) (View large version)

Here is the breakdown for why mobile users don’t convert:

  • 20.2% — security concerns
  • 19.6% — unclear product details
  • 19.6% — inability to open multiple browser tabs to compare
  • 19.3% — difficulty navigating
  • 18.6% — difficulty inputting information.

Those are plausible reasons to move from the smartphone to the desktop to complete a purchase (if they haven’t been completely turned off by the experience by that point, that is).

In sum, we know that consumers want to access the web through their mobile devices. We also know that barriers to conversion are keeping them from staying put. So, how do we deal with this?

10 Ways to Increase Mobile Checkout Conversions In 2018

For most of the websites you’ve designed, you’re not likely to see much of a change in search ranking when Google’s mobile-first indexing becomes official.

Your mobile-friendly designs might be “good enough” to keep your websites at the top of search (to start, anyway), but what happens if visitors don’t stick around to convert? Will Google start penalizing you because your website can’t seal the deal with the majority of visitors? In all honesty, that scenario will only occur in extreme cases, where the mobile checkout is so poorly constructed that bounce rates skyrocket and people stop wanting to visit the website at all.

Let’s say that the drop-off in traffic at checkout doesn’t incur penalties from Google. That’s great… for SEO purposes. But what about for business? Your goal is to get visitors to convert without distraction and without friction. Yet, that seems to be what mobile visitors get.

Going forward, your goal needs to be two-fold:

  • to design websites with Google’s mobile-first mission and guidelines in mind,
  • to keep mobile users on the website until they complete a purchase.

Essentially, this means decreasing the amount of work users have to do and improving the visibility of your security measures. Here is what you can do to more effectively design mobile checkouts for conversions.

1. Keep the Essentials in the Thumb Zone

Research on how users hold their mobile phones is old hat by now. We know that, whether they use the single- or double-handed approach, certain parts of the mobile screen are just inconvenient for mobile users to reach. And when expediency is expected during checkout, this is something you don’t want to mess around with.

For single-handed users, the middle of the screen is the prime playing field:

The thumb zone for single-handed mobile

The good, OK and bad areas for single-handed mobile users. (Image: UX Matters) (View large version)

Although users who cradle their phones for greater stability have a couple options for which fingers to use to interact with the screen, only 28% use their index finger. So, let’s focus on the capabilities of thumb users, which, again, means giving the central part of the screen the most prominence:

The thumb and index finger zone for mobile cradling

The good, OK and bad areas for mobile users that cradle their phones. (Image: UX Matters) (View large version)

Some users hold their phones with two hands. Because the horizontal orientation is more likely to be used for video, this won’t be relevant for mobile checkout. So, pay attention to how much space of that screen is feasibly within reach of the user’s thumb:

The thumb zone for vertical and horizontal

The good, OK and bad areas for two-handed mobile users. (Image: UX Matters) (View large version)

In sum, we can use Smashing Magazine’s breakdown of where to focus content, regardless of left-hand, right-hand or two-handed holding of a smartphone:

Where the ideal thumb zone is on mobile

A summary of where the good, OK and bad zones are on mobile devices. (Image: Smashing Magazine) (View large version)

JCPenney’s website is a good example of how to do this:

JCPenney’s form is in the thumb zone

JCPenney’s contact form starts midway down the page. (Image: JCPenney) (View large version)

While information is included at the top of the checkout page, the input fields don’t start until just below the middle of it — directly in the ideal thumb zone for users of any type. This ensures that visitors holding their phones in any manner and using different fingers to engage with it will have no issue reaching the form fields.

2. Minimize Content to Maximize Speed

We’ve been taught over and over again that minimal design is best for websites. This is especially true in mobile checkout, where an already slow or frustrating experience could easily push a customer over the edge, when all they want to do is be done with the purchase.


Source: Smashing Magazine

How to Build a Serverless, CMS-powered Angular Application

Angular has taken off in popularity and is in widespread use. Developed and maintained by Google engineers, Angular has found a place all across dynamic web applications and is an increasingly in-demand platform.

Angular offers the advantages of a large and enthusiastic community and outstanding MVC that doesn’t require developers to spend valuable time writing code to put multiple MVC components back together again. In short, Angular is a robust and comprehensive web application framework for front-end development that is unit-testing ready, making it the tool of choice for many developers.

If you’re using Angular, you may run into the need for content management capability — a blog being one example. Adding a CMS to an Angular app may seem daunting, especially if you’re trying to integrate it into a traditional CMS like WordPress, but there’s a new breed of API-based CMS that greatly simplifies things. ButterCMS is one example of a SaaS-based headless CMS that provides a hosted CMS dashboard and content API that you query from your Angular application. This means you don’t need to spin up any new infrastructure to add a CMS to your Angular app.

This tutorial will demonstrate how to build a CMS-powered Angular application that has marketing pages (customer case studies), a blog, and FAQ, all powered via an API. No servers needed!

Installation

First, you’ll get started by installing the Angular CLI.

npm install -g @angular/cli</td>

Set up a new Angular project using Angular CLI. By default, Angular CLI uses CSS styling, so adding the --style=scss flag tells Angular CLI to use SCSS instead:

ng new hello-buttercms-project --style=scss
cd hello-buttercms-project

Install Angular Material and Angular Material related package:

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

Install ButterCMS. Run this in your command line:

npm install buttercms --save

Butter can also be loaded using a CDN:

<script src="https://cdnjs.buttercms.com/buttercms-1.1.1.min.js"></script>

Quickly Get Started

Open the project in your code editor of choice. Under src/app create a directory called _services.

We create a file called butterCMS.service.js. This allows us to have your API Token in one place and not accidentally alter it.

import * as Butter from 'buttercms';

export const butterService = Butter('b60a008584313ed21803780bc9208557b3b49fbb');

You’ll import this file into any component we want to use ButterCMS.

For a Quickstart, go to src/app/hello-you/hello-you.component.ts and import butterService:

import {butterService} from '../_services';

Inside the HelloYouComponent create methods:

fetchPosts() {
  butter.post.list({
    page: 1,
    page_size: 10
  })
  .then((res) => {
    console.log('Content from ButterCMS')
    console.log(res)
  })
}

Now call this method when the component is loaded by adding it to the OnInit lifecycle hook:

ngOnInit() {
  this.fetchPosts();
}

This API request fetches your blog posts. Your account comes with one example post, which you’ll see in the response.

Next, create another method to retrieve the Homepage Headline Content Field:

fetchHeadline() {
  butter.content.retrieve(['homepage_headline'])
    .then((res) => {
      console.log('Headline from ButterCMS')
      console.log(res)
    })
}

Add this method to the OnInit lifecycle hook.

ngOnInit() {
  this.fetchPosts();
  this.fetchHeadline();
}

This API request fetches homepage headline content. You can set up your own custom content fields to manage any kind of content you need.

Add Marketing Pages

Setting up CMS-powered pages is a simple, three-step process:

  1. Define the Page Type
  2. Create a page
  3. Integrate into your application

Define Page

First, create a Page Type to represent your Customer Case Study pages. Next, define the fields you want for your customer case studies. With your Page Type defined, you can now create the first case study page. Specify the name and URL of the page, and then populate the content of the page.

With your page defined, the ButterCMS API will return it in JSON format like this:

Continue reading %How to Build a Serverless, CMS-powered Angular Application%


Source: Sitepoint

Reliable UX & UI Tools for Your Projects in 2018

Content is an integral part of a site’s overall UX. Its constituent components are arranged to help visitors go where they want to go and take the actions they want to take. They are chosen to entice visitors to go where the designer wants them to go as well.

This approach is sometimes successful and sometimes not. It takes special skills to consistently create quality UX. Consequently, the demand for designers with those skills is great and it is growing.

You may feel you have those skills, along with the experience to use them effectively. Then you should have no trouble finding a well-paying job. If you invest in the right tools, you should do even better.

One or more of the top UI/UX tools described in this post will serve you admirably. You’re invited to check them out to see for yourself.

1. Mason

Mason

Prototyping is a popular and widespread digital and web design technique, and rapid prototyping is a favored approach of many. While prototyping brings several benefits to the table, the practice can also contribute to overhead expenses and the use of prototypes do not necessarily guarantee pixel-perfect, developer-ready designs.

How many times have you handed off a design for a login flow, a registration experience or a feed feature, only to have the final product not match your spec? Plus, you had to wait on a deployment cycle to see what it would look like.

Mason has a better way. With this powerful tool, you can create, manipulate, and deploy web and mobile features at a building block level—all without a single line of code. Mason’s simple visual interface enables you to design real software and digital features without having to rely on creating mockups or prototypes to hand off to production. Connect your API endpoints, drop the Mason-generated code into your app codebase, and boom: you’re live.

Build without the overhead costs and time associated with prototyping, QA inspections, providing manual documentation, and in some cases post-deployment modifications and maintenance. Then, edit directly in the Mason builder—new CTA, new copy, new images, and much more—and publish your changes in real-time.

2. Overflow

Overflow

Flowcharting helps designers share design ideas with others and deploy products that work as expected. Few if any designers, however, can use flowcharts effectively to directly support UX design, which is where Overflow enters the picture.

Overflow provides you with the means to create flowcharts and diagrams based on user needs and expectations. These flowcharts are meant to tell a story, and telling a story is key to creating a quality UX. User-oriented flow diagrams can also pack a punch when shared with others for feedback or comment because of the useful and valuable information they can contain.

Overflow is a cross-platform tool that is currently in beta testing. It is being introduced by PROTOIO Inc., the creator of the popular Proto.io web design tool. Overflow is also the world’s first user flow diagramming tool tailored for designers. To inquire about early access, visit overflow.io, or Overflow on Twitter or Facebook.

3. UXPin

UXPin

UXPin assists teams and companies of all sizes in designing, sharing, and testing prototypes with the ultimate objective of delivering development-ready designs. This powerful tool prepares and organizes design components, syncs them with code, and implements the controls necessary to ensure design consistency throughout a product.

With UXPin, manually-produced documentation is not required. Whatever data and information developers need to complete a project is automatically generated and attached each design element. UXPin also features an inspect tool to verify that each product, once deployed, exactly matches each design in all respects.

With UXPin Design Systems, UXPin ensures that the whole design you’ve worked so hard to build will not be subject to undesirable changes or modifications. And your team can put controls in place to ensure UX and visual consistency across the entire product.

4. PowerMockup

PowerMockup

PowerMockup is specifically for PowerPoint users! Although experienced PowerPoint users are generally capable of designing truly amazing and captivating presentations, their ability to create interactive prototypes without having to rely on a different platform is another story.

PowerMockup’s library of shapes and design elements changes all that. It’s simply a matter of transferring elements onto a PowerPoint screen and invoking slider and animation functions to create a highly-effective interactive prototype.

5. Creately

Creately

Creately is a diagramming, flowcharting, wireframing, and collaboration-supportive toolkit. It is designed to visually support UX designers in a way that helps them go about their work more efficiently.

Mind-mapping tools that support brainstorming activities and professionally-designed templates designed to get projects underway are included in the package. Creately addresses one of the more challenging website-building areas, UX design.

6. Fluid UI

Fluid UI

Fluid UI allows you to easily and quickly create desktop, mobile, website and app prototypes thanks to its extensive component libraries.

Distributed design teams will find Fluid UI’s collaboration features particularly helpful, as will individual designers and project managers, as this feature-rich tool enables them to communicate via messaging, interactive video presentations, and live chat.

7. Visual Inspector

Visual Inspector

With Visual Inspector, you can easily investigate and resolve live website UI problems or issues and communicate your findings and results with others in real-time. No coding is required to make needed changes, or to list or download webpage colors, fonts, or other assets – images, banners, etc.

Visual Inspector can be used on any type of website, and it also integrates with WordPress and 23 different communications platforms. Lifetime access to this unique UI tool is currently available for $49.

Conclusion

Although these UI/UX tools take various approaches, all are highly effective at what they can do. If you’re a firm believer in rapid prototyping, there’s something here for you. If a new and different approach to web design might appeal to you, there’s something here as well.

User flow diagrams can make UX design less of a challenge. If you’re a dedicated PowerPoint user, you are lucky. This is because you can stop looking for a separate prototype-building platform.

Continue reading %Reliable UX & UI Tools for Your Projects in 2018%


Source: Sitepoint

Mindfulness at Work: 5 Ways to Improve Your Productivity

This article was originally published on monday.com. Thank you for supporting the partners who make SitePoint possible.

Mindfulness is all the rage these days. Rooted in ancient Buddhist tradition, it’s now respected by the scientific community as an effective way to fight anxiety, treat heart disease, lower blood pressure, reduce chronic pain, and improve sleep.

And perhaps unsurprisingly, mindfulness at work is now a huge trend as well. Research shows that mindfulness at work can improve your focus, attention, and ability to work under stress—all great assets in the workplace these days.

What is mindfulness, exactly? Simply put, it’s focusing your awareness on the present moment. Not thinking about the hectic morning you had, worrying about a presentation you have to give this afternoon, or planning what you’ll cook for dinner tonight. Instead, it’s paying attention to what you’re feeling, thinking, and seeing right now, without judgment. There’s no “right” or “wrong” way to think or feel.

While mindfulness is straightforward, it’s far from easy. We listed five ways for you to practice mindfulness at work. Not only will it reduce your stress and make you happier, it’ll also boost your productivity and help you achieve more every day without working longer hours.

1. Prioritize your tasks and projects for the next day

The day has come to an end and you’re about to go home. Before you do, take a few minutes to see what you’ve managed to accomplish and what is left for tomorrow.

Try to organize your to-dos by these three criteria: priority, focus level required, and how long each task will take. Many people are most productive first thing in the morning, so start your day with the most important and demanding tasks. (See: Eat that Frog.) Then work on medium-priority assignments, and save your least demanding tasks for later in the day. That way, you can accomplish more each day and rest assured you’ll always get the most important things done.

2. Start your day with meditation

Many times you arrive to work, but you aren’t really present. Traffic was terrible, you had an argument with your partner, your kid is sick, your banker has tried to call you three times, and your dog peed on the carpet just as you were walking out of the house. You’re sitting down in front of your computer to start the day, but your thoughts are anywhere but here.

Continue reading %Mindfulness at Work: 5 Ways to Improve Your Productivity%


Source: Sitepoint

Introduction to the Fetch API

In this article, we’ll learn what the new Fetch API looks like, what problems it solves, and the most practical way to retrieve remote data inside your web page using the fetch() function.

For years, XMLHttpRequest has been web developers’ trusted sidekick. Whether directly or under the hood, XMLHttpRequest has enabled Ajax and a whole new type of interactive experience, from Gmail to Facebook.

However, XMLHttpRequest is slowly being superseded by the Fetch API. Both can be used to make network requests, but the Fetch API is Promise-based, which enables a cleaner, more concise syntax and helps keep you out of callback hell.

The Fetch API

The Fetch API provides a fetch() method defined on the window object, which you can use to perform requests. This method returns a Promise that you can use to retrieve the response of the request.

The fetch method only has one mandatory argument, which is the URL of the resource you wish to fetch. A very basic example would look something like the following. This fetches the top five posts from r/javascript on Reddit:

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
.then(res => console.log(res));

If you inspect the response in your browser’s console, you should see a Response object with several properties:

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}

It seems that the request was successful, but where are our top five posts? Let’s find out.

Loading JSON

We can’t block the user interface waiting until the request finishes. That’s why fetch() returns a Promise, an object which represents a future result. In the above example, we’re using the then method to wait for the server’s response and log it to the console.

Now let’s see how we can extract the JSON payload from that response once the request completes:

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
.then(res => res.json())
.then(json => console.log(json));

We start the request by calling fetch(). When the promise is fulfilled, it returns a Response object, which exposes a json method. Within the first then() we can call this json method to return the response body as JSON.

However, the json method also returns a promise, which means we need to chain on another then(), before the JSON response is logged to the console.

And why does json() return a promise? Because HTTP allows you to stream content to the client chunk by chunk, so even if the browser receives a response from the server, the content body might not all be there yet!

Async … await

The .then() syntax is nice, but a more concise way to process promises in 2018 is using async … await — a new syntax introduced by ES2017. Using async Ú await means that we can mark a function as async, then wait for the promise to complete with the await keyword, and access the result as a normal object. Async functions are supported in all modern browsers (not IE or Opera Mini) and Node.js 7.6+.

Here’s what the above example would look like (slightly expanded) using async … await:

async function fetchTopFive(sub) {
  const URL = `https://www.reddit.com/r/${sub}/top/.json?limit=5`;
  const fetchResult = fetch(URL)
  const response = await fetchResult;
  const jsonData = await response.json();
  console.log(jsonData);
}

fetchTopFive('javascript');

Not much has changed. Apart from the fact that we’ve created an async function, to which we’re passing the name of the subreddit, we’re now awaiting the result of calling fetch(), then using await again to retrieve the JSON from the response.

That’s the basic workflow, but things involving remote services doesn’t always go smoothly.

Continue reading %Introduction to the Fetch API%


Source: Sitepoint

10 Lodash Features You Can Replace with ES6

Right now, Lodash is the most depended-on npm package, but if you’re using ES6, you might not actually need it.

In this article, we’re going to look at using native collection methods with arrow functions and other new ES6 features to help us cut corners around many popular use cases.

1. Map, Filter, Reduce

These collection methods make transforming data a breeze and with near universal support. We can pair them with arrow functions to help us write terse alternatives to the implementations offered by Lodash:

_.map([1, 2, 3], function(n) { return n * 3; });
// [3, 6, 9]
_.reduce([1, 2, 3], function(total, n) { return total + n; }, 0);
// 6
_.filter([1, 2, 3], function(n) { return n <= 2; });
// [1, 2]

// becomes

[1, 2, 3].map(n => n * 3);
[1, 2, 3].reduce((total, n) => total + n);
[1, 2, 3].filter(n => n <= 2);

It doesn’t stop here, either. If we’re using a modern browser, we can also use find, some, every and reduceRight too.

2. Head & Tail

Destructuring syntax allows us to get the head and tail of a list without utility functions:

_.head([1, 2, 3]);
// 1
_.tail([1, 2, 3]);
// [2, 3]

// becomes

const [head, ...tail] = [1, 2, 3];

It’s also possible to get the initial elements and the last element in a similar way:

_.initial([1, 2, 3]);
// -> [1, 2]
_.last([1, 2, 3]);
// 3

// becomes

const [last, ...initial] = [1, 2, 3].reverse();

If you find it annoying that reverse mutates the data structure, then you can use the spread operator to clone the array before calling reverse:

const xs = [1, 2, 3];
const [last, ...initial] = [...xs].reverse();

3. Rest and Spread

The rest and spread functions allow us to define and invoke functions that accept a variable number of arguments. ES6 introduced dedicated syntaxes for both of these operations:

var say = _.rest(function(what, names) {
  var last = _.last(names);
  var initial = _.initial(names);
  var finalSeparator = (_.size(names) > 1 ? ', & ' : '');
  return what + ' ' + initial.join(', ') +
    finalSeparator + _.last(names);
});

say('hello', 'fred', 'barney', 'pebbles');
// "hello fred, barney, & pebbles"

// becomes

const say = (what, ...names) => {
  const [last, ...initial] = names.reverse();
  const finalSeparator = (names.length > 1 ? ', &' : '');
  return `${what} ${initial.join(', ')} ${finalSeparator} ${last}`;
};

say('hello', 'fred', 'barney', 'pebbles');
// "hello fred, barney, & pebbles"

4. Curry

Without a higher-level language such as [TypeScript][5] or [Flow][6], we can’t give our functions type signatures, which makes currying quite difficult. When we receive curried functions, it’s hard to know how many arguments have already been supplied, and which we’ll need to provide next. With arrow functions, we can define curried functions explicitly, making them easier to understand for other programmers:

function add(a, b) {
  return a + b;
}
var curriedAdd = _.curry(add);
var add2 = curriedAdd(2);
add2(1);
// 3

// becomes

const add = a => b => a + b;
const add2 = add(2);
add2(1);
// 3

These explicitly curried arrow functions are particularly important for debugging:

var lodashAdd = _.curry(function(a, b) {
  return a + b;
});
var add3 = lodashAdd(3);
console.log(add3.length)
// 0
console.log(add3);
// function (a, b) {
// /* [wrapped with _.curry & _.partial] */
//   return a + b;
// }

// becomes

const es6Add = a => b => a + b;
const add3 = es6Add(3);
console.log(add3.length);
// 1
console.log(add3);
// function b => a + b

If we’re using a functional library like lodash/fp or ramda, we can also use arrows to remove the need for the auto-curry style:

_.map(_.prop('name'))(people);

// becomes

people.map(person => person.name);

Continue reading %10 Lodash Features You Can Replace with ES6%


Source: Sitepoint

Advanced CSS Layouts With Flexbox and CSS Grid

Full-day workshop &bullet; April 19th
This workshop is designed for designers and developers who already have a good working knowledge of HTML and CSS. We will cover a range of CSS methods for achieving layout, from those you are safe to use right now even if you need to support older version of Internet Explorer through to things that while still classed as experimental, are likely to ship in browsers in the coming months.
Source: Smashing Magazine