The following takes place with an API called WRLD…

This article was sponsored by WRLD 3D. Thank you for supporting the partners who make SitePoint possible.

The following takes place between 7:00am and 8:00am, on Christmas Eve. Events occur in real time.

For all our data-gathering capabilities, we’re still hopeless when it comes to visualising that data in the 3D world we live in. We stare at 2D charts and log entries, but much of the data we pluck out of the world has meaning in a 3D context. And, it can be useful to visualise this data when it is applied back into a 3D model.

This is the problem Augmented Reality seeks to solve. In contrast to the fictional environments of Virtual Reality, Augmented Reality can help us solve many real problems; by applying the data we would otherwise consume through a 2D medium to the real world around us. Mapping is the first-born amongst Augmented Reality’s children.

When WRLD approached us, to write about their platform, I was immediately taken by their platform’s graphics and performance. Yet, the more I use their platform; the more I am fascinated by the usefulness of their API and fidelity of their mapping data.

We’re going to publish a series of tutorials, which demonstrate how to use this platform to bring information into the world it applies to. Each tutorial is themed according to a popular T.V. show. As you may have guessed, this first one is about 24.

In this tutorial, we’re going to learn how to get started with the WRLD platform. We’ll follow the documentation examples to render the simplest map. Then, we’ll create a local environment for compiling our code; and start to tell a story with it.

We’ll cover these topics:

  • Rendering maps based on the name of a place
  • Moving through a map, for a sequence of events
  • Highlighting buildings and designing events at each building
  • Playing sound files with the HTML5 Audio API
  • Changing weather conditions and time of day for the map

The code for this tutorial can be found on Github. It has been tested with a modern versions or Firefox, Node, and macOS.

Getting Started

The easiest way to get started is to follow the first example, in the documentation. Before we can do that, we need an account. Head over to https://www.wrld3d.com and click “Sign Up”.

WRLD home page

Once you’re logged in, click “developers” and “Access API Keys”.

WRLD access API Keys screen

Create a new API key for your application. You can call it anything, but you’ll need to copy the generated key later…

WRLD Key

We can get the code, for the first example, from the official documentation site. I’ve put it in CodePen, and replaced the coordinates with those for New York:

See the Pen Getting started with WRLD by Christopher Pitt (@assertchris) on CodePen.

WRLD.js is based on Leaflet.js, which makes it familiar to anyone who has done a bit of map-based work before. It also means the maps are mobile-friendly and interactive.

Click and drag, with the left mouse button, to pan around the map. Click and drag, with the right mouse button, to rotate the map. Click and drag, with the middle mouse button to change the perspective angle. Scrolling the mouse wheel will affect the zoom. The map can also be controlled on touch devices.

Apart from including the Javascript SDK and stylesheet; we only needed about 5 lines of formatted code to render a sweet map of New York! The first parameter, map, is the ID of the element into which WRLD should render the map. The second is the API key we generated. The third is a configuration object. This object contains the coordinates for the centre of the map, and an optional zoom level.

Setting up a Build Chain

CodePen is great for a quick demo; but we need something more robust and presentable. Let’s set up something simple, that will compile all our modern Javascript into a version most browsers can understand.

ParcelJS was recently announced; as a fast, zero-configuration web bundler. Let’s put that to the test. Firstly, we need to install Parcel as a global application, through NPM:

npm install -g parcel-bundler

Next, we can create a handful of files for our project. We’ll need a Javascript file, a CSS file, and an HTML entry-point file:

const Wrld = require("wrld.js")

const map = Wrld.map("map", "[your API key here]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})

This is from tutorial/app.js

@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css";

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #000000;
}

This is from tutorial/app.css

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="./app.css" />
        <title>Getting started with WRLD</title>
    </head>
    <body>
        <div id="map"></div>
        <script src="./app.js"></script>
    </body>
</html>

Continue reading %The following takes place with an API called WRLD…%


Source: Sitepoint

7 Analytics Tools for Optimizing UX

Analytics are important for finding out what’s working and what’s not working on your website. In short, they allow you to see user feedback at scale — via users’ actual clicks and movements. This is essential for improving your website’s UX, and in turn, conversions.

However, when it comes to improving user experiences, there’s no specific tool you should be using. It’s like saying “What utensil is best for baking?” In the case of UX (and baking), there’s no single answer, and there are many tools that you can choose from to help you analyze UX.

Often enough, it requires a combination of tools.

In this article, I’ll round up the best analytics tools to help you analyze and optimize your user experiences. I’ll also reference a few tutorials that you might find useful along the way, to help you get started with these tools.

Website Usage Analytics

Let’s start with web analytics. These tools are most effective at measuring key metrics like conversion rates, bounce rates, user demographics, user behavior, most visited web pages and more. We typically use these tools for user research and to identify areas with poor UX, but we can also use them as a diving board for usability testing and A/B testing later on.

1. Google Analytics

Analytics home page

Google Analytics is the Old Faithful when it comes to monitoring and evaluating how users are behaving on your site. You can see, slice and filter hundreds of data points, from bounce rate to exit rate, to average conversion rate to conversion value. It also integrates with your funnel, helping you identify the loops, drop-offs and critical UX flaws.

It’s also useful for user research, helping you to identify the who and why, as well as the where. It’s a fantastic way to start out with analytics, especially when its offering is rather generous for a free tool.

2. Adobe Analytics

Adobe Analytics

Although nothing compares to Google Analytics in terms of number of users, Adobe Analytics is nonetheless a compelling choice amongst website and app analysis tools. It allows you to dig deep into the massive amounts of generated data, featuring things like customer segmentation, real-time analysis rules, marketing analytics, and a host of dashboards. Adobe Analytics is a decent tool for understanding what’s happening on your site, and the user interface is much less intimidating than Google Analytics.

Heatmap Analytics

Heatmap analytics display an aggregated overview of visitor movement on your website by measuring user clicks and user movements. They can offer insight into whether visitors are noticing important CTAs or headlines, or whether your forms and navigations are working effectively.

3. Hotjar

Hotjar

Hotjar uses heatmaps to help you visualize how users are navigating your website, showing you what they click on exactly. It shows you how effective your funnels are, and with a host of other tools such as the ability to create customer surveys, it has quickly become a mainstream choice for usability testing. Hotjar can also take screen recordings of your visitors, allowing you to see exactly how they navigate through your site.

Fullstory is a similar alternative. (Check out their “Rage Grade” features that detect when users have moments of rage clicking!)

4. Crazy Egg

Crazy Egg

Like Hotjar, Crazy Egg gives you a visual representation of how visitors are interacting with your site. Using heatmaps, clickmaps and scrollmaps combined with traditional analytics and A/B testing features, it’s a terrific way to make your usability testing more data-driven and actionable.

If usability testing is about identifying exactly what’s going wrong, then A/B testing can allow you to try out multiple solutions side by side.

Crazy Egg offers all this in a single app.

Continue reading %7 Analytics Tools for Optimizing UX%


Source: Sitepoint

Site Authentication in Node.js: User Signup

Introduction

Just as authentication is important in APIs, it is also an important feature in certain web applications—those with pages and secrets that should only be accessible to registered and authenticated users.

In this tutorial, you will build a simple web application while learning how to create user registration.

Application Setup

Create a new directory where you will be working from. For the sake of this tutorial, I called mine site-auth. Initialize npm in the new directory you just created. Here is how to initialize npm.

The -y flag tells npm to use the default options.

Edit the dependencies part of your package.json file to look like what I have in mine.

With that done, run the command to install the dependencies.

Create a file in your working directory called app.js.

Start by requiring the dependencies you installed and the necessary files.

These dependencies were installed when you ran npm install. To use them in your application, you have to require them and save them in their respective variables.

For this tutorial, you will be using MongoDB as your database. You will need to store user information in the database. To work with MongoDB, you will make use of Mongoose—a MongoDB modelling tool for Node.js. Setting up Mongoose is easy, like this.

At this point, let’s set up our middleware.

  1. Express is initialized and assigned to app.
  2. Middleware to handle views is set up. For the views, you’ll be making use of handlebars.
  3. You set up middleware for bodyparser, cookie, session, and passport. Passport will be used when users want to log in.
  4. At some points, you will be displaying flash messages. Thus you need to set up middleware for that, and also create the type of flash messages you want.
  5. Routes middleware—this will handle any request made to a URL path. The URL paths specified here are for the index and users path.
  6. Middleware to handle 404 errors. This middleware kicks in when a request does not map to any of the middleware created above it.
  7. The server is set to listen at port 5000.

Views Setup

Create a new directory called views. Inside the views directory, create two other directories called layouts and partials. You want to achieve a tree structure like this in your views, so create the necessary files in their respective directories.

With that done, time to drop the code.

This is a dashboard that should be visible to only registered users. For this tutorial, it will be your secret page.

Now the index page for the application should look like this.

The application needs a layout that will be used, and here is that layout you will be using.

You’ll need a login page for registered users.

The notFound.handlebars file will be used as your error page.

Your registration page is supposed to look like this.

Finally for your views, here’s your navigation bar.

With that done, you are good to go into some deep parts.

Data Validation

You’ll need a User model. From the views code above, you can deduce that the properties needed for the User model are email, username, and password. Create a directory called models, and a file in it called user.js.

  1. Imports dependencies and saves them in variables.
  2. A new Schema is created. For each user, you want to save the email, username, and password to the database. The Schema shows how the model is to be constructed for each document. Here you want the email, username, and password to be of the String type.
  3. For each user saved to the database, you also want to create timestamps. You utilize Mongoose to obtain the createdAt and updatedAt, and this is then saved to the database.
  4. The model is defined and assigned to a variable called User, which is then exported as a module so it can be used in other parts of the application.

Salting and Hashing of the Password

You do not want to store users’ passwords as plain text. Here’s what you want to do when a user enters a plain text password while registering. The plain text password should be hashed using a salt that will be generated by your application (using bcryptjs). This hashed password is then stored in the database. 

Sounds great, right? Let’s implement that in the user.js file.

You just created a method that will be called in events of user registration. The method will receive the plain text password the user entered. As I mentioned earlier, the plain text password will be hashed using a generated salt. The hashed password will be returned as the password for the user.

Index and Users Routes 

Create a new directory called routes. In this new directory, create two new files: index.js and users.js.

The index.js file will be very simple. It will map to the index of your application. Remember you set up middleware for your routes in your app.js file when you did this.

So your index routes, which simply render the index page, should look like this.

Now to the users route. For now, this route file will be doing four things.

  1. Require dependencies. You will need to require the dependencies you installed using NPM.
  2. Validate user inputs. You want to make sure that the user does not submit an empty form. All inputs are required, and all must be of the type String. The email has a special validation called .email() which ensures that what is entered matches the email format, while the password is validated using a regular expression. For the confirmation password, you want it to be the same as the password entered. These validations are done using Joi.
  3. Set up your router. The get request renders the registration page, while the POST request kicks in when the user hits the button to submit the form.
  4. The router gets exported as a module.

Here is what the code looks like.

Let’s look deeper into what is happening in that POST request.

The values entered in the registration form are accessible via req.body, and the values look like this.

This is validated using the userSchema you created above, and the values entered by the user are assigned to a variable called result.

If an error is encountered because of the validation, an error message is displayed to the user and a redirection to the registration page takes place.

Otherwise, we try to find if a user with the same email address exists, as you do not want to have two or more users with same email address. If a user is found, the user is told that the email address is already in use.

In a scenario where no registered user has that email address, the next step is to hash the password. This is where you call the hashPassword method you created in your user.js file. The new hashed password is assigned to a variable called hash.

There is no need to store the confirmationPassword in the database. Thus this is deleted. The password available from result is still the plain password. Since you do not want to store the plain password in your database, it is important to reassign the password value to the hash that was created. This is done with a line of code.

The new user instance gets saved to the database. A flash message stating that the registration was successful is displayed, and the user is redirected to the login page.

Start up your server from your terminal by running:

Point your browser to http://localhost:5000 and you should see your new app.

Conclusion

Now you know how to implement the registration feature in a Node web application. You have learned the importance of validating user input and how to do that using Joi. You also made use of bcryptjs to salt and hash your password.

Next, you’ll see how to implement a login feature for registered users. I trust you enjoyed yourself!


Source: Nettuts Web Development

Analytics Bliss: Quantitative Data with Qualitative Research

This article was originally published on the Fullstory blog, and is republished here with permission.

Knowing what happens on your website is hard. You can have all the user data in the world but no idea what to do with it, no process to manage it, and no way to filter the signal from the noise. Where do you even start? And once you begin, where do you go? What you need is a systemized approach — and the right tools.

When it comes to knowing, traditionally there have been two approaches you can take. The first is the quantitative approach. Quantitative analytics puts everything in terms of numbers. Number of users doing whatever — bounce rates, conversion rates, time on site … that kinda thing. Quantitative research is a squeaky clean way to crunch numbers and look at things at a high level.

The drawback to quantitative data is that much can be lost in translation. Important nuances are lost. (What determines a functional analytics tool is a subject for another day, but no matter what, the analytics tools you choose should serve your needs and budget.) And in the absence of information, the quantitative can play tricks on our pattern-recognizing brains. We can see things that just aren’t there — just like how we can see faces in objects.

The first few results for the Google Image Search for “faces in objects” do not disappoint.

To really know what happens on your website or web application, you need a way to get at that nuance. And that’s where the second approach comes in — the qualitative. Qualitative analysis focuses on the subjective qualities of your users — the nuanced actions that drive the numbers. It’s descriptive research. The qualitative approach is subjective, too. The user paused here. Raged there. They seem confused with this UI: what’s going on? Qualitative data is messy. But it is rich in insights.

The major problem with qualitative research methods is they occur at the individual level. Qualitatively researching every user who visits your site is impossible. You could never do it, nor would it be useful.

So what do you do? Use both.

So what do you do? Use both.

The best analyses combine quantitative and qualitative research to create a flywheel of continuous product improvement. You use quantitative information to focus attention on the biggest problems (and opportunities) and then “zoom in” to the level of the user through qualitative research to round out your understanding — and solve the problem.

This one-two research method spins out insights you can turn into actions. It’s a quantitative-qualitative flywheel that can be used for continuous improvement of your website or app.

Here’s how it works …

Quantitative data alerts you to problems. Start here.

The most basic web analytical tools available are quantitative — and free. It comes as no surprise that one of the first things website owners do on launching a new site is install Google Analytics (GA).

Quantitative analytical tools like GA do a reliable job providing high-level metrics — e.g. user info, page visits, events, conversion rates, bounce rates, time on site, etc. Most importantly, they allow you to see the status of different aspects of your site and help you focus on problems or opportunities in aggregate.

With a functional quantitative analytics tool up and running, you’re ready to identify issues and opportunities for improvement. This is the first step in building the quantitative-qualitative flywheel. (Also see our discussion on if user metrics make you heartless.)

The Quantitative-Qualitative Flywheel starts with identifying problems through quantitative analysis.

The Quantitative-Qualitative Flywheel starts with identifying problems through quantitative analysis.

Once you have a quantitative tool tracking your customer data, you can quickly be dazzled by the illusion of insights. Fight the tendency to be hypnotized by the show.

Come at your newfound quantitative data powers with an objective. Otherwise, you can easily be overwhelmed.

Consider these changes in quantitative metrics that left teams struggling to understand the why behind the quantitative what:

Remember: behind every quantitative metric is a customer trying to get some job done. All you need to figure out is what that job is. And to do that, build out the next step in your flywheel.

Continue reading %Analytics Bliss: Quantitative Data with Qualitative Research%


Source: Sitepoint

32 Free And Friendly Office Icons

The web has changed the way we work. Startups rethought what offices look like, and with a laptop in your bag, you can get work done from anywhere anyways — no matter if it’s your desk at home or the cozy coffee shop around the corner. Over are the times of dark and stuffy cubicles — in many companies, at least.
To remove the dust from the term “office” and give the visuals revolving around it a fresh and friendly face, too, the creative minds at Vexels designed a set of 32 office-themed icons.
Source: Smashing Magazine

Get 65% Off SiteGround and a Free Year of SitePoint Premium

Do you like saving money? What about free stuff? And puppies, do you like puppies? If you answered “YES” then read on.

Well actually… this has nothing to do with puppies, but 2 out of 3 ain’t bad right? But what we do have for you is a great deal!

Right now you can get 65% off any web hosting plan from our friends at SiteGround (money saving). On top of that you’ll get one year of SitePoint Premium free when you sign up to any SiteGround plan (free stuff – that’s usually worth $99).

65% off SiteGround and 1 year of SitePoint Premium free

Here’s What You’ll Get:

  • 65% off any plan at SiteGround for up to 3 years (that amounts to big savings in renewals)
  • Instant access to all 240+ of our books and courses via SitePoint Premium, plus access to whatever else we release over the next year (we’ve added over 30 hours of video content and 10 books already in the last couple of months)
  • Ability to download anything / everything you want from the SitePoint Premium library from day 1, without restrictions.

Over 1,500 people have already taken up our preferred hosting partner and gotten themselves a free year of SitePoint Premium in the process. Don’t miss out and get on this deal now! And you could be as happy as this puppy in a swing (our treat for those of you who came here for the puppies).

Happy puppy in swing

Continue reading %Get 65% Off SiteGround and a Free Year of SitePoint Premium%


Source: Sitepoint

Building Better UI Designs With Layout Grids

Designers of all types constantly face issues with the structure of their designs. One of the easiest ways to control the structure of a layout and to achieve a consistent and organized design is to apply a grid system.
A grid is like invisible glue that holds a design together. Even when elements are physically separated from each other, something invisible connects them together.
While grids and layout systems are a part of the heritage of design, they’re still relevant in this multiscreen world we live in.
Source: Smashing Magazine

Creating a Task Manager App Using Ionic: Part 2

In the first part of the tutorial series, you created the user interface and navigation for the task manager app. In this tutorial, you’ll see how to implement the functionality for the Ionic task manager app to add and list tasks.

Getting Started

Let’s get started by cloning the source code from the first part of the tutorial series.

Navigate to the project directory and install the required dependencies.

Run your app from the project directory.

You should have the application running at http://localhost:8100/.

Communicating Between Components

You have already created the Add component and List component to add tasks and to list tasks respectively. In order to make them work in sync, you need to maintain communication between the two components. To communicate between the components, you’ll make use of an injectable CommonService.  

Create a folder called service in the src/pages folder.

Create a service file called common.service.ts and add the following code:

You’ll keep track of the tasks list in the common service, and it will be shared between the Add and List components.

Define a variable called tasks in the common.service.ts file. You’ll keep your task list in this tasks array.

Create a folder called task inside the src/pages folder. Create a file called task.model.ts and add the following code:

You’ll use the above Task class to create an instance of a new task.

When the user clicks on the Add task button from the Add component, you’ll add items to the tasks variable in the common.service.ts file. So create a method called addTask in the common.service.ts file, which you’ll call from the Add component.

Add a Task to the List

In order to add a task to the task list, you need to import the common.service.ts file inside the AddPage component.

Initialize the CommonService inside the AddPage component constructor method.

Inside the AddPage component, create a method called add where you’ll add the task to the common service tasks list.

Here is how the add method in the AddPage component looks:

As seen in the above method, you have called the addTask method from the common service to add a task to the tasks list.

Once the item is added, you have called the dismiss method to dismiss the pop-up overlay. Here is how the add.component.ts file looks:

In the add.component.html page, add the ngModel directive to the input element.

Add the click event to the button in the add.component.html to trigger the add method inside the add.component.ts.

Save the above changes and try to restart the ionic server. Navigate the browser URL to http://localhost:8100, and you should be able to view the mobile app in the browser.

Click on the Add icon to add a task. Enter the task name and click the add button. The pop-up should disappear.

Listing Task List Items

Once the task gets added in the tasks list, you need to update the view accordingly. So, to track the task when added to the list, you’ll need to use Angular Subject.

Define a subject called task_subject inside the common.service.ts file.

When the task gets added to the tasks list, you need to trigger the subject task_subject to inform the subscriber that a task has been added.

Modify the addTask method inside the common.service.ts file to include the following code:

Here is the modified addTask method:

Subscribe to the subject task_subject inside the list.component.ts file.

Whenever a new task is added the tasks from the commonService is assigned to the tasks in list.component.html and the view is updated.

Here is how the list.component.ts code looks:

Modify the list.component.html to iterate over the tasks variable from the list.component.ts file. Here is how it looks: 

Save the above changes and restart the server. Try to add a new task and it will get displayed on the listing screen.

Ionic Task Manager

Now let’s implement the functionality to mark the finished tasks. Each time a new task is added, you are adding an IsDone attribute as false.

Let’s keep two different arrays for pending tasks and finished tasks.

Each time a new task is added, you’ll update the above two arrays as shown:

When the user clicks on the check box, you need to toggle the IsDone status. Add a method called checkPendingItem to toggle the IsDone status for pending tasks.

Similarly, add another method called checkDoneItem to toggle the task status for done items. Here is how the method looks:

Once the IsDone status is toggled, you need to update the tasks. Define a method called updateTask, which is called after IsDone toggle in both of the above methods.

Modify the list.component.html code to display the pendingTasks and doneTasks separately. Here is how the modified list.component.html file looks:

Save the above changes and restart the ionic server. You should have the application running at http://localhost:8100.

Ionic Task Manager App Listing

Wrapping It Up 

In this tutorial, you saw how to implement the functionality to add and list the tasks in the Ionic task manager mobile app. You saw how to use an Angular service to share data between two components. In this tutorial, you used the Angular service to keep data in a common list when added from the Add component and display it in the List component.

Do let us know your thoughts in the comments below.

Source code from this tutorial is available on GitHub.


Source: Nettuts Web Development

Developing the User Experience in Your Enterprise Applications

This article was sponsored by Incapsula. Thank you for supporting the partners who make SitePoint possible. The user experience (UX) is vital to the success of an enterprise application. According to a recent study, by Forrester Research, a well-designed user interface could raise your website’s conversion rate by up to a 200 percent and a […]

Continue reading %Developing the User Experience in Your Enterprise Applications%


Source: Sitepoint

Finding the Right Font is Now Easy

This article was sponsored by BAW Media. Thank you for supporting the partners who make SitePoint possible. Undertaking a manual search for a specific font is rarely worth the effort. First, there are thousands upon thousands of different fonts go through, even if they were well categorized, a single search session could take hours. The […]

Continue reading %Finding the Right Font is Now Easy%


Source: Sitepoint