SitePoint – Learn HTML, CSS, JavaScript, PHP, Ruby & Responsive Design


SitePoint Premium New Releases: Node, Android, React Native & More

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. Mastering the Faster Web with PHP, MySQL, JavaScript Make data-driven web apps run faster with advanced PHP, SQL and JS techniques. Ensure seamless implementation of a JS-, HTML 5- and CSS-based front end and PHP-based back end. Learn about problem identification, best strategies, and UI design patterns as well to build a clean, fast web app. Read Mastering The Faster Web with PHP, MySQL, JavaScript. Learning Java by Building Android Games Second Edition Develop engaging games for the Android platform with Java. Learn Java, Android, and object-oriented programming from scratch. Build games including Sub Hunter, Retro Pong, and Bullet Hell. Create and design your own games, such as an open-world platform game. Read Learning Java by Building Android Games Second Edition. Internet of Things Programming Projects This book is a practical, project-based guide to help you build and control your IoT projects. Leverage the full potential of IoT with the combination of Raspberry Pi 3 and Python. Build complex, Python-based apps with IoT. Work on various IoT projects and understand the basics of electronics. Read Internet of Things Programming Projects. Real-Time 3D Graphics with WebGL 2 - Second Edition Create interactive, visually stunning, high-performance 3D applications for the web with JavaScript and WebGL 2. This complete course on 3D computer graphics covers rendering, 3D math, lighting, cameras, and more, unlocking a variety of new and advanced WebGL 2 features. Read Real-Time 3D Graphics with WebGL 2 - Second Edition. Android Programming for Beginners - Second Edition Through this first-principles introduction to Java, via Android, you'll learn all the Java and Android skills you need to start making powerful mobile apps with practical and actionable steps, and how to publish apps to the Google Play marketplace. Read Android Programming for Beginners Second Edition. Mastering React Native Get up to speed with all the React Native building blocks necessary for creating expert, cutting-edge apps. Learn how to apply Flexbox, build rich animations, integrate third-party libraries, develop customized components, combine React Native with Redux, Redux middleware, a remote API, and more. Read Mastering React Native. Vue.js: Tools & Skills In this book, we'll examine some of the most popular Vue,js tools, and look at some related skills that will help you on your journey to becoming an expert Vue developer. Read Vue.js: Tools & Skills. CSS Animation 101 We’re going to learn about CSS transitions and animations. By the end of the book, you’ll have a good understanding of CSS animations as well as the tools to create and experiment with our own. Read CSS Animation 101. How to Build a Game with Vue.js In this tutorial, we’ll explore one of the less obvious uses for Vue: game development,. We'll build an electronic variant of the popular Match Pairs game. Read How to Build a Game with Vue.js. Node.js Web Development Fourth Edition Create real-time apps with Node.js, Docker, MySQL, MongoDB, and Socket.IO. Learn about live deployment, including HTTPS and hardened security, the latest JS features and ES modules, and walk through different stages of developing robust apps using Node.js 10. Read Node.js Web Development Fourth Edition. And More to Come… 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. The post SitePoint Premium New Releases: Node, Android, React Native & More appeared first on SitePoint.

How to Build a News App with Ionic 4 & Angular

In this tutorial we'll be using Ionic 4 to build a news application that makes use of a third-party news API. Ionic 4 is the latest version of Ionic, a mobile framework originally built on top of Cordova and Angular. Ionic allows users to create hybrid mobile apps with HTML, CSS and JavaScript and their related web technologies. What makes Ionic 4 the best version yet is that it's now framework agnostic. This means it's not dependent on Angular anymore, and you you'll be able to use it with any framework or library you are familiar with, or with plain JavaScript. But at the time of this writing, Ionic CLI only supports generating Ionic projects based on Angular, so we'll be using an Angular/Ionic project to build our news application. See a hosted version of the application we'll be building and grab the source code from this GitHub repository. Prerequisites Let's get started with the prerequisites you need to be able to follow this tutorial comfortably. The post How to Build a News App with Ionic 4 & Angular appeared first on SitePoint.

JavaScript Web Workers: A Beginner’s Guide

In 2019, the web ecosystem has evolved to the point where the browser is an execution environment for applications built on JavaScript. This is reflected in the speed with which the industry comes up with new frameworks, paradigms, module loaders and bundlers, dependency managers, build tools, and package managers year after year. When JavaScript was conceived in the early days of the internet, the direction of web development was not clear. Due to the constant, rapid change in the industry and ecosystem, the need for backward-compatibility with browsers and web standards, the evolution of JavaScript became a constant stream of patches, hacks and afterthoughts. Today's mobile devices normally come with 8+ CPU cores, or 12+ GPU cores. Desktop and server CPUs have up to 16 cores, 32 threads, or more. In this environment, having a dominant programming or scripting environment that is single-threaded is a bottleneck. JavaScript Is Single-threaded This means that by design, JavaScript engines — originally browsers — have one main thread of execution, and, to put it simply, process or function B cannot be executed until process or function A is finished. A web page's UI is unresponsive to any other JavaScript processing while it is occupied with executing something — this is known as DOM blocking. The post JavaScript Web Workers: A Beginner’s Guide appeared first on SitePoint.

Cross Browser Testing Checklist Before Going Live

This article was originally published on LambdaTest. Thank you for supporting the partners who make SitePoint possible. When you develop a website, going live is like a dream come true. But then you notice things going wrong after launch and it quickly becomes a nightmare. A friend of mine was so excited as he was about to launch his new website. But when he finally hit the shiny launch button, some unusual and concerning trends started to popup. After delving into the details in Google Analytics, he found out that the website had a very high bounce rate on Mobile devices. The website was a mess on mobile devices, all the elements had left their places and the logo was not even fit to screen. That day taught him a valuable lesson, which he passed on to me, ‘Go through a checklist for cross browser testing before going live’. Cross browser testing is very necessary in this digital world where everyone is browsing the web on a different platform, OS, browser, and you can’t even think of that beforehand. Formulating a perfect cross browser testing strategy might help you in that but sometimes even after that you need to be prepared for some un-welcomed bugs. However, a proper checklist might help you avoid them or figure them out before anyone else does. A Few Pre-Requirements Before Going Through the Checklist Before going on to the checklist you need to make sure that you know how to perform cross browser testing. If you are going to perform cross browser tests, you need to know what browsers and devices you are going to test on. So, formulate a proper cross browser testing strategy. When you have your cross browser testing strategy, make sure you test your locally hosted website or dev site on cross browser testing tools like LambdaTest before going live. The platform has a feature called Lambda Tunnel that gives you the flexibility to connect your locally hosted websites or web apps to test in the cloud for cross browser testing using SSH tunnel. Cross browser compatibility and cross browser accessibility affects your website’s SEO as well therefore it’s always important to get it thoroughly tested and perfectly compatible for site indexing on search engines. Keep mobile devices handy, or you can also set up emulators or simulators. Or you can use a platform that can provide you all the devices you need, like LambdaTest which provides a wide range of iOS and Android mobile devices to test upon. Once done with the prerequisites, the next step is to go through the checklist. The Ultimate Checklist For Cross Browser Tests Before Going Live This helpful checklist will help you make sure you've dotted your i's and crossed your t's and tested all your various elements before going live in your local environment. Alignment of Elements in All Browsers Make sure that the elements are in the correct place that you intend them to be in. Verification of SSL in Various Browsers If you have faced this error, one of the reasons can be that your website’s SSL certificate doesn’t support some of the browser versions. If your user try to access your website those browser versions, then they might not be able to access it at all. So, check your website’s SSL certificates in all browsers before going live. Rendering of Font in Different Browsers Who don’t love beautiful fonts on their website, however they can cause blunders if they don’t render properly. Rendering of fonts is highly affected by the browser in which your site is being browsed. So, you need to make sure that your fonts render the same in every web browser. Read more on Fonts and Browser Compatibility. Compatibility of Media Elements with Diverse Browsers Videos are the most loved form of media nowadays. Web designers and developers have been taking advantage of the fact and you can easily find either a demo video or some tutorial video running on the homepage of a website. But browser compatibility can cause you trouble if you some use unsupported media elements and that’s not restricted just to videos, but to images as well. So before going live make sure that you use those elements that are supported in all browsers or you have a fallback for unsupported elements so that your users don’t face this! Understand Multimedia compatibility with Different Browsers in detail in here. The post Cross Browser Testing Checklist Before Going Live appeared first on SitePoint.

How to Use Selenium WebDriver for Cross Browser Testing

This article was originally published on LambdaTest. Thank you for supporting the partners who make SitePoint possible. Selenium is a popular automation testing framework that is primarily used for cross browser testing. It is open source and is ideal for automating testing of web applications across different browsers like Firefox, Chrome, Internet Explorer, and Microsoft Edge. Selenium has become a renowned framework and is giving stiff competition to other test frameworks such as HP QTP (Quick Test Professional) and AKA HP UFT (Unified Functional Testing). This tutorial for Selenium WebDriver will help you develop a basic understanding of the components of the Selenium suite, the Selenium WebDriver architecture and will show you how to run automation to test a website for cross browser compatibility using Selenium WebDriver for Google Chrome, Mozilla Firefox and Internet Explorer. Selenium is a combination of different tools and each tool plays a critical role in automating web testing. Let’s dive into the WebDriver tutorial. The post How to Use Selenium WebDriver for Cross Browser Testing appeared first on SitePoint.

How to Conditionally Apply a CSS Class in Vue.js

There are times you need to change an element’s CSS classes at runtime. But when changing classes, it’s sometimes best to apply style details conditionally. For example, imagine your view has a pager. Pagers are often used to navigate larger sets of items. When navigating, it can be helpful to show the user the page they’re currently on. The style of the item is conditionally set, based on the current page that’s being viewed. A pager in this case may look something like this: In this example, there are five pages. Only one of these pages is selected at a time. If you built this pager with Bootstrap, the selected page would have a CSS class named active applied. You’d want this class applied only if the page was the currently viewed page. In other words, you’d want to conditionally apply the active CSS class. Luckily, Vue provides a way to conditionally apply a CSS class to an element, which I’m going to demonstrate in this article. To conditionally apply a CSS class at runtime, you can bind to a JavaScript object. To successfully complete this task, you must complete two steps. First, you must ensure that your CSS class is defined. Then, you create the class bindings in your template. I’m going to explain each of these steps in detail in the rest of this article. Step 1: Define Your CSS Classes Imagine, for a moment, that the five page items shown in the image above were defined using the following HTML: <div id="myApp"> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item active"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> </ul> </nav> </div> Notice that each page in this code snippet has a list-item element (<li …). That element references the page-item CSS class. In the code for this article, this class is defined in the Bootstrap CSS framework. However, if it weren’t defined there, it would be your responsibility to ensure that it was defined somewhere. The second CSS class is the one that’s most relevant to this article, though. The active CSS class is used to identify the currently selected page. For this article, this CSS class is also defined in the Bootstrap CSS. As shown in the snippet above, the active class is only used in the third list item element. As you can probably guess, this is the CSS class that you want to apply conditionally. To do that, you need to add a JavaScript object. The post How to Conditionally Apply a CSS Class in Vue.js appeared first on SitePoint.

SitePoint Premium New Releases: DevOps Security, jQuery & Vue Projects

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. Learning jQuery 3 Fifth Edition A step-by-step, practical tutorial on creating efficient and smart web apps and high-performance interactive pages with jQuery 3.0. Create a fully featured and responsive client-side app using jQuery. Explore jQuery 3.0 features and code examples updated to reflect modern JS environments. Read Learning jQuery 3 Fifth Edition. How to Develop and Test Vue Components with Storybook Learn Storybook, an interactive environment for developing and testing UI components. It allows you to build components and play with them in isolation from the app that you're building. Read How to Develop and Test Vue Components with Storybook. Build a Shopping List App with Vue, Vuex and Bootstrap Vue Build a simple shopping list app using Vue, Vuex and Bootstrap. Along the way, you'll discover how Vue's official state management solution can help you manage state throughout your app as it grows. Read Build a Shopping List App with Vue, Vuex and Bootstrap Vue. Hands-On Security in DevOps Protect your organization's security at all levels with the latest strategies for securing DevOps at each layer of the pipeline. Discover security practices to protect your cloud services by detecting fraud and intrusion. Explore solutions to infrastructure security using DevOps principles. Read Hands-On Security in DevOps. Building a Vue Front End for a Headless CMS Learn how to build a modern blog site using Vue.js and GraphCMS, a headless CMS platform that delivers content via GraphQL, for a faster and more customizable website than using WordPress. Read Building a Vue Front End for a Headless CMS. A New Library Interface If you're a Premium member, take our new library for a spin. We've launched a cleaner, faster library interface that makes tracking and resuming your current books much quicker. And More to Come… 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. The post SitePoint Premium New Releases: DevOps Security, jQuery & Vue Projects appeared first on SitePoint.

The Difference Between Computed Properties, Methods and Watchers in Vue

For those starting out learning Vue, there’s a bit of confusion over the difference between methods, computed properties and watchers. Even though it’s often possible to use each of them to accomplish more or less the same thing, it’s important to know where each outshines the others. In this quick tip, we’ll look at these three important aspects of a Vue application and their use cases. We’ll do this by building the same search component using each of these three approaches. Methods A method is more or less what you’d expect — a function that’s a property of an object. You use methods to react to events which happen in the DOM, or you can call them from elsewhere within your component — for example, from within a computed property or watcher. Methods are used to group common functionality — for example, to handle a form submission, or to build a reusable feature such as making an Ajax request. You create a method in a Vue instance, inside the methods object: new Vue({ el: "#app", methods: { handleSubmit() {} } }) And when you want to make use of it in your template, you do something like this: <div id="app"> <button @click="handleSubmit"> Submit </button> </div> We use the v-on directive to attach the event handler to our DOM element, which can also be abbreviated to an @ sign. The handleSubmit method will now get called each time the button is clicked. For instances when you want to pass an argument that will be needed in the body of the method, you can do this: <div id="app"> <button @click="handleSubmit(event)"> Submit </button> </div> Here we’re passing an event object which, for example, would allow us to prevent the browser’s default action in the case of a form submission. However, as we’re using a directive to attach the event, we can make use of a modifier to achieve the same thing more elegantly: @click.stop="handleSubmit". Now let’s see an example of using a method to filter a list of data in an array. In the demo, we want to render a list of data and a search box. The data rendered changes whenever a user enters a value in the search box. The template will look like this: <div id="app"> <h2>Language Search</h2> <div class="form-group"> <input type="text" v-model="input" @keyup="handleSearch" placeholder="Enter language" class="form-control" /> </div> <ul v-for="(item, index) in languages" class="list-group"> <li class="list-group-item" :key="item">{{ item }}</li> </ul> </div> As you can see, we’re referencing a handleSearch method, which is called every time the user types something into our search field. We need to create the method and data: new Vue({ el: '#app', data() { return { input: '', languages: [] } }, methods: { handleSearch() { this.languages = [ 'JavaScript', 'Ruby', 'Scala', 'Python', 'Java', 'Kotlin', 'Elixir' ].filter(item => item.toLowerCase().includes(this.input.toLowerCase())) } }, created() { this.handleSearch() } }) The handleSearch method uses the value of the input field to update the items that are listed. One thing to note is that within the methods object, there’s no need to reference the method with this.handleSearch (as you’d have to do in React). See the Pen Vue Methods by SitePoint (@SitePoint) on CodePen. The post The Difference Between Computed Properties, Methods and Watchers in Vue appeared first on SitePoint.

Get Started Writing Class-based Vue.js Apps in TypeScript

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. The post Get Started Writing Class-based Vue.js Apps in TypeScript appeared first on SitePoint.

Getting Started with Natural Language Processing in Python

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. The post Getting Started with Natural Language Processing in Python appeared first on SitePoint.

Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps

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). Nuxt.js also uses webpack with vue-loader and babel-loader to bundle, code-split and minify code. How it works This is what happens when a user visits a Nuxt.js app or navigates to one of its pages via <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. If the route being visited is a dynamic route, and a validate() method exists for it, the route is validated. Then, Nuxt.js calls the asyncData() and fetch() methods to load data before rendering the page. The asyncData() method is used for fetching data and rendering it on the server-side, while the fetch() method is used to fill the store before rendering the page. At the final step, the page (containing all the proper data) is rendered. These actions are portrayed properly in this schema, gotten from the Nuxt docs: Creating A Serverless Static Site With Nuxt.js Let’s get our hands dirty with some code and create a simple static generated blog with Nuxt.js. We’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: // ./nuxt.config.js module.exports = { /* * Headers of the page */ head: { titleTemplate: '%s | Awesome JS SSR Blog', // ... link: [ // ... { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css' } ] }, // ... } In the above config file, we simply specify the title template to be used for the application via the titleTemplate option. Setting the title option in the individual pages or layouts will inject the title value into the %s placeholder in titleTemplate before being rendered. We also pulled in my current CSS framework of choice, Bulma, to take advantage of some preset styling. This was done via the link option. Note: Nuxt.js uses vue-meta to update the headers and HTML attributes of our apps. So you can take a look at it for a better understanding of how the headers are being set. Now we can take the next couple of steps by adding our blog’s pages and functionalities. The post Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps appeared first on SitePoint.

How to Replace jQuery with Vue

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: <tr class="item"> <td><input value="" /></td> <td>$<input type="number" value="0" /></td> <td><input type="number" value="1" /></td> <td>$0.00</td> </tr> jQuery So, first of all, let’s take a look at how we might do this with jQuery. $('table').on('mouseup keyup', 'input[type=number]', calculateTotals); We’re attaching a listener to the table itself, which will execute the calculateTotals function when either the Unit Cost or Quantity values are changed: function calculateTotals() { const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get(); const total = subtotals.reduce((a, v) => a + Number(v), 0); $('.total td:eq(1)').text(formatAsCurrency(total)); } 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. function calculateSubtotal(row) { const $row = $(row); const inputs = $row.find('input'); const subtotal = inputs[1].value * inputs[2].value; $row.find('td:last').text(formatAsCurrency(subtotal)); return subtotal; } In the code above, we’re grabbing a reference to all the <input>s in the row and multiplying the 2nd and 3rd together to get the subtotal. This value is then inserted into the last cell in the row. function formatAsCurrency(amount) { return `$${Number(amount).toFixed(2)}`; } We’ve also got a little helper function that we use to make sure both the subtotals and the total are formatted to two decimal places and prefixed with a currency symbol. $('.btn-add-row').on('click', () => { const $lastRow = $('.item:last'); const $newRow = $lastRow.clone(); $newRow.find('input').val(''); $newRow.find('td:last').text('$0.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); }); 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. Here’s the completed jQuery demo: See the Pen jQuery Invoice by SitePoint (@SitePoint) on CodePen. The post How to Replace jQuery with Vue appeared first on SitePoint.

SitePoint Premium New Releases: Swift, Icon Design, and Vue

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. Hands-On Full-Stack Development with Swift - Packt Build full-stack shopping list apps from scratch for web and mobile platforms using Xcode, Vapor, and Swift. Increase developer productivity by creating reusable client and server components. Develop back-end services for your apps and websites using Vapor framework. Read Hands-On Full-Stack Development with Swift. An Introduction to Data Visualization with Vue and D3.js 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. Read An Introduction to Data Visualization with Vue and D3.js. The Icon Handbook 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. Read The Icon Handbook. How to Build a Reusable Component with Vue 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. Read How to Build a Reusable Component with Vue. Build a Basic CRUD App with Vue.js, Node and MongoDB In this tutorial, you'll learn how to build a simple CRUD app, a tool to help students of a foreign language learn vocabulary, using Node, MongoDB and Vue. Read Build a Basic CRUD App with Vue.js, Node and MongoDB. And More to Come… 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. The post SitePoint Premium New Releases: Swift, Icon Design, and Vue appeared first on SitePoint.

React Hooks: How to Get Started & Build Your Own

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: Modern JavaScript - ES6 Getting started with React I won't cover how to create a new React project or other beginner-level skills. You should be able to follow this guide easily. You can access the completed project on GitHub. The post React Hooks: How to Get Started & Build Your Own appeared first on SitePoint.

Create an Automated Scoreboard that Senses Your Score with a Raspberry Pi

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! A MicroSD card with NOOBS — if you are looking to install this yourself and have an SD card ready to go Raspberry Pi foundation have a guide on how to do so here. Spalding NBA Slam Jam Over-The-Door Mini Basketball Hoop — This is the mini basketball hoop I used. You could use a different one — especially if its net works better! Raspberry Pi 3.3190G 7" Touchscreen Display — This is my favourite display for the Raspberry Pi, it is a touchscreen, so you can interact with the UI without needing to connect up a mouse. RS Raspberry Pi 7-Inch LCD Touch Screen Case, Black — To make the display look a bit nicer when all together with the Pi, I have my Pi in this black case. HC-SR04 Ultrasonic Distance Measuring Sensor Module — I had a spare cheap clone HC-SR04 sensor around, but I'd recommend buying a good quality one. My one has occasional odd readings and is a bit temperamental. 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! The Code Want to skip to downloading the code? It's available on GitHub here. What I put together 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. [caption id="attachment_171361" align="aligncenter" width="1024"] Me testing out my connected scoreboard — with a customised Suns themed interface![/caption] 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: Official instructions — these are the instructions which come with the screen in case you lose them! The Pi Hut have their own tutorial — they explain the details of the process too. ZDNet's look at the touch display with case — they've got a good amount of detail and tips for setting up the screen and case to use in various situations. Case setup 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: sudo su - apt-get remove nodered -y apt-get remove nodejs nodejs-legacy -y apt-get remove npm -y curl -sL https://deb.nodesource.com/setup_5.x | sudo bash - apt-get install nodejs -y After running all of those, if you type in that version command again, you should see a better version: node -v You can also check npm is installed correctly by running: npm -v With node running on our device, we're ready to get a scoreboard Node server running! The post Create an Automated Scoreboard that Senses Your Score with a Raspberry Pi appeared first on SitePoint.

Looking for the Perfect UX/UI Tools? Check Out These Great Ones

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. Let's look at several of the best. 1. Mason 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. 2. UXPin 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. 3. Interfacer 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. 4. Webflow 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. The post Looking for the Perfect UX/UI Tools? Check Out These Great Ones appeared first on SitePoint.

10 Must-have VS Code Extensions for JavaScript Developers

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. The post 10 Must-have VS Code Extensions for JavaScript Developers appeared first on SitePoint.

15 Top Prototyping Tools Go Head-to-Head

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. Plus, there’s now a clear divide between desktop tools with cloud sharing (Adobe XD, Axure, Balsamiq, Sketch+InVision) and collaborative online tools (Figma, UXPin, Fluid UI, Proto.io). Many of these tools appear to be converging on a feature set that defines the role of the modern user experience designer. TL;DR—here’s a swift comparison of prototyping tools. Adobe XD Adobe may have been caught napping during the rise of Sketch, but they’re rapidly making up for it with Adobe XD. Launched in March 2016, and still in beta as of July 2017, it’s the latest addition to Adobe’s Creative Cloud Suite. While you can prototype interactions in Sketch with the help of the Craft Plugin, Adobe XD impressively offers these tools right out of the box, so designers are already comparing Adobe XD to Sketch like longtime rivals. It’s definitely worth a look if you’re interested in a tool that covers all your bases (low-fidelity prototyping, high-fidelity prototyping, user flows, sharing and feedback) in a single app. Strengths Available for macOS and Windows Everything you need in a single app Weaknesses Still in beta (although pleasantly mature as a design app) Plugin workflow non-existent, you’re locked into the Adobe ecosystem InVision App (with Sketch and Craft) InVision App is the largest and most successful design collaboration tool currently on the market, the primary go-to tool for serious designers and enterprise teams alike. With tools like whiteboard collaboration, dynamic prototyping, comments, device preview, video calling, user testing, version control and design handoff, InVision is already a colossal force in the prototyping space, but when you factor in its Sketch and Photoshop integrations, it becomes an all-in-one design suite, especially when you throw in Craft, the Sketch/Photoshop Plugin that brings a lot of that functionality directly into your design app of choice. Strengths Powerful, mature platform Fully-integrated with Sketch for high-fidelity design Constantly being updated with new features Weaknesses Feature-set can be a little overwhelming at first Sketch is only available for macOS users only (but you can pair InVision with Photoshop on Windows, although Photoshop isn’t strictly a UI design tool) Marvel App A very strong favourite for those looking for simpler, friendlier alternatives to InVision App. Marvel App has excelled at creating a prototyping tool that works for both advanced UX designers and those simply looking to communicate high and low fidelity concepts. Plus, while they champion working with Sketch, they also offer component libraries to allow for a complete online workflow in Marvel. Marvel App also recently integrated fan-favourite POP, which allows designers to transform their pen/paper ideas into iPhone and Android apps. Strengths Great support for transitions for additional realism Friendlier for non-designers, especially when giving feedback Weaknesses Web based only No offline designing UXPin UXPin is the most complete online solution for UX designers in terms of their offering. While you can import from Sketch and Photoshop, you can also design complex and responsive interfaces with UXPin’s built-in libraries, making UXPin something of a wireframing tool as well. With their design systems features, UXPin becomes one of the most complex tools in terms of automated documentation, designer/developer handoffs and collaborative features. Strengths Responsive design with breakpoints Powerful animations (not just linking screens) Complete design collaboration and handoff solution Weaknesses A little pricey versus the competition at $49/user/month Additional features increase the complexity of use Webflow Webflow is a visual tool for designing responsive websites that also exports clean code—it removes the headache of going from design to published on the web. Competing as much with WordPress as it does with Sketch App, Webflow lets you design fully functional responsive websites incorporating back-end (API) data and can automatically deploy to fully scalable, worry-free hosting with a single click of a button. It’s basically Adobe Dreamweaver for the modern-day designer who cares about clean code and mobile-friendly web design. Strengths Real data can be included (from APIs/JSON/etc) Creates high-quality, reusable code Responsive websites can be designed and deployed with ease Weaknesses Not useful for designing native mobile apps Requires some knowledge of HTML/CSS to be at its most effective Figma A somewhat recent addition to the prototyping space, Figma boasts the most mesmerising real-time design collaboration features of any prototyping tool while modelling its feature-set on many of the intuitive design tools of Sketch and Adobe XD (such as symbols and device preview), along with a bunch of tools usually reserved for the online crowd (such as versioning and design handoff). Version 2.0, launched in July 2017, includes a prototyping mode with hotspots and developer handoffs to further streamline the design workflow. It works in the browser, on macOS, and on WIndows, although it sometimes can be slow. Strengths Real-time collaborative design features are second-to-none Fully-featured, ideal for designers from start to finish Weaknesses Figma can can be laggy at time, especially with real-time collaboration 9 More Prototyping Tools Worth Considering Fluid UI With a strong focus on simplicity and communication, Fluid UI includes built-in high and low fidelity component libraries, live team collaboration, device previews and video presentations making it a top-notch solution for designers, product managers and founders alike. Proto.io Mature and feature-rich, Proto.io is best used by designers looking to create high-fidelity and highly-animated prototypes in the browser. Axure RP 8 Established way back in 2003, Axure is an excellent choice for UX designers who need to create specifications for designs and animations in supreme detail. Axure’s includes support for conditional flow interactions, dynamic content and adaptive/responsive design, as well as high and low-fidelity prototyping. Axure is a serious tool for serious designers. The post 15 Top Prototyping Tools Go Head-to-Head appeared first on SitePoint.

SitePoint Premium New Releases: Vue Projects, Django & Isomorphic Go

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. Read Build a Real-time Chat App with Pusher and Vue.js. Django Design Patterns and Best Practices Second Edition - Packt 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. Read Django Design Patterns and Best Practices Second Edition. Creating Beautiful Charts Using Vue.js Wrappers for Chart.js Learn how to represent data in the form of various types of chart with the help of Chart.js and Vue.js. Read Creating Beautiful Charts Using Vue.js Wrappers for Chart.js. Isomorphic Go 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. Read Isomorphic Go. How to Build a Chrome Extension with Vue Learn how to build a simple extension for Chrome. For the JavaScript part of the extension, we'll be using Vue. Read How to Build a Chrome Extension with Vue. And More to Come… 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. The post SitePoint Premium New Releases: Vue Projects, Django & Isomorphic Go appeared first on SitePoint.

How User Research Turned a Good App into a Great One

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. The post How User Research Turned a Good App into a Great One appeared first on SitePoint.