In September of last year, Evan You (creator of Vue.js) announced plans for the next major version of the library. Vue 3.0 will feature an improved experience for TypeScript users, including native support for class-based components, and better support for type inference when writing code.

The great news is, you don't have to wait until version 3.0 is released (predicted for Q3 of 2019) to start writing your Vue apps in TypeScript. Vue's command-line tool, Vue CLI, comes with options for starting projects with the TypeScript build tooling pre-configured and includes the officially supported vue-class-component module, allowing you to write your Vue components as TypeScript classes.

This article assumes some familiarity with both Vue and the basics of TypeScript. Let's take a look and see how you can start taking advantage of static typing and class-based components in your code today.

A significant portion of the data that is generated today is unstructured. Unstructured data includes social media comments, browsing history and customer feedback. Have you found yourself in a situation with a bunch of textual data to analyse, and no idea how to proceed?

The objective of this tutorial is to enable you to analyze textual data in Python through the concepts of Natural Language Processing (NLP). You will first learn how to tokenize your text into smaller chunks, normalize words to their root forms, and then, remove any noise in your documents to prepare them for further analysis.

Let's get started!

Prerequisites

In this tutorial, we will use Python's nltk library to perform all NLP operations on the text. At the time of writing this tutorial, we used version 3.4 of nltk. To install the library, you can use the pip command on the terminal:

pip install nltk==3.4

To check which version of nltk you have in the system, you can import the library into the Python interpreter and check the version:

import nltk
print(nltk.__version__)

To perform certain actions within nltk in this tutorial, you may have to download specific resources. We will describe each resource as and when required.

However, if you would like to avoid downloading individual resources later in the tutorial and grab them now in one go, run the following command:

python -m nltk.downloader all
Step 1: Convert into Tokens

A computer system can not find meaning in natural language by itself. The first step in processing natural language is to convert the original text into tokens. A token is a combination of continuous characters, with some meaning. It is up to you to decide how to break a sentence into tokens. For instance, an easy method is to split a sentence by whitespace to break it into individual words.

Universal (or Isomorphic) JavaScript is a term that has become very common in the JavaScript community. It’s 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 won’t 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 Nuxt.js Is

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’s 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’s 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, Vuex (only included when using the store option), Vue Server Renderer and vue-meta. 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 57kB min+gzip (60KB with vuex).

This is what happens when a user visits a Nuxt.js app or navigates to one of its pages via <nuxt-link>:

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.

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’ll 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 new to the framework. I’ll also be using ES6 Syntax, and you can get a refresher on that here: 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 using the vue-cli:

vue init nuxt/starter ssr-blog

Once you’ve run this command, a prompt will open and ask you a couple of questions. You can press Return to accept the default answers, or enter values of your own.

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 make some simple configurations in the nuxt.config.js file. We’ll add a few options:

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 steps by adding our blog’s pages and functionalities.

I’m willing to bet that there are a lot of developers out there who still reach for jQuery when tasked with building simple apps. There are often times when we need to add some interactivity to a page, but reaching for a JavaScript framework seems like overkill — with all the extra kilobytes, the boilerplate, the build tools and module bundlers. Including jQuery from a CDN seems like a no-brainer.

In this article, I’d like to take a shot at convincing you that using Vue.js (referred to as Vue from here on), even for relatively basic projects, doesn’t have to be a headache, and will help you write better code faster. We’ll take a simple example, code it up in jQuery, and then recreate it in Vue step by step.

What We’re Building

For this article, we’re going to be building a basic online invoice, using this open-source template from Sparksuite. Hopefully, this should make a refreshing change from yet another to-do list, and provide enough complexity to demonstrate the advantages of using something like Vue while still being easy to follow.

We’re going to make this interactive by providing item, unit price, and quantity inputs, and having the Price column automatically recalculated when one of the values changes. We’ll also add a button, to insert new empty rows into the invoice, and a Total field that will automatically update as we edit the data.

I’ve modified the template so that the HTML for a single (empty) row now looks like this:

This function looks for all item rows in the table and loops over them, passing each row to a calculateSubtotal function, and then summing the results. This total is then inserted into the relevant spot on the invoice.

Lastly, we have a click handler for our Add row button. What we’re doing here is selecting the last item row and creating a duplicate. The inputs of the cloned row are set to default values, and it’s inserted as the new last row. We can also be nice to our users and set the focus to the first input, ready for them to start typing.

Learn how to visualize data in your Vue project with charts and graphs, to better convey and communicate information. In this tutorial, you’ll do so using the D3.js library, which combines powerful visualization components and a data-driven approach to DOM manipulation.

The Icon Handbook is the only resource that guides you through the complete process of designing icons - from deciding on the correct metaphor, drawing clear and understandable symbols, and implementing in your websites and apps.

In this tutorial we'll teach you how to build a reusable modal component using Vue. We'll guide you through creating a simple authentication modal, creating a component out of it using Vue and then lastly, creating a skeleton modal component which can be copied and reused.

We're releasing new content on SitePoint Premium almost every day, so we'll be back next week with the latest updates. And don't forget: if you haven't checked out our offering yet, take our 7 day free trial for a spin.

React Hooks are special functions that allow you to "hook into" React features. For example, the useState hook allows you to add React state to a functional component. useEffect is another hook that allows you to perform side effects in function components. Side effects are usually implemented using lifecycle methods. With hooks, this is no longer necessary.

This means you no longer need to define a class when constructing a React component. It turns out that the class architecture used in React is the cause of a lot of challenges that React developers face every day. We often find ourselves writing large complex components that are difficult to break up. Related code is spread over several lifecycle methods, which becomes tricky to read, maintain and test. In addition, we have to deal with the this keyword when accessing state, props and functions. We also have to bind functions to this to ensure they are accessible within the component. Then we have the excessive prop drilling problem — also known as wrapper hell — when dealing with higher order components.

In a nutshell, hooks is a revolutionary feature that will effectively simplify your code, making it easy to read, maintain, test in isolation and re-use in your projects. It will only take you an hour to learn. Soon, you will start thinking very differently about the way you write React code.

React Hooks was first announced at a React conference that was held in October 2018. It was officially made available in React 16.8 last month. This feature is still under development — there are still a number of React class features being migrated into hooks. The good news is that you can start using them now. You can still use React class components if you want to — however, I doubt you will after you finish this introductory guide.

If I've grabbed your curiosity, let's dive in and see some practical examples.

Prerequisites

This article is for intermediate to advanced React developers. If you are a beginner, please go through the following tutorials first:

On an impulse just before Christmas, I bought myself an NBA "over-the-door" mini basketball hoop. I wasn't sure what I'd do with it, but having a basketball hoop for my office seemed like a good move. In the end I decided to experiment and bring some connectivity to it by hooking it up to a Raspberry Pi to give it a scoreboard display. Here's how that went, with step-by-step instructions if you'd like to try to adapt and improve upon it!

This tutorial isn't intended to be used as a step-by-step "do exactly as I did" style guide — my hope is that you'll take this concept and use it for all sorts of other ideas. Add a virtual scoreboard that counts how often people come into your office. Or go with a different sport (maybe a mini soccer goal tracker?). Or use an entirely different sensor but track hits on it visually with a Raspberry Pi! There are so many potential applications of this technique. Try stuff and let me know how you go!

What You'll Need

In order to be able to follow along and make something similar, here's a list of the parts I used (or their equivalent for the things I had around my lab already):

Raspberry Pi 3 B+ — I used an older version of this from 2015, if you're going to buy one, get a newer version like this!

One thing to note — if you don't have a 7 inch display for your Pi, you could display the score on a nearby computer monitor too. Any device on your local network with a web browser and a screen would work!

I hung my new basketball hoop up on a door with an ultrasonic sensor attached to the hoop to track when a ball goes into the hoop. Underneath is a Raspberry Pi powered scoreboard — I'd actually recommend finding longer cables so you can connect it outside of basketball falling range.

I'll go over why everything is as it is below — along with some suggestions for those who might want to improve upon this base!

Languages we'll be using

JavaScript - In order to follow along, you'll need a knowledge of the basics, but we won't have lines upon lines of code, things are actually pretty simple in the JS side of things.

Node.js - A basic knowledge of how to run npm and Node is needed to run our scoreboard server.

Setting up our Raspberry Pi

If you are completely new to the Raspberry Pi and haven't set anything up yet, never fear! There are many guides out there for setting things up and it's nice and straightforward. The Raspberry Pi foundation have a step by step guide for installing the Raspbian operating system using the NOOBS operating system manager. You'll want to make sure the operating system is running before you get onto any of the other steps.

Touchscreen setup

I put together my connected scoreboard using a Raspberry Pi 3 with touchscreen. My touchscreen and case were already put together and screwed down tight as I've used this Pi 3 before for other projects, however if you are starting from scratch — it isn't too hard to connect up. Newer shipments (like mine) actually have a bunch of it already assembled, with the adapter board already screwed onto the LCD screen, if that's the case, half the steps are already complete! Instructions on how to assemble the screen are available online:

When it comes to putting the case around the LCD screen and Raspberry Pi, that process is also quite easy with the case I have. I already had mine together, however the general steps for this are:

Make sure you've already got your microUSB card inside the Raspberry Pi and are happy with how it's running! Annoyingly with a lot of cases, you can't get the card out once the case is in place. My case linked above is one of those... so make sure the card is all good before you lose access to it!

Place the Pi with screen into place inside the case

Arrange the ribbon cables and cables coming from the GPIO so they aren't in the way

Make sure the holes for your USB ports and such are on the correct side of the bulkier part of the case and line up nicely.

Once everything is lined up nicely, screw in the four screws to put it all together!

Turn it on! If you find that the screen comes up upside down, don't worry, it's a side effect of the case manufacturers lining up the power to come out of the top. When I mounted my scoreboard though, I mounted it with the power coming out of the bottom, so this wasn't an issue for me. If it is an issue for you:

Run sudo nano /boot/config.txt to open the config for the Pi

Then add lcd_rotate=2 to the end, this will rotate the screen around.

Press Ctrl X and the Ctrl Y to save your changes.

Restart your Pi and when it loads back up it should be the right way around!

Running Node.js on our Raspberry Pi

Conveniently, Raspbian has Node installed by default! However, it is a rather old version of Node. You can check which version is installed on your Pi by opening up the Terminal and typing in:

node -v

I've got version 8.15.0 installed on my Pi. You can upgrade by running the following commands:

This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.

As the saying goes: "an ounce of prevention is worth a pound of cure". More companies than ever are beginning to heed this advice. They're realizing that it is okay to make an extra effort to avoid usability issues. It is far less expensive than having to resolve problems later.

Debugging a software application before launch is a standard operating procedure. Any bugs that manage to sneak through can be potential troublemakers. Most problems users encounter are usability issues. These can and should be addressed during the initial prototyping.

Check for potential usability issues early in the design phase. Even though this often requires additional time and budget, it saves money in the long term. Designers and project managers need to think in terms of ROI. This is instead of working to satisfy short-term goals.

The right tools and resources can be invaluable for getting things right. All this at minimal extra expense.

Mason provides a front-end feature building experience par excellence. Designed for modern teams, it enables them to come together to create front-end features for their apps efficiently and economically.

With Mason you can bypass additional prototyping, wireframing, or additional coding to get the job done. Mason integrates seamlessly into your existing code base to significantly shorten development and deployments cycles. It also enables teams to react and adapt to a feature-building state of affairs with lightning speed, often saving a ton of money in the process.

More than anything else, Mason's feature-building capabilities allow teams to respond immediately to user or customer needs. Teams can provide users with solutions that are sound, extensible, secure, and reliable; and allow a team's developers to work on more complex or higher priority projects.

Mason won't weigh your site or app down. It's an invaluable tool for a team to have on hand when they're responsible for maintaining one or more software products or solutions. It's triggered whenever needed, and only when needed.

UXPin is a designer's dream. This fundamentally different design tool is used in companies like PayPal and Microsoft to build realistic prototypes, with the powers of code components, logic, states, and design systems. With its extensive library of design components, UXPin can be used to create prototypes that look and feel like real products, from start to finish without ever leaving the app.

UXPin provides powerful team collaboration and product handoff features as well. Since it's cloud-based, you can prototype and collaborate from browsers as well as desktop apps – both on Mac OS and Windows. Easily iterate from low-fidelity to high-fidelity prototypes that feature complex interactions and look real without a need for any other tools.

With this all-in-one web and app design tool, you can ensure consistency across product lines while at the same time reducing design, development, and deployment time and costs.

Interfacer is a great source of free design resources to have at your fingertips. Their collection of more than 300 resources includes web template libraries, eCommerce, blockchain, travel app and other UI kits, more than 80 different icon mini libraries, and nearly 100 mockup solutions.

Feel free to use any of these high-quality free design aids on commercial projects.

If you're in the market for an all-in-one tool to design, build, and launch fully customized and responsive websites, Webflow is a great choice.

With Webflow, you can also create a customized and client-friendly CMS for every site and enjoy super-fast, managed hosting, all without coding or troublesome setup issues. Webflow is also the ideal solution for prototyping and for building eCommerce solutions – also without coding.

Why should you care about UX and these tools?

A Well-Designed UI can Help to Increase Conversions

You've been there before, probably many times. Let's say you're doing some comparison shopping for a product or service. You have come across several websites that address your problem.

One clearly stands out.

You easily found the information you needed. Your experience was in fact so enjoyable that you bookmarked the website.

Wouldn't it be nice to be able to design a website or app like that one?

Increase Your Brand Loyalty with UX Design

A good user experience accomplishes a great deal for a business. Your site's UX can contribute greatly to build trust in your brand, your product, or your service. It can play a vital role in establishing a relationship with your customers.

A friendly UX encourages customer activation and fosters loyalty to your brand. Same goes for your products and services.

Don't Forget the Importance of Word-of-Mouth Referrals

Whether it's a book, a movie, a YouTube video, or a website, people like to share things they enjoy with others. People buy into good experiences, and if you provide them, they're going to tell the world about them.

You should make the buying process not just easy, but as easy as possible for a customer. That customer is going to remember it – and recommend it to others to experience.

Conclusion

What you want and expect from a top UX or UI tool or source naturally depends on your needs. But those we've presented here have several things in common that should appeal to you.

They can save you time and money, the tools are fast, efficient, and reliable. The resource for design aids can relieve you of having to reinvent the wheel.

In this article, I’ll focus on a list of must-have VS Code extensions for JavaScript developers.

Visual Studio Code is undoubtedly the most popular lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. However, its success mainly comes from its ability to provide better performance and stability. In addition, it also provides much needed features like IntelliSense, which were only available in full-sized IDEs like Eclipse or Visual Studio 2017.

The power of VS Code no doubt comes from the marketplace. Thanks to the wonderful open-source community, the editor is now capable of supporting almost every programming language, framework and development technology. Support for a library or framework comes in various ways, which mainly includes snippets, syntax highlighting, Emmet and IntelliSense features for that specific technology.

This article was updated in March 2019 to reflect the current state of the VS Code extensions ecosystem.

As the number and variety of prototyping tools continues to grow, it’s becoming harder and harder to figure out which tools meet what needs, and who they’re suitable for. Since we first wrote this article back in 2015, countless design apps have dominated (and changed) the prototyping space.

Stakeholder feedback and user testing is now taking a far greater role in UI design and this new generation of tools aims to connect these two previously separate stages of the design process. Clients want to be involved, and email isn’t cutting it anymore. Some apps like UXPin are also taking care of the wireframing stages, whereas others like InVision App are bridging the gap between designer and developer by offering design handoff tools.

We're working hard to keep you on the cutting edge of your field with SitePoint Premium. We've got plenty of new books and mini-books to check out in the library — let us introduce you to them.

Build a Real-time Chat App with Pusher and Vue.js

Build a real-time chat application using Vue.js powered by ChatKit. The ChatKit service will provide us with a complete back end necessary for building a chat application on any device, leaving us to focus on building a front-end user interface.

Build maintainable websites with elegant Django design patterns and modern best practices. Explore aspects from Models and Views to testing and deployment. You’ll also understand the nuances of web development, such as browser attack and data design.

Learn isomorphic development in Go, getting a unified view of web and back-end development. Learn how to build Isomorphic Go web apps. Neatly organize your isomorphic codebase to enhance the maintainability of your app. Leverage the same Go code across the web server and the web browser.

We're releasing new content on SitePoint Premium almost every day, so we'll be back next week with the latest updates. And don't forget: if you haven't checked out our offering yet, take our 7 day free trial for a spin.

Firstly, the backstory. In 2013 the popular Cook app was launched, and it’s great to reflect on the journey it’s been through.

I love to cook. This is probably not surprising for someone who created a cooking app. As a child, some of my earliest memories are of sitting on the kitchen bench watching my mother cook amazing food for all manner of social events, and getting to help stir or participate in other small ways was a highlight for me.

I really think food holds many memories. The smell of food, or the type of dish you’re eating, can take you back in time — in much the same way music has the ability to trigger memories of different times in your life, reminding you of people and places from your past.

It was the memories of the past that led me to think of a digital recipe book being a good idea for an app.

I was chatting with my mother one day and asked her where my grandmother’s baked custard recipe was. She responded, “Oh, I don’t know. I don’t think she ever wrote it down. She just did it from memory.”

I was horrified. It was a simple recipe. But at the time I asked the question, my grandmother had been dead for ten years. That meant the recipes I recalled from my past — simple though they were — had now been lost with her. My grandmother isn’t any different from many home cooks who have an array of recipes they cook so often they know how to do them from memory, and so never write them down.

Recipes can represent your heritage in many ways. My grandmother’s was a simple recipe, and I could probably easily recreate it from a web search. But this particular recipe held special memories of baked dinners and times spent with my grandmother. Because she didn’t write it down, it was lost now — never to be recovered.

So Cook was first imagined as a way to preserve the heritage of family recipes — helping to overcome the loss of handwritten recipes over time, assisting to preserve recipes from generations of family cooks. By digitizing the old world of index cards, tatty old recipe books, or other random means, my hope was to enable family recipes to be captured and shared with future generations. Digital meant that recipes could be handed down more easily and not lost to a time gone by.

The Opportunity to Do Something Knocks

Like many people who have a killer idea for an app, I did nothing with this idea for ages. I was just another person that imagined a “great idea” for an app and bored people with that idea at dinner parties.

Then, in 2011, SitePoint approached me to write a book on UX.

SitePoint is a publication mainly aimed toward the developer community, so they suggested that a case study would be useful in bringing the value of UX to life for their readers in a more tangible way.

UX has often been viewed with skepticism in terms of tangible, measurable benefit. In those days, it was still kind of new to consider “the user” of a product as you developed it — as crazy as that sounds. So I discussed with my editor Simon the idea for the app, and that we could incorporate the story of it into the UX book.

We imagined that each chapter could talk about the key methods to follow, and that the app would be the living and breathing example of how we put the methods to work in order to bring the app idea to life. In this sense, Cook became the case study for taking a “human-centered design” approach to product design.

So, by writing the book we were able to mature the idea of a recipe app a bit further, taking an educational approach.

The UX Rules of Product Development

Whenever creating a product, you should ask yourself three simple questions:

What problem needs solving?

Who are you solving it for?

How are you going to measure success?

What Problem Needs Solving?

Quite often this gets answered as a product is imagined, and Cook was no different. I was a passionate home cook that thought there was potentially was a gap in the market, based on a pain I had encountered. Although it’s wise to never think you are your users, this is the way many ideas start. And this thought spurred on the idea for a digital recipe book. Exploration of that idea comes next.

As part of the process of exploration, we needed to scan the landscape. What else was out there? Were we the only ones with this idea? How could we be inspired by the competing and complimentary offerings that existed? Had someone else beaten us to it?

This task proved to be a scary one, as we discovered the cooking app landscape was littered with famous celebrity chefs. Jamie and Nigella were everywhere. I was a passionate home chef, but I was no MasterChef. Eeep! However, regardless of the talent in the space, the design gap still remained. There was no app we could find that presented people with a stupidly simple means of creating recipes and storing them digitally. There were many complex ones that were hard to use. And therefore, not only was there a gap, but there was an area that we could easily differentiate — simply by being easy to use.

Who Are We Solving It For?

The problem we were solving for was, to my mind, home cooks. Passionate, average, everyday cooks, the type of people that had their own recipe scrapbook full of favorite recipes from times past. Collected from family and friends over the years.

This focus is why we initially named the app “Family Favorites”. It said what we intended — but it was a bit lame in selling the dream from a marketing perspective, and also tended to pigeonhole the target audience in a way we didn’t want. That is, it seemed to say “families only”.

We knew we had work to do on the name and on giving it a broader appeal. Nevertheless, the placeholder name held for a while as we got on with the business of researching and creating the app. We’d think about the name later.

Measuring Success

Obviously, the easiest measure of success was going to be people downloading it and using it. Actually, creating recipes within the app was going to be the main measure of success at this stage. This measure would change over time as the design and concept evolved, but, at a basic level, if you’re downloading an app and using it, it’s a good basic success metric.

We agonized over whether to charge for the app or not, and we eventually decided we needed eyeballs in the early days. So the app would be free, so that there was no barrier to people downloading it.

What Taking a “UX” Approach Means in Practice

We ate our own dog food and followed a “human-centered design approach” (HCD), or “UX” approach. This approach is more commonly understood and accepted nowadays as a beneficial approach to product development. But what does it mean in practice?

HCD, UX, even service design (SD), are all very similar in their philosophy: that is, to design by putting the human at the center of your design process — considering their needs upfront and throughout the product development process, being prototype-driven (that is, experimental), and iterative (that is, changing your mind and updating the design, based on what you learn from exploration and validation with people). It’s stupidly simple. We did all these things developing Cook. It works.

I’ve often told the story of how I recruited people to take part in some concept exploration research before we started designing the app. I did this across a weekend — the only time I could fit it in around work. I told participants I was going to come over to their house, and I wanted them to prepare and cook for me one of their favorite recipe dishes of all time.

Everyone I tell this story to laughs and says the same thing. “Nice one! You just wanted to be fed!”

Without doubt, it was one of the most enjoyable sessions I’ve ever run, and I certainly loved the many and varied outputs. But that was part of the real trick — to ensure they didn’t really know what I was exploring.

From a process perspective, I sent them a homework activity to complete before I got there, so we could talk about it. The homework task was to create a poster that combined words and images to show how they feel about cooking (this helped prime them to the topic). They knew I was going to arrive and chat to them while they prepared the dish, but they didn’t really know what it was I was researching beyond that.

As they prepared the food, I asked them questions about the dish they’d chosen, and watched to see if they used a recipe, and where they had the recipe as a reference. (Was it in a recipe scrap book? Was it in a book? Index cards? From memory? Other?)

I intentionally didn’t talk about storage or recipe management too much. That part I observed. I talked to them mainly about their love of cooking, how they came to find this recipe and how it ended up being a family favorite. I talked about how they came across new ideas for cooking dishes and where they kept things stored. But we didn’t ever talk about whether they thought a “digital recipe app” was a good idea or not.

The trick to good research is to explore around the edges of what you’re looking at, and not let the people you’re talking to necessarily know what you’re actually researching.

You gain real insights from observing people’s true habits and behaviors, rather than by asking direct questions about their habits — which just puts people in a position of making up an answer if they don’t know why they do what they do. Most of the time we don’t know why we do things. We just do them automatically. It’s a habit we’ve formed for some reason, and it serves a particular purpose for us. Exploring the purpose around what we do, and why, is the job of a design researcher.

This comes to another thing about design research: we explore the way users work and live in a more contextual manner, and from that we gain inspiration for design. People often forget the little details of routine, so going into their environment helps us make connections that they might not think to articulate. Design research is intended to explore the design gaps and facilitate a better understanding for how users’ needs can be met — so that we can design better solutions for them.

One of the central tenets of HCD is to go to the extremes. Don’t just engage with people you think you’re creating the product for. Go to the edges and get inspiration from the types of users who might never want to buy your product. The anti-users and the experts often give you the best hints for how your product can differentiate itself and appeal to a broader market.

The people I recruited to participate included passionate home cooks, people who couldn’t cook, people who hated cooking, and professional chefs.

What I Learned that Changed My Thinking

The idea we went into research to create was quite different from what we came out with. We went into concept research absolutely sure we had an opportunity to create a digital recipe cookbook that people could store their recipes within. The ability to be digital meant cherished recipes would never be lost, and you could keep adding to your digital cookbook indefinitely.

What we missed with this perspective, however, was the gap for sharing and swapping recipes. And we also totally underestimated people’s voyeuristic, idle curiosity about what other people cook and eat from day to day.

It’s funny. I’m a passionate home cook. But I was so focused on what I thought the product needed to be that I totally overlooked many things that user research helped me open my eyes to and refocus on. In this sense, my own bias about the product made me overlook critical product features that would help make the app really special.

This points to a few things about research.

As a human, you have a lot of biases and self-fulfilling tendencies when creating a product you’ve been personally invested in. You really need to watch that. It’s part of being human, and hard to control. Being aware of it and testing your assumptions with real people other than you is critical.

As a design researcher, you have to be open to changing your mind about what you think you know to be true. This is product design, not art. The purpose of design is to ensure it’s as good as it possibly can be for the eventual end users. You need to accept that your initial wonderful idea might not have it all covered. You need to change your mind, and your design approach, based on what you learn. Otherwise, you’re just creating art.

This self-reflective moment is essential for design researchers. Your humble attitude to being open to new ideas, and changing your design accordingly, is not only essential, it’s critical to your success.

The Critical Aha Moments

People who love to cook often are friends with other people who love to cook. Swapping and sharing recipes is something they do. But as we learned, it’s a difficult and messy process.

This was the first aha moment. When we unpacked the research, we realized we needed to make Cook more than just a digital recipe book. We needed to facilitate sharing. It needed to be a social network for recipe sharing — enabling you to connect with friends and family and access each other’s recipes.

Another aha moment was discovering that people were fascinated by what other people cooked and ate. Not the exotic or highly skilled cheffy stuff, but the everyday meals that were quick and easy were interesting to people. Ultimately, they wanted inspiration for their everyday. But it had to be quick and simple — things that didn’t take too long. They were curious about what other people were doing in the kitchen on week nights, when they were pushed for time and were preparing for the week ahead.

Another critical aha moment was that people’s voyeuristic food tendencies weren’t limited to the banality of the local day-to-day. They were interested in the day-to-day food from other cultures. We discovered that many people attend cooking courses and buy recipe books from countries they visit. And while they’re interested in the exotic and higher-brow stuff, they’re also interested in the day-to-day. This opened our eyes to the prospect of a global recipe sharing network, which would facilitate users seeing what everyday cooks in other countries cooked regularly.

This led to two things: we launched the app globally, rather than just in Australia, and we partly focused recipe browsing on where recipes were submitted from. So one of the main navigation features was the “world books”, which allowed you to see what the everyday cooks in the UK, or USA, or Singapore were cooking.

This may seem like a little thing, but to me this really was one of the coolest features of Cook. Yes, people in the USA have an inordinate amount of Oreo Cookie recipes to share, and people in Italy have an amazing stash of pasta dishes.

Another aha moment was considering how to assist users to “fill up” their recipe book without having to actually write out recipes. People who had recipe scrap books had been adding to them for years — and still they might not have had many recipes within them. This was a concern for us. For Cook to be successful, you needed to be able to have it all, and it needed to be super simple.

We knew that searching the Web was a common way to find recipes. So the need to search the Web for recipes and add them to your book was clear, but another way to help build out your book was to be able to add recipes you found within Cook, from across the global selection. This helped to save the things you loved as your own, and also helped to fill out your book quickly and easily.

These things may not appear to be much. But they were a fundamentally different way to design and build out the app. And we were able to then do these things because we did this research up-front, before we had started to build or lay down foundations that were going to be hard (or impossible) to change. We were letting what we’d learned reshape our thoughts of the Cook app, which was a great position to be in.

Where We Are Now

Cook launched in 2013, a year after the launch of the book Killer UX Design, and I’m pleased to say we’re still rated one of the top 20 best apps for the food and drink category.

We’ve had 1.5 million downloads to date, and there have been 800 thousand recipes shared through the app worldwide.

Cook is featured on iPads in the Apple store around the world. In fact, I’ll never forget going into the Apple store in NYC and seeing Cook on the iPads on display. Wow! What a thrill that was.

The app has many dedicated users who love and cherish their digital cookbook. I don’t think I could have dreamed of a happier ending.

Like all start-ups, we always managed Cook on the side of our day jobs. And it’s the same right now. We’ve never received any funding and have been keeping the dream alive through our dedicated community of Cooks, who create and share content via the app daily.

We never did change the charging model, so to date, Cook has brought us lots of grateful moments, but no money. As we mentioned, we decided to remove all barriers for download and therefore not to charge for the app. To this day the app is free — an expensive decision, but the right one at that time.

The funniest thing about apps is that you ask someone to go to a different bank ATM and pay $3 to extract money and no one batts an eyelid. You ask someone to pay $3 for an app and they’re up in arms! And so not charging for Cook is something we’re going to reconsider.

It’s certainly hard sometimes for people who use Cook to understand that there are only about two people overseeing that app. So right now I’m looking for funding to keep Cook going into the future — a true labor of love.

Working with Cook has been a design experience of a lifetime, and one that totally validates the HCD approach we set out to prove.

During the past decade, browser development tools (browser DevTools) have evolved from basic JavaScript consoles to fully-integrated development and debugging environments. It's become possible to alter and inspect any aspect of your web application but few of us venture beyond the basics.

In this series of articles, we'll explore a range of features you may or may not have considered. Chrome's DevTools are described in most cases but alternative options are shown for Firefox where available.

Keyboard Shortcuts

Using a menu to launch DevTools wastes valuable seconds! Try one of these options instead:

F12

ctrl + shift + i

cmd + option + j

or right-click any element on the page and choose Inspect or Inspect Element.

Chrome provides useful keyboard shortcut assistance. From DevTools, press F1 or select Settings from the three-dot menu at the top-right. Then choose Shortcuts from the menu:

Docking

The DevTools pane can be docked to the left, right or bottom of the browser window. If you require more room, undock it to a separate window. Docking options are found in the main three-dot menu in Chrome:

and Firefox:

Settings

DevTool settings can be accessed from the same menu or by pressing F1. This allows you to set options such as the tools shown, theme, tab sizes, color units and more.

Auto-start DevTools

When working on a web application, it may be practical to create a dedicated desktop shortcut to launch your browser, open the URL and launch DevTools in a single step. For Chrome, create a desktop icon with the following Chrome command-line options:

chrome --auto-open-devtools-for-tabs http://localhost:8000/

where http://localhost:8000/ is your development URL.

Similarly for Firefox:

firefox -devtools -url http://localhost:8000/

(The executable name may differ across systems.)

Go Incognito During Development

Incognito/private mode does not retain data such as cookies and localStorage after the browser is closed. The mode is ideal for testing Progressive Web Apps (PWAs) and log-in systems.

You can start browsers in incognito mode manually or by adding --incognito to Chrome or -private to Firefox's command line.

It provides quick access to most functions and source files (hit backspace to remove the >).

Escape to the Console

The console is useful regardless of which DevTool panel you're using. Hit Esc to show and hide a console window in the bottom pane.

Find Page Colors

Most browsers show a color picker when you click any CSS color property. Chrome also shows the colors used in the page at the bottom of the panel:

The panel can be clicked to show further colors.

Color Contrast Accessibility

The color picker also shows the contrast ratio which indicates the visual difference between the foreground text and background color. Click the ratio to view how this rates against AA and AAA accessibility standards which ensure text can be read by most people:

Any color below the line on the color swash will pass AA contrast recommendations.

This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.

Website-building solutions have been around a long time. But a new generation has arrived. One that exploits new technologies like responsive and mobile platforms.

Today, you can build anything for a client or a business. Anything from a simple one-page site to a professional online store. You can do so without any need for HTML skills or design experience.

All that's necessary is to find the best website builder out there that will meet your needs, but that's no easy task. This article will save you the time it would take to search for the right solution.

Read on to discover the best and most popular options. The choice is yours to make. You really can't miss because whatever choice you make is bound to be a good one.

Elementor is the best website builder for WordPress. With over 2 million active installs worldwide, Elementor is extremely popular among web designers in the US, UK & Europe.

From beginners to high-end pros, Elementor lets you work in the most efficient way. Everything is WYSIWYG (Drag & Drop), and every element is fully customized. Basically, if you can imagine it, you can create it with Elementor. That's why it should be your weapon of choice.

No coding is needed! Of course, you can add code and take your website in any direction, however, you can do the magic directly from the design panel: Theme Builder, WooComerce Builder, Parallax, Pop-ups, Pixel perfect design, animation, let's keep it short you'll have everything inside, try it and see for yourself.

Why is it an absolute steal? You can do the design, development, and marketing simultaneously, saving production costs and time. It is all built into Elementor, and you will master it quickly.

The Mobirise website builder is offline, coding is not required, and it's free for both personal and commercial use. Since you're not tied to any platform your site is yours alone and can be hosted anywhere.

Everything with Mobirise is drag-and-drop, and since this website builder is based on the latest versions of Google AMP or Bootstrap4, your finished website will be lightning-fast and 100% mobile-friendly.

Portfoliobox is an online website-builder designed for creative professionals or anyone else looking to create an engaging, attention-getting portfolio. Portfoliobox is easy to work with, it's extremely flexible, it's not theme-based, and you can put in place a professional-looking portfolio in a few short hours.

Free and Pro Portfoliobox plans are available.

The free plan allows hosting of 50 images, 10 products, and 10 pages. With the pro plan you get a personalized domain, hosting for 1,000 images, and unlimited hosting for pages, products, and blog posts.

The 8b Online Website Builder is brand new, it features a super-simple futuristic UI, and you can use it on your desktop or work with it on your mobile device when you're away from home. 250+ website sections and 16 cool starter templates come with the package, and your site is guaranteed to be lightning-fast and 100% mobile-friendly.

8b was launched in February 2019 and is Free during this launch period.

WP Page Builder's real-time website building functionality coupled with its state of the art web design elements and a pleasing UI provides a page-building experience you're bound to enjoy to the fullest. You won't have any need for coding or developer skills, or even design skills since everything is drag and drop.

Anything you build with the aid of this supremely flexible tool will be 100% responsive and mobile ready.

Create classic data structures and algorithms such as depth-first and breadth-first search. You'll also learn about recursion, heap data structures using JavaScript, how to implement common data structures and more.

An introduction to working with components in Vue. We'll look at how to create components, how to pass data between components (via both props and an event bus) and how to use Vue’s <slot> element to render additional content within a component.

Learn how to work with forms in Vue. We’ll start off by creating a simple form and look at how to use two-way data binding to keep user input in sync with our data model. We’ll then take a look at modifiers and filters, and finish off with validation. Each section has a runnable CodePen demo.

In this tutorial, we’ll create our own link-sharing news site, much like Echo JS or Hacker News, complete with comments and upvoting. The tech stack we’ll be using consists of Vue.js, the Nuxt.js Vue framework, and an access-control/authorization library called vue-kindergarten.

We're releasing new content on SitePoint Premium almost every day, so we'll be back next week with the latest updates. And don't forget: if you haven't checked out our offering yet, take our 7 day free trial for a spin.

Design Thinking is the latest buzz phrase to have taken over the business and technology world. In seems like the phrase is popping up in nearly every context. A few years ago, Lean UX was all the rage, following a few years focused on the Lean Startup. A few years before that, every tech company I knew was rushing to implement Agile development processes. Experts like Lou Rosenfeld are already making predictions about what new approaches are coming next.

It’s not that any of these approaches have become less useful over time, but people are experimenting with new ways to build products and successful techniques to get attached to as “The Next Big Thing” that will prove to be a magical solution for everyone. The problem is that in the excitement of discussing something new, we don’t always connect the dots of our existing methods and people can be left confused as to how to best implement things all together.

Read on to better understand Design Thinking, Lean UX, and Agile, and how to implement elements of each for your team.

Before we get too far, let’s take a step back to understand each approach.

Agile

Let’s be clear: Agile is a software development approach. It was born out of frustration with traditional “waterfall” software practices, with a long period of upfront requirements gathering and design work, then a long development stage of implementing said designs but without the ability to understand or respond to changing needs. The outcome was that teams were spending a long time building things that people didn’t really want or need, and companies were struggling.

Software developers started experimenting with new ways to build, and came up with a set of shared values and principles to guide teams to do better work.

The Agile Alliance has also defined 12 detailed principles to follow, but does not prescribe any particular processes, so dev teams often end up using specific frameworks, like Scrum or Kanban, to help them figure out how to organize, plan, and execute their work. There’s a strong focus on teams’ independence to self organize, so no two Agile teams look the same, even within the same departments or organizations.

In theory, Agile approaches not only play well with UX practices, but actively require ongoing UX research to constantly understand the changing needs of the customers. However, in practice, teams can get caught up on trying to release more working code faster, and it can be hard to dedicate any time at all to conducting research or focusing on design decisions. Agile teams often struggle with how to best incorporate UX team members and their work into their practices.

Lean UX

Lean UX was born out of the struggle that so many teams had incorporating UX best practices as they adjusted their development processes to Agile methods and attempted to speed up time from idea to implementation. Lean UX is the umbrella term for altering traditional UX methods to fit faster timeframes, which often means shifting focus away from detailed deliverables.

But beware: you may also hear about Lean and Lean Startup, which often get conflated but do have specific meanings and distinct elements. Lean is derived from manufacturing best practices and focuses on general business and management practices to reduce waste and maximize value. Lean Startup is a broader business and product development approach that suggests incorporating periods of experimentation in order to reduce waste and risk. The terms aren’t mutually exclusive but nor are they interchangeable.

Back to Lean UX: the core idea is to alter traditional UX design methods to become faster. Rather than spending a lot of time thoroughly designing and documenting each element, the team is meant to quickly and collaboratively visualize ideas and gather feedback as soon as possible, from both other team members and stakeholders and the users.

Let’s say a team is working on integrating a new feature. The team might first have a quick whiteboarding session to flesh out the core workflow. Once the group agrees on a direction, they can show a low-fidelity design to users and incorporate the feedback found during a joint sketch session where they sort out more interaction details.

You’ll notice this example doesn’t have any fully functional prototypes or detailed test reports, but Lean UX isn’t an excuse to skip steps. Rather, it’s an invitation to do just enough to build a shared vision and get feedback, scaling up and back different tools or methods as it makes the most sense for your specific context.

Lean UX also doesn’t suggest you completely abandon documentation, nor that the experience decisions are taken away from UX professionals. Rather, it suggests that the whole team is involved with the design process so there are no surprises or unforeseen technical challenges. Feedback is collected early and often, and if changes need to be made, they can be done quickly and easily before much time has been invested in final designs.

Let's say your next project is going to be a simple HTML website for a resumé, marketing a product or service, documenting your software, or something along those lines. A great option for you is to build your website using static site generators (SSG).

There are tons of static site generators in a range of programming languages, such as JavaScript, Ruby, Go — the list goes on.

In this article, I'm going to list five popular static site generators and their main features, so that you can form a better idea of which one among them would be a good fit for your project.

I'm not claiming that I've provided the definitive list of SSGs or that I personally favor any of the software I include in my list over any other that's available out there. However, all of the products in the list are popular, performant, well-documented and well-supported.

What Is a Static Site Generator?

A common CMS (Content Management System), like WordPress for instance, builds the web page dynamically as it is being requested by the client: it assembles all the data from the database, and processes the content through a template engine.

On the other hand, a static site generator:

takes a different approach and generates all the pages of the website
once when there's actually changes to the site. This means there's no
moving parts in the deployed website. Caching gets much easier, performance goes up and static sites are far more secure. - StaticGen.

If you're curious and would like to learn more, this great article by Brian Rinaldi looks closely at the inner workings of static site generators.

We're working hard to keep you on the cutting edge of your field with SitePoint Premium. We've got plenty of new books and mini-books to check out in the library — let us introduce you to them.

Getting Started with Vuex: a Beginner’s Guide

Handling state in single-page apps can be a tricky process, especially as an application gets larger and more complex. In this tutorial, you'll discover how Vuex, Vue's state management solution, simplifies state management.

In this tutorial, we'll introduce you to the latest version of Vue CLI, the command-line utility that allows you to choose from a range of build tools, which it will then install and configure for you. We'll demonstrate how to install Vue CLI and how to create, serve and build an example project.

Build, design and launch professional websites with Squarespace quickly, without needing to learn any code. Discover time-saving tricks and best practices to avoid common pitfalls. And understand how to monitor, measure, and manage your site after launching it.

This book is part of a new partnership with Packt, which will allow you to read a range of Packt titles within our next-gen reader experience.

If you're curious about SitePoint Premium or have been on the fence about joining, you can now check out our entire library for free for 7 days! Go on, take it for a spin!

Earlier This Month...

We've published some big releases throughout February! Here are a few we prepared earlier…

Jump Start Vue.js

Get started with a JavaScript framework that boasts an approachable learning curve, powerful feature-set, and fantastic documentation. Covering the basics, tools, components, routing and more, this book will give you a jump start to using Vue.js.

Build feature-rich, reliable Android Pie apps with the help of more than 100 proven industry standard recipes and strategies. You'll find solutions for working with the user interfaces, multitouch gestures, location awareness, web services, and much more!

We're releasing new content on SitePoint Premium almost every day, so we'll be back next week with the latest updates. And don't forget: if you haven't checked out our offering yet, take our 7 day free trial for a spin.

JavaScript programs run on a single thread in the browser and in runtimes such as Node.js. When code is executing in a browser tab, everything else stops: menu commands, downloads, rendering, DOM updates and even GIF animations.

This is rarely evident to the user because processing occurs quickly in small chunks. For example: a button is clicked which raises an event that runs a function which makes a calculation and updates DOM. Once complete, the browser is free to handle the next item on the processing queue.

JavaScript code can’t wait for something to occur; imagine the frustration if an app froze every time it made an Ajax request. JavaScript code therefore operates using events and callbacks: a browser or OS-level process is instructed to call a specific function when an operation has completed and the result is ready.

In the following example, a handler function is executed when a button click event occurs which animates an element by applying a CSS class. When that animation completes, an anonymous callback removes the class:

The following pen shows an invader which uses a combination of CSS animation to move and JavaScript to wave the limbs. The image on the right is a basic animated GIF. Hit the write button with the default 100,000 sessionStorage operations:

DOM updates are blocked during this operation. The invader will halt or stutter in most browsers. The animated GIF animation will pause in some. Slower devices may show a “script unresponsive” warning.

This is a convoluted example, but it demonstrates how front-end performance can be affected by basic operations.

This article was created in partnership with Google AdSense. Thank you for supporting the partners who make SitePoint possible.

Effective websites build businesses. They raise your profile, strengthen your brand, and bring in new clients. They can also generate their own money, and the easiest way to get started is pay-per-click advertising.

If that sounds like a lot of work, it doesn’t have to be. And it doesn’t have to turn your site into a flashy billboard, either. Once set up, your site will continue to generate supplementary income—even while you sleep.

The sooner you get started, the quicker it will add up. So let’s get into it.

Why AdSense?

Google AdSense is the easy way to start monetizing your content. After a simple setup process, you have access to the world’s largest network of online advertisers, and you get paid for every click, whether that visitor converts to a sale or not.

“Let us grow your revenue while you focus on growing your business.” (The AdSense Team)

Because the ads are relevant and unobtrusive, you keep faith with your visitors. Google is focused on good user experience, not confusing or misleading the user. When you win, they win.

One of the best things about AdSense ads is that they follow all of Google’s rules on user experience, which means that they tend to be more unobtrusive, less flashy and (hopefully) more targeted than other banner and display advertising – their contextuality is a big plus as relevance is the main game here—the more relevant the ad the more likely you are to get paid. (Adsense and AdWords – why use them?)

How much will you make? That’s hard to say, and depends on the quality and uniqueness of your site’s content, the amount of traffic you get, and even the type of traffic. So keep working on your site and content.

Serious money may take thousands of visitors a day. But you don’t need to wait till then—see it as a work in progress. Make a start now, learn as you go, and track your progress over time.

Why Auto ads?

Auto ads make AdSense even easier to set up by using machine learning. Google intelligence does the work for you, choosing ads that will perform well, and placing them where they’ll have maximum effect.

This is a game changer, allowing you to add ads to your site in a simple way, and make incremental revenue from them without the cost of additional time and effort. It does requires handing control over to Google, who uses page crawling techniques to analyze and understand each page, so that the AI can adapt to improve ad performance.

And it works. During the beta test, participating publishers made on average 10% more revenue using Auto ads than they had been making on their own.

To get started, you just need to add a code snippet to each page you want ads on. After that you adjust the settings in your AdSense account by using the toggles to choose which ad formats are displayed, without ever having to edit the code.

Additionally, make sure you take advantage of Ad sizes optimization, a feature Google added in 2019. It automatically optimizes your fixed-size ads on mobile, taking into account the screen size and orientation of your visitor’s device.

Setting up your account

There’s an application process you’ll need to complete before you can use AdSense on your website. It’s simple, free, and only takes a minute or two. Approval may take a few days.