How to Build a File Upload Form with Express and Dropzone.js

Let’s face it, nobody likes forms. Developers don’t like building them, designers don’t particularly enjoy styling them and users certainly don’t like filling them in.
Of all the components that can make up a form, the file control could just be the most frustrating of the lot. A real pain to style, clunky and awkward to use and uploading a file will slow down the submission process of any form.
That’s why a plugin to enhance them is always worth a look, and DropzoneJS is just one such option. It will make your file upload controls look better, make them more user-friendly and by using AJAX to upload the file in the background, at the very least make the process seem quicker. It also makes it easier to validate files before they even reach your server, providing near-instananeous feedback to the user.
We’re going to take a look at DropzoneJS in some detail; show how to implement it and look at some of the ways in which it can be tweaked and customized. We’ll also implement a simple server-side upload mechanism using Node.js.
As ever, you can find the code for this tutorial on our GitHub repository.
Introducing DropzoneJS
As the name implies, DropzoneJS allows users to upload files using drag n’ drop. Whilst the usability benefits could justifiably be debated, it’s an increasingly common approach and one which is in tune with the way a lot of people work with files on their desktop. It’s also pretty well supported across major browsers.
DropzoneJS isn’t simply a drag n’drop based widget, however; clicking the widget launches the more conventional file chooser dialog approach.
Here’s an animation of the widget in action:

Alternatively, take a look at this, most minimal of examples.
You can use DropzoneJS for any type of file, though the nice little thumbnail effect makes it ideally suited to uploading images in particular.
Features
To summarize some of the plugin’s features and characteristics:

Can be used with or without jQuery
Drag and drop support
Generates thumbnail images
Supports multiple uploads, optionally in parallel
Includes a progress bar
Fully themeable
Extensible file validation support
Available as an AMD module or RequireJS module
It comes in at around 33Kb when minified

Browser Support
Taken from the official documentation, browser support is as follows:

Chrome 7+
Firefox 4+
IE 10+
Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
Safari 6+

There are a couple of ways to handle fallbacks for when the plugin isn’t fully supported, which we’ll look at later.
Installation
The simplest way to install DropzoneJS is via Bower:
bower install dropzone

Alternatively you can grab it from Github, or simply download the standalone JavaScript file — though bear in mind you’ll also need the basic styles, also available in the Github repo.
There are also third-party packages providing support for ReactJS and implementing the widget as an Angular directive.
First Steps
If you’ve used the Bower or download method, make sure you include both the main JS file and the styles (or include them into your application’s stylesheet), e.g:

Link: https://www.sitepoint.com/file-upload-form-express-dropzone-js/

Essential Skills for Landing a Test Automation Job in 2018

Every year brings new requirements in the test automation market. Test automation engineers must master their skills in order to stay ahead and land the job of their dreams. Following our last research: World’s Most Desirable Test Automation Skills, TestProject examined top job searching websites around the world to determine the most demanded test automation skills and technologies for 2018.
Continue reading %Essential Skills for Landing a Test Automation Job in 2018%

Link: https://www.sitepoint.com/essential-skills-for-landing-a-test-automation-job-in-2018/

7 Open-Source Test Automation Frameworks

This article was originally published by TestProject. Thank you for supporting the partners who make SitePoint possible.
As we enter the last quarter of 2017, TestProject’s team decided to round up the best open-source test automation frameworks out there, to help you choose the right one for you!
Here are the pros and cons of 7 different open-source test automation frameworks.
1. Robot Framework
Robot Framework (RF) is a test automation framework for acceptance testing and acceptance test-driven development (ATDD). This framework is written in Python, but can also run on Jython (Java) and IronPython (.NET), and therefore is cross-platform (Windows, Linux, or MacOS).
Pros:

It simplifies the test automation process by utilizing the keyword-driven testing (KDT) approach, which helps testers create readable tests that are easily made.
Has easy to use test data syntax.
Has a rich ecosystem around it consisting of various generic test libraries and tools that are developed as separate projects.
Has many APIs that make it highly extensible.
Although it’s not a built-in ability, RF enables to execute parallel tests via pabot library or Selenium Grid.

Cons:

It’s not easy to customize HTML reports.

Bottom line: This cross-platform framework is highly recommended if you are targeting for KDT automation with a wide range of libraries and extensions. If you want to add new keywords (via RF test library APIs), a basic knowledge in Java/Python/C programming language is required.
2. JUnit
JUnit is a framework for unit testing of Java applications, used to write and run repeatable tests.
Pros:

Tests are written in pure Java which is known as the leading programming language worldwide.
Supports test-driven development (TDD).
Enables you to create your own unit test case suite.
Integrates very well with other tools (for example, Maven) and with IDEs (for example, IntelliJ).
Has history – so it has a large user base that makes it easy to find documentation on it.

Cons:

If a mocking ability is required, one needs to add Mockito (or some other mocking library).
Tests are not readable by non-technical people, since for example the methods names in JUnit are constrained by Java conventions.

Bottom line: If you’re looking to write unit testing for your Java application, it’s probably the best choice. However, for functional testing or non-Java applications, you should consider other solutions.
3. Spock
Spock is a testing and specification framework for Java and Groovy applications. It is based on JUnit.
Pros:

Creates readable tests and supports plain English sentences, making it easy to read.
Provides the surrounding context, so it easily enables you to understand how to fix a failure.
Has built-in mocking and stubbing capabilities.
Supports data-driven-tests (DDT).

Cons:

Requires a basic knowledge of the Groovy programming language.

Bottom line: If your application is based on JVM and you are targeting for BDD test automation with DSL, this framework is just for you!
4. NUnit
NUnit is a unit testing framework for all .Net languages. Originally inspired by Junit, it is written entirely in C#, and has been completely redesigned to take advantage of many .NET language features.
Pros:

Quick initiation and test execution.
Comes with assertions and annotations.
Enables parallel testing.
Supports test-driven development (TDD).

Cons:

It is not cross-platform as it is used only for .Net languages.
It doesn’t integrate into the Visual Studio ecosystem, so using it means more maintenance.

Bottom line: A nice open-source framework for C# unit testing, with a long history and good reputation. However, in case you’re already using .NET languages, you may consider MSTest.
5. TestNG
TestNG is a test automation framework for Java that is inspired by JUnit and NUnit, but includes improved and new functionalities (NG – Next Generation). It is designed to cover all the test automation categories: unit testing, functional test, end-to-end, integration testing, etc.
Continue reading %7 Open-Source Test Automation Frameworks%

Link: https://www.sitepoint.com/7-open-source-test-automation-frameworks/

Visualize Large Date and Time-Based Datasets with AnyStock

I introduced the basics of the AnyChart product family in my previous article on SitePoint. This time I will tell you about how AnyStock is helpful in visualizing stock data as well as any large date and time-based data sets (and how to use it best).
AnyStock is part of the AnyChart JavaScript charting library that is marketed as a set of products:

AnyChart – common chart types,
AnyMap – geo maps and seat maps,
AnyGantt – Project Gantt, Resource, and PERT charts,
AnyStock – visualization of big date/time-based data sets, the features of which are the topic of this article.

Because AnyChart is essentially one big JavaScript charting library, the API is common and all charts are configured in pretty much the same way, sharing themes, settings, and ways to load data. That said, most of the things and approaches you’ll learn about in this article can be easily applied to making other charts and maps.
AnyStock stock charts are a special type of charts that can effectively visualize big amounts of date/time-based data. It has many special features such as zoom with Scroller UI, synchronized plots, data grouping, and so on. AnyStock is completely compatible with all other AnyChart charts, and besides having all basic stock features such as grouping, streaming, scrolling, etc., AnyStock stocks also have multiple technical indicators built-in and ability to customize them.
To put it in a nutshell, in this article I will:

explain the basics of how AnyStock works;
demonstrate the beauty of data mapping;
show how to load data directly from Google Finance into AnyStock;
provide a sample of how the data mapping mechanism helps to use data from Xignite API in AnyStock.

AnyStock Quick Start
To start using AnyStock in your HTML page you need three simple things. The first one is a link to the library’s JavaScript file. The second one is a block-level HTML element; here’s a sample HTML template you may use:

Link: https://www.sitepoint.com/visualize-large-date-and-time-based-datasets-with-anystock/

Fancy Web Animations Made Easy with GreenSock Plugins

The aim of the third part of this GreenSock tutorial series is to introduce you to some amazing GreenSock plugins.
You’ll be using:

The BezierPlugin to animate properties along a curved Bezier path
The GSAP Draggable utility to drag elements on the screen and the ThrowPropsPlugin to glide them to a smooth stop
The DrawSVGPlugin to draw SVG strokes dynamically
The MorphSVGPlugin to morph any SVG path into any other path, even if the two paths don’t have the same number of points
And the SplitText utility to create fun animation text effects.

By the end of this tutorial, you’ll be able to create complex types of web animations in a fraction of the time that it would normally take without using GreenSock’s plugins.
For an introduction to the basics of GreenSock, including how to work with TweenMax for sequencing and staggering simple animations, head over to part 1 of this multi-part article.
If you’re looking for a refresher on GreenSock’s powerful timeline (TimelineLite and TimelineMax), check out Part 2.
The GreenSock articles are part of the series Beyond CSS: Dynamic DOM Animation Libraries. Here’s what I covered in the past instalments:

Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library
Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library
Make Your Website Interactive and Fun with Velocity.js (No jQuery) shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations.
GreenSock for Beginners: a Web Animation Tutorial (Part 1) is an overview of GreenSock, also known as GSAP (GreenSock Animation Platform), where I discuss the library’s modules and licensing model. I also show you how to code a simple tween, sequences of tweens, and staggering animations using GSAP TweenMax
GreenSock for Beginners (Part 2): GSAP’s Timeline delves into GSAP’s timeline functionality teaching you how to organize your animations inside a timeline or multiple nested timelines.

Animation Along a Path with GreenSock’s BezierPlugin
Motion along a path consists in objects following a predefined path like a curved path or a zigzag path, etc. In the right context, it can be crucial for realistic animation.
This kind of animation is possible using SMIL (Synchronized Multimedia Integration Language), which is being deprecated.
The future of motion along a path seems to be CSS, but although the feature is supported in a few browsers (mostly Chrome and Opera), adopting it in production websites could be a risky move.
For consistent browser support and ease of implementation, GSAP’s BezierPlugin is a fantastic option.
This is a free plugin included with TweenMax. Let’s try it out!
Continue reading %Fancy Web Animations Made Easy with GreenSock Plugins%

Link: https://www.sitepoint.com/fancy-web-animations-made-easy-greensock-plugins/

Your Site without JavaScript

This post was originally published on calibreapp.com and reposted here with the author’s permission. If you’re interested in taking Calibre for a spin, you can start a free 14-day trial today.
There are plenty of reasons why the presence of JavaScript (what it does, how it works, and how heavy it is) needs to be considered a little more thoughtfully.
Web traffic today is made up of more than 50% mobile devices, of these devices, many operate under extremely volatile network connections—loading scripts alone in less than 10 seconds is nigh on impossible in many situations.
If you’re working on a single page app, with no reasonable content-only fallbacks, this can be far more damaging than you may think—users will be watching a white screen, with partial content, for a long time.

According to Google’s DoubleClick, when comparing sites that load in 5 seconds to sites that load in 19 seconds, the faster sites had 70% longer average session lengths, 35% lower bounce rates and 25% higher ad viewability than their slower counterparts.

Performance is important, there’s no doubting that, but what common negative impacts does JavaScript have on our sites? How are we currently evaluating performance?
Let’s Have a Brief (but Constructive) Look at the Cost of JavaScript
When commonly auditing the performance impacts of JavaScript, we look at:

The number of render-blocking scripts present on the page
How long scripts take to download, and the amount of data transferred

But what we’re often missing is what happens thereafter…
Once the device has downloaded the scripts, they must be parsed, converted to bytecode, compiled and then executed.
Parse and compile time are two reasons why the same site that works great on your $3000 MacBook, feels kind of janky on a 2-year-old smartphone.

The above graphic compares Chrome parse/compile times on a regular desktop browser, verses a low power mobile device. This graphic is taken from Addy Osmani’s excellent article titled “JavaScript Start-up Performance".
Ouch.

Let’s say, as an experiment, that we removed all scripts to establish a performance baseline, to answer the question "Just how fast could this be?".
Calibre exists to make it trivial for teams to have better visibility to more areas of performance and user-experience, so in the spirit of that, you can now run a direct comparison of your site with, or without JS—as a Test profile.

💥Now you’re testing with and without JavaScript
I enabled the ability to disable scripts, and run a few test runs against popular global news sites, both with, and without JavaScript.
Continue reading %Your Site without JavaScript%

Link: https://www.sitepoint.com/calibre-your-site-without-javascript/

Building a Multiplayer TicTacToe Game with Meteor

Meteor is a popular, full stack web framework that makes it very easy to prototype your ideas and get from development to production really fast. Its reactive nature and the use of DDP, make it a great candidate for building simple, multiplayer, browser games.
In this tutorial, I’ll show you how to build a multiplayer TicTacToe with Meteor, using its default front-end templating engine, Blaze. I will assume that you have played around with Meteor a bit, and of course, that you feel comfortable coding with JavaScript.

If you have zero experience with Meteor I’d recommend you first follow the TODO app tutorial on the official Meteor site.

You can find the code for the completed app in the accompanying GitHub repo.
Creating the app
If you don’t have Meteor installed you should follow the instructions on their site according to your OS.
Generate the Scaffolding
Now with Meteor installed, open your terminal and run the following command:
meteor create TicTacToe-Tutorial

This will create a folder with the name of your app (in this case TicTacToe-Tutorial). This new folder contains the basic file structure for an app. There’s actually a sample app inside.
Navigate to the folder:
cd TicTacToe-Tutorial

And now run the app:
meteor

I know, I know… that’s a terribly hard-to-remember command, and you’ll be using it a lot, so you should start memorizing it!
If everything went fine now the console should be building the app. After it’s done, open your web browser and go to http://localhost:3000 to see the app running. If you have never done so before, I’d recommend you play around with the sample app. Try to figure out how it works.
Let’s take a look at the file structure. Open your app’s folder. The only things there that we care about (for now) are the client folder and the server folder. The files inside the client folder will be downloaded and executed by the client. The files in the server folder will only be executed on the server and the client has no access to them.
These are the contents in your new folder:
client/main.js # a JavaScript entry point loaded on the client (we won’t be needing this)
client/main.html # an HTML file that defines view templates
client/main.css # a CSS file to define your app’s styles
server/main.js # a JavaScript entry point loaded on the server
package.json # a control file for installing NPM packages
.meteor # internal Meteor files
.gitignore # a control file for git

Building the board
A TicTacToe board is a simple three by three table; nothing too fancy, which is great for our first multiplayer game, so we can focus on the functionality.
The board will be downloaded by the client, so we’ll be editing files inside the client folder. let’s begin by deleting the contents on main.html and replacing it with the following:
client/main.html

<title>tic-tac-toe</title>
</head>

<body>
<table id=”board">
<tr>
<td class="field"></td>
<td class="field"></td>
<td class="field"></td>
</tr>
<tr>
<td class="field"></td>
<td class="field"></td>
<td class="field"></td>
</tr>
<tr>
<td class="field"></td>
<td class="field"></td>
<td class="field"></td>
</tr>
</table>
</body>

Don’t forget to save your files after making changes! Otherwise, they won’t be acknowledged by Meteor.
Now let’s add some css to our board. Open the main.css file and add the following content:
client/main.css
table
{
margin: auto;
font-family: arial;
}

.field
{
height: 200px;
width: 200px;
background-color: lightgrey;
overflow: hidden;
}

#ui
{
text-align: center;
}

#play-btn
{
width: 100px;
height: 50px;
font-size: 25px;
}

.mark
{
text-align: center;
font-size: 150px;
overflow: hidden;
padding: 0px;
margin: 0px;
}

.selectableField
{
text-align: center;
height: 200px;
width: 200px;
padding: 0px;
margin: 0px;
}

We’ve also added a few extra ids and classes that we’ll be using later on in this tutorial.
Finally, delete client/main.js, as we won’t be needing it, and open the app in the browser to see how it looks.
This is fine and all, but is not an optimal solution. Let’s do some refactoring by introducing Blaze Templates.
Creating a Template
Templates are pieces of HTML code with their own functionality that you can reuse anywhere in your app. This is a great way to break up your apps into reusable components.
Before creating our first template, we’ll add two more folders inside the client folder. We’ll call one html and the other one js.
Inside the html folder, create a new board.html file with the following content:
client/html/board.html
<template name="board">
<table id="board">
<tr>
<td class="field"></td>
<td class="field"></td>
<td class="field"></td>
</tr>
<tr>
<td class="field"></td>
<td class="field"></td>
<td class="field"></td>
</tr>
<tr>
<td class="field"></td>
<td class="field"></td>
<td class="field"></td>
</tr>
</table>
</template>

Now, on the main.html folder replace the content inside the body tag with the following code:
client/main.html
<head>
<title>tic-tac-toe</title>
</head>

<body>

</body>

This will insert our template with the property name="board", inside the body tag.
But this is the same hard coded board that we had before. Only now, it’s inside a template, so let’s take advantage of the template helpers to build our board dynamically.
Using helpers
We’ll declare a helper in the board template that will provide us with an array with the same length as the dimensions we want our board to have.
inside the js folder create a file called board.js with the following content:
client/js/board.js
import { Meteor } from ‘meteor/meteor’;
import { Template } from ‘meteor/templating’;

Template.board.helpers({
sideLength: () => {
let side = new Array(3);
side.fill(0);

return side;
}
});

Now, we’ll use this helper in the board’s template HTML to repeat one single row for each element in the array provided by the helper. To help us with this, we’ll use the Each-in Spacebars block helper.
Replace the content inside the board.html file with the following:
client/html/board.html
<template name="board">
<table id="board">

<tr>

<td class="field" id="">

</td>

</tr>

</table>
</template>

Notice that we’re looping through the array twice, once for the rows and once for the columns, instantiating the corresponding tag (tr or td) as we go. We’re also setting their id properties as the @index of the row + @index of the column. What we get is a two digits number that will help us identify that element, with its position on the board.
Check out the app at http://localhost:3000 to see how it’s looking so far.
UI
Now that we have a good looking board, we’ll need a play button and a tag to show information on the current game.
Let’s begin by creating the ui.html file inside the html folder… you know the drill. Now, add the following content to it:
client/html/ui.html
<template name ="ui">
<div id="ui">

<p id="status">

</p>

<button id="play-btn">Play</button>

</div>
</template>

As you can see we’re using the #if Spacebars block helper and the inGame helper (that we haven’t yet defined) as a condition. There’s the status helper inside the p tag too. We’ll define that later also.
How does it work? #if the inGame helper returns true, the player will see whatever’s in the status helper. Otherwise, we’ll simply show the play button.
Don’t forget, for this component to be displayed we need to add it to our main client template:
client/main.html
<head>
<title>tic-tac-toe</title>
</head>

<body>

</body>

Logging in
We won’t be dealing with any login UI. We will install a very useful package called brettle:accounts-anonymous-auto that will automatically log in all users anonymously into our app.
Head over to your console and run the following command:
meteor add brettle:accounts-anonymous-auto

Now, when you open the app for the first time after adding this package, it’ll create a new user, and every time you open the app on the same browser it’ll remember you. If we’re not keeping any data from said user, it might be better to just remove them when they log out. But we’re not going over that in this tutorial.
Building the Game
Finally, we’re going to start building the game itself! Let’s go over the functionality we’ll be implementing, to have a clear view of what’s coming next.
We’ll need functionality for:
Continue reading %Building a Multiplayer TicTacToe Game with Meteor%

Link: https://www.sitepoint.com/building-multiplayer-tictactoe-game-with-meteor/

How to Create a QR Code Reader for Your Mobile Website

The barcode and QR code have modernized our shopping and searching experience. Customers carrying smartphones can now pick up a product anywhere in the world, scan its barcode or its QR code using one of the many free phone apps and find out its lowest price as well as where it can be bought.

Companies like Walmart and Amazon have embraced this technique to draw customers to their online and offline stores using their phone app. Other companies like Fedex and UPS allow customers to scan the codes on packages using a phone app, instead of needing to manually type in long lists of characters.
If the users of your mobile website have a need to type in long codes like activation codes or they like to look up specific products on your website based on a model number printed in a magazine or advertisement, then you too can take advantage of QR codes to eliminate the frustration of tiny keyboards and spare them the need to double check for errors.
QR Code Scanning with your Mobile Website
You don’t need a native phone app to scan QR codes —it’s quite simple to create your own QR code reader. Your website running on a smartphone equipped with a camera and running a little JavaScript can do the same trick.
Here is a demo of a text field with an in-built QR button. In addition to being able to type text into the field, users can also click a button to activate the camera.

Browser Requirements:
Your users need to be on an iPhone running iOS 6 or higher or an Android phone running Android 3.0 or higher. Other devices have not been tested.

See the Pen Bare QR reader demo by SitePoint (@SitePoint) on CodePen.

If you are on a supported device, go ahead and click it. Depending on your phone, it will either launch the camera immediately or ask you whether to open the camera or browse your photo library. On unsupported devices, the browser will open up a regular file explorer window.
If you don’t have a QR code handy to scan, here is one that shows the first 8 digits of Pi.

Creating the QR Code Reader
The magic starts with the file upload element. We spruce it up with an accept attribute which tells the browser that we only want images and we give it a capture attribute which means we want the input to be captured now, as opposed to uploading an old picture from the phone’s memory.

Link: https://www.sitepoint.com/create-qr-code-reader-mobile-website/

Quick Tip: Getting Started with Headless Chrome in Node.js

Oftentimes in our line of work we need to be able to replicate a user journey repeatedly to make sure that our pages are offering a consistent experience as we make changes to our site. Critical to being able to accomplish this consistently and conveniently are libraries that allow us to script these types of tests, so that we can run assertions against them and maintain documentation around the results. Enter headless browsers: command line tools that provide you with the ability to script a user’s interactions across your site programmatically and capture the results to use in tests.
Many of us have been using PhantomJS, CasperJS, and other tools for years to do just this. But, as often is with love, our hearts can be bequeathed to another. As of Chrome 59 (60 for Windows users), Chrome ships with its own headless browser. And, although it doesn’t currently offer support for Selenium, it uses Chromium and the Blink engine, i.e. it is simulating an actual user experience in Chrome.
As ever, the code for this article can be found on our GitHub repo.
Run Headless Chrome From the Command Line
Running Headless Chrome from the command line is relatively easy. On a Mac, you can set an alias for Chrome and run using the —headless command line parameter
alias chrome=”/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome”
chrome –headless –disable-gpu –remote-debugging-port=9090 https://www.sitepoint.com/

On Linux, it’s even easier:
google-chrome –headless –disable-gpu –remote-debugging-port=9090 https://www.sitepoint.com/

–headless: Runs without a UI or display server dependencies
–disable-gpu: Disables GPU hardware acceleration. This is temporarily needed for now.
–remote-debugging-port: Enables remote debug over HTTP on the specified port.

You can also interact with the page you are requesting, for example to print document.body.innerHTML to stdout you can do:
google-chrome –headless –disable-gpu –dump-dom http://endless.horse/

If you’re curious what else is possible, a full list of parameters can be found here.
Running Headless Chrome in Node.js
The focus of this article however, is not the command line, rather running Headless Chrome in Node.js. To do this, we’re going to need the following modules:

chrome-remote-interface: JavaScript API provides a simple abstraction of commands and notifications.
chrome-launcher: this allows us to launch Chrome from within Node across multiple platforms.

Continue reading %Quick Tip: Getting Started with Headless Chrome in Node.js%

Link: https://www.sitepoint.com/headless-chrome-node-js/

Nuxt.js: A Universal Vue.js Application Framework

Universal (or Isomorphic) JavaScript is a term that has become very common in the JavaScript community. It is used to describe JavaScript code that can execute both on the client and the server.
Many modern JavaScript frameworks, like Vue.js, are aimed at building Single Page Applications (SPAs). This is done to improve the user experience and make the app seem faster since users can see updates to pages instantaneously. While this has a lot of advantages, it also has a couple of disadvantages, such as long “time to content" when initially loading the app as the browser retrieves the JavaScript bundle, and some search engine web crawlers or social network robots will not see the entire loaded app when they crawl your web pages.
Server-side Rendering of JavaScript is about preloading JavaScript applications on a web server and sending rendered HTML as the response to a browser request for a page.
Building Server-side rendered JavaScript apps can be a bit tedious, as a lot of configuration needs to be done before you even start coding. This is the problem Nuxt.js aims to solve for Vue.js applications.
What is Nuxt.js
Simply put, Nuxt.js is a framework that helps you build Server Rendered Vue.js applications easily. It abstracts most of the complex configuration involved in managing things like asynchronous data, middleware, and routing. It is similar to Angular Universal for Angular, and Next.js for React.
According to the Nuxt.js docs "its main scope is UI rendering while abstracting away the client/server distribution."
Static Generation
Another great feature of Nuxt.js is its ability to generate static websites with the generate command. It is pretty cool and provides features similar to popular static generation tools like Jekyll.
Under the Hood of Nuxt.js
In addition to Vue.js 2.0, Nuxt.js includes the following: Vue-Router, Vue-Meta and Vuex (only included when using the store option). This is great, as it takes away the burden of manually including and configuring different libraries needed for developing a Server Rendered Vue.js application. Nuxt.js does all this out of the box, while still maintaining a total size of 28kb min+gzip (31kb with vuex).
Nuxt.js also uses Webpack with vue-loader and babel-loader to bundle, code-split and minify code.
How it works
This is what happens when a user visits a Nuxt.js app or navigates to one of its pages via :

When the user initially visits the app, if the nuxtServerInit action is defined in the store, Nuxt.js will call it and update the store.
Next, it executes any existing middleware for the page being visited. Nuxt checks the nuxt.config.js file first for global middleware, then checks the matching layout file (for the requested page), and finally checks the page and its children for middleware — middleware are prioritized in that order.
If the route being visited is a dynamic route, and a validate() method exists for it, the route is validated.
Then, Nuxt.js calls the asyncData() and fetch() methods to load data before rendering the page. The asyncData() method is used for fetching data and rendering it on the server-side, while the fetch() method is used to fill the store before rendering the page.
At the final step, the page (containing all the proper data) is rendered.

These actions are portrayed properly in this schema, gotten from the Nuxt docs:

Creating A Serverless Static Site With Nuxt.js
Let’s get our hands dirty with some code and create a simple static generated blog with Nuxt.js. We will assume our posts are fetched from an API and will mock the response with a static JSON file.
To follow along properly, a working knowledge of Vue.js is needed. You can check out Jack Franklin’s great getting started guide for Vue.js 2.0 if you’re a newbie to the framework. I will also be using ES6 Syntax, and you can get a refresher on that here: https://www.sitepoint.com/tag/es6/.
Our final app will look like this:

The entire code for this article can be seen here on GitHub, and you can check out the demo here.
Application Setup and Configuration
The easiest way to get started with Nuxt.js is to use the template created by the Nuxt team. We can install it to our project (ssr-blog) quickly with vue-cli:
vue init nuxt/starter ssr-blog

Note: If you don’t have vue-cli installed, you have to run npm install -g vue-cli first, to install it.

Next, we install the project’s dependencies:
cd ssr-blog
npm install

Now we can launch the app:
npm run dev

If all goes well, you should be able to visit http://localhost:3000 to see the Nuxt.js template starter page. You can even view the page’s source, to see that all content generated on the page was rendered on the server and sent as HTML to the browser.
Next, we can do some simple configuration in the nuxt.config.js file. We will add a few options:
// ./nuxt.config.js

module.exports = {
/*
* Headers of the page
*/
head: {
titleTemplate: ‘%s | Awesome JS SSR Blog’,
// …
link: [
// …
{
rel: ‘stylesheet’,
href: ‘https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css’
}
]
},
// …
}

In the above config file, we simply specify the title template to be used for the application via the titleTemplate option. Setting the title option in the individual pages or layouts will inject the title value into the %s placeholder in titleTemplate before being rendered.
We also pulled in my current CSS framework of choice, Bulma, to take advantage of some preset styling. This was done via the link option.

Note: Nuxt.js uses vue-meta to update the headers and HTML attributes of our apps. So you can take a look at it for a better understanding of how the headers are being set.

Now we can take the next couple of step by adding our blog’s pages and functionalities.
Working with Page Layouts
First, we will define a custom base layout for all our pages. We can extend the main Nuxt.js layout by updating the layouts/default.vue file:
Continue reading %Nuxt.js: A Universal Vue.js Application Framework%

Link: https://www.sitepoint.com/nuxt-js-universal-vue-js/