5 Ways to Get Started with Machine Learning

Machine learning has taken off and it’s doing so with fury, bringing new insights to every single industry. If you want to be in demand, this is a skill that will put you in the front line. As intimidating as it may seem, it’s surprisingly easy if you approach it the right way.

Machine learning (ML) is a fascinating practice and field of study. It’s what allowed the introduction of self-driven cars, of robots that can clean your house, the navigation system of drones of all kinds, the recommendation system behind YouTube and Netflix, face recognition systems, hand written recognition, game playing, and lots more.

And because of its incredibly high value and somewhat cryptic nature, it’s an expertise in very high demand that keeps expanding to different areas — which just five years ago would have seemed inconceivable. Through this article, we’ll see different practical ways to approach it.

machine learning code

“Pardon Me … but What is Machine Learning?”

ML is a branch of artificial intelligence (AI). As Arthur Samuel — one of the pioneers in the field — put it, ML gives “computers the ability to learn without being explicitly programmed”. That is, instead of programming a computer (or robot) to do something, you give information and set the framework to let the system program itself.

Freaking fascinating? Yes, but we won’t get into the details of this seemingly impossible thing here, but instead point you to the right places where you’ll be able to find that for yourself.

Before Starting, a Word of Caution

ML is something of an advanced practice, and you’ll need to have not only some foundations in computer sciences, but also be able to code in at least one programming language. Some popular programming languages for ML are Python, R, Java, C, and MATLAB, among others.

1. Start Very Quickly … Like, Really, in Less than Ten Minutes

Sometimes, and for some people, it’s better to just get hands on into something to have a first taste and develop an intuition of what this new art or skill is about, and then dig deeper into some specifics and details.

Google’s Machine Learning Recipes with Josh Gordon is just that — a straightforward and practical approach to ML. Using the Python scikit-learn and TensorFlow libraries, Josh will walk you through very practical examples and down-to-earth explanations behind the very principles of ML.

Here’s the first 7-minute video of the series, introducing a supervised learning algorithm in Python — in just six lines of code!:

The publishing schedule is somewhat irregular, with videos published every month or second month, covering topics such as decision trees, feature selection, pipelines, classifiers: not bad at all for 6-to-8 minute videos that anyone with a little foundation in programming can follow.

2. Take Courses from Top-Notch Universities, for Free

If you’re hungry for quality knowledge, you may have heard by now about Coursera, edX, Udacity, and many, many others. We’re talking MOOCs, or massive open online courses.

Let’s break it down quickly:

  • massive: they have no vacancy limits, and can be accessed by as many people as desired.
  • open: anyone can access them, regardless of their age and previous knowledge on the topic, and independently if they’re able to pay for a certification or not.
  • online: all you need is a device connected to the Internet; even a mobile phone would do.
  • course: these are actual courses with reading materials, practical exercises, and even deadlines.

Let’s see some courses you could start with.

Stanford’s Andrew Ng Machine Learning

Stanford Prof. Ng is a leading researcher on the field of artificial intelligence, and is the person who pretty much started the MOOC spark that would later turn into a fire of knowledge when he first put his Machine Learning online course. The response was overwhelming, with many thousands of people from all around the world taking the course and discussing this topic. He later turned this course into what it is today Coursera, the leading provider of MOOCs.

The course is as fabulous as it is challenging. I remember having spent an hour or so just to read a 5-page assignment scope before I was able to grasp it. So unlike Josh Gordon’s series, this is a little more on the academic side, but with a lot of practical knowledge and advice that will be very useful later on in your ML practices. But it is doable, and the amount of feedback on the forums is truly overwhelming. Mind you, it was among the first MOOCs I ever took, and one of the best.

Course details:

  • Approx. duration: 2–5 months
  • Difficulty: high
  • Workload: mid-to-heavy

Sebastian Thrun’s Intro to Artificial Intelligence

Also a professor and AI researcher at Stanford (on the field of robotics), co-founder of Google X Lab (the “semi-secret” R&D company behind of Google’s self-driven cars, among other projects), Sebastian is also the founder of a mayor MOOC provider, Udacity. Along with Peter Norvig (Director of Research at Google), he put together the amazing Intro to Artificial Intelligence.

This is pretty much the foundation to all things ML. It’s a lot lighter than Andrew’s course, with its content spread over more units to make it easier to digest, though it’s a long one.

Course details:

  • Approx. duration: 4 months
  • Difficulty: intermediate
  • Workload: light

Caltec’s Yaser S. Abu-Mostafa Learning from Data

Prof. Yaser is another of the pioneers of putting quality learning material online, making available his Learning from Data ML course on his website, with all of its lectures, learning materials and exams, even before MOOCs were a thing. Later he would package these materials into a MOOC offered regularly by Caltech on edX.

I took this one as well, and I can tell you that you’ll have to do some heavy lifting here. But if you’ve enjoyed Andrew’s course and are hungry for more foundations, this seems like a reasonable next step.

Course details:

  • Approx. duration: 4 months
  • Difficulty: very high
  • Workload: very heavy (10–20 hours per week)

Other Coursera, edX and Udacity Courses

There’s a very extensive offering of ML and AI courses that you can take for free, not only at Coursera, edX, and Udacity, but at other MOOC providers as well, such as Data Camp — though data science seems to be something of a niche for the three providers we’ve discussed.

3. Get Certified Education, for a Fraction of the Price

So far, we’ve talked free MOOCs. They’re awesome, and you don’t need to pay a cent to enroll in them and start learning. In the beginning, these providers used to offer free certificates or statements of accomplishments, even some of them verifiable online. These programs, however, have been discontinued, so in most cases you won’t get a certificate or any type of credential that you could use to demonstrate your education to a potential employer, or even to another higher education institution.

This may not be a problem if you just want to learn for the sake of it, and even use this knowledge to leverage a successful career as a freelancer, as many professionals already do around the globe. But applying for work can be a different matter, and certs and degrees do ease the way in many cases, so let’s discuss them.

Verified Courses

A verified course might be somewhere between $40–$200, depending on the course and the institution. Basically, you pay a premium to get your identity and assignments verified (this is what a verified certificate looks like.) You can find more about Coursera’s Course Certificates and edX’s Verified Certificates. You’ll find they both have a huge offering of ML and data-science–related verified courses, as you can see on this edX search.

Notice that, whether you pay or not, the contents and materials of the course are exactly the same. What you get by paying is the certification that you actually took and passed the course.

Coursera Specializations

Coursera took the concept of verified courses a step forward by grouping some related courses and adding a capstone project to give you a specialization certificate.

Some specializations of interest to us are:

specialization courses institution
Big Data 6 UC San Diego
Deep Learning 5 deeplearning.ai
Machine Learning 4 University of Washington
Recommender Systems 5 University of Minnesota
Introduction to Robotics 6 University of Pennsylvania
Probabilistic Graphical Models (PGMs) 3 Stanford University

Coursera Master’s Degree

Coursera’s Master of Computer Science in Data Science (MCS-DS) is an actual, official master’s degree issued by an accredited university. Topics in the program are heavily ML-related, and include:

  • data visualization
  • machine learning
  • data mining
  • cloud computing
  • statistics
  • information science

Course details:

  • Institution: University of Illinois at Urbana-Champaign
  • Price: $600 per credit-hour for a $19,200 in total tuition
  • Duration: 32 hours

edX XSeries and Professional Certificates

edX has an XSeries Program for courses within a single topic, in pretty much the same fashion as Coursera’s Specializations. Such series of interest to us include:

series courses institution cost
Microsoft Azure HDInsight Big Data Analyst 3 Microsoft $49–99 per course
Genomics Data Analysis 3 Harvard University $132.30
Data Analysis for Life Sciences 4 Harvard University $221.40
Data Science and Engineering with Spark 3 UC Berkeley $49–99 per course

edX also has Professional Certificate Programs for “critical skills,” including Data Science and Big Data, both offered by Microsoft.

edX MicroMasters and College Credit

You also have credit-eligible courses, which are not only verified, but may also serve you to claim for credit towards your B.S. or master’s degree. There are, naturally, a lot of details in the fine print, so you’ll have to do some extra research.

edX MicroMasters are precisely in this vein. Here are some interesting ones (costs are higher here, as you also pay hours of tuition towards a degree):

program courses institution cost
Artificial Intelligence 4 Columbia University $1,200
Big Data 5 University of Adelaide $1,215
Data Science 4 UC San Diego $1,260
Robotics 4 University of Pennsylvania $1,256

Find out more to earn university credit on edX, and read the MOOCs for Credit report by Class Central.

Udacity’s Nanodegrees

A nanodegree is something of degree, issued by Udacity. While Udacity isn’t itself an accredited educational institution, they went to great lengths to partner with tech industry leaders to deliver the most market-targeted education possible — in other words, to prepare you specifically with the skills that the labor market is demanding right now.

And we’re really talking big names, here: Google, Amazon, IBM, Nvidia, Mercedes-Benz, DiDi, AT&T, among many others. And Udacity’s partners not only co-design the study programs, but even have hiring agreements with Udacity!

Udacity and their partners even go as far as to publish estimated salary figures:

program time estimated salary
Artificial Intelligence 6 months $59.4K to $250K
Deep Learning TBD TBD
Machine Learning 6 months $38.7K to $212K
Robotics two 3-month terms $42k to $156k
Self-Driving Car 9 months $67.8K to $265K

Get a job or your money back!

In fact, the ML nanodegree is part of the Nanodegree Plus program, which is probably one of the most reckless innovations in online learning: you study and graduate, and if you don’t get a high paying job, Udacity refunds your tuition! Unbelievable.

Continue reading %5 Ways to Get Started with Machine Learning%

Source: Sitepoint

Set Up a React Environment, Part 4

React has been known in the past for being difficult to get started creating apps, as you really had to understand how to configure build tools manually. This is even before you write a single line of React code.

The create-react-app tool helps with this issue tremendously as it allows anyone to create a full working React app without requiring any knowledge of how to configure the build tools. The reality is that create-react-app will be fine for most apps, especially if you’re new to React.

As you gain more experience with React, you might have certain requirements for your apps that need custom configuration of the setup files. In this case, you’d need to be able to set up React build tools manually, as create-react-app hides these from you by default.

In this tutorial I’ll show you how to set up a React app by manually configuring build tools as we go. This will hopefully give you the confidence to go on and experiment with more complex setups.

Although it may seem a little daunting in the beginning, you’ll enjoy all the benefits of having total control over every single configuration setting. And you can decide exactly which tools get included in your app, which may vary from project to project. This approach also allows you to easily incorporate new build tools as they come along (which they do frequently).

Are you ready to create your first React app completely from scratch? Let’s do it.

Create the App File Structure

To demonstrate how to set up a React app via manual configuration of the build tools, we’ll be building the same, very simple, React app from previous tutorials in this series.

Start by creating a folder called my-first-components-build, and then open a command-line window pointing to this folder.

Type npm init to create a package.json file. This file will contain all the information about the tools used to build your app, plus associated settings. Accept all the default settings and just keep hitting Enter (around ten times) until complete.

If you accepted all the defaults, package.json will look like this:

We now need to add the React and ReactDOM scripts to our project. We’ll do this via npm, the package manager for Node.js.

Inside the same command-line directory, enter:

This installs both React and ReactDom, plus any dependencies required by those two modules. You’ll notice we now have a new node_modules directory which is where the modules have been added to.

Node modules folder

If you take a look at the package.json file, a new dependencies property has been added containing information about the node modules we installed.

This happened because we specified the --save option in our npm install command. This notified npm that we wanted to keep track of our installed project dependencies. This is important if we want to share our project.

Typically, because the node_modules folder is so large, you don’t want to try to share this directly. Instead, you share your project without the node_modules folder. Then, when someone downloads your project, all they have to do is type npm install to duplicate the setup directly from package.json.

Note: In npm 5.x, installed modules are automatically saved to package.json. You no longer have to manually specify the --save option.

Inside the my-first-components-build folder, create a new src folder, and add an index.js file to it. We’ll come back to this later as we start to create our React app, once we’ve configured the project setup files.

Add an index.html file inside the same folder with the following code:

We want to be able to compile our app down to a single JavaScript file, and also make use of JSX and ES6 classes and modules. To do this, we need to install Webpack and Babel modules via npm.

Let’s install Babel first. Type the following into the command-line window:

This installs all of the modules needed for Babel to compile ES6 and JSX code down to standard JavaScript.

Now, let’s install Webpack, again via the command line:

This installs all of the modules needed for Webpack, a local web server, and enables us to direct Webpack to create a dynamic index.html file in the public folder based on the one we added to the src folder. We can also add a dynamic reference to the bundled JavaScript file inside the HTML file every time the app is built.

After these new modules have been installed, your package.json file will now look like this:

This time, though, the Webpack and Babel dependencies are saved to package.json as dev dependencies.

This means these particular modules are needed during the development (i.e. build) phase of the app. On the other hand, the dependencies (such as React, and ReactDOM) are required during runtime, and so will be included directly along with our custom app code.

Webpack Configuration

To get Webpack to build our app and bundle it into a single file, we need to configure settings. Inside your root app folder, create webpack.config.js, which is used to store Webpack specific build settings.

We need Webpack to do three things:

  • Compile ES6/JSX code to JavaScript (via Babel).
  • Build our app, and bundle into a single JavaScript file.
  • Create an index.html file, and inside add a reference to our bundled JavaScript file.

Inside webpack.config.js, add:

Don’t worry too much about the syntax used here; just understand the overview of what’s going on.

All we’re doing is exporting a JavaScript object with certain properties that control how Webpack builds our app. The entry property specifies the starting point of our React app, which is index.js. Next, the output property defines the output path, and filename, of the bundled JavaScript file.

As for the build process itself, we want Webpack to pass all JavaScript files through the Babel compiler to transform JSX/ES6 to standard JavaScript. We do this via the module property. It simply specifies a regular expression that runs Babel transformations only for JavaScript files.

To complete the Babel setup, we need to add an entry to the package.json file to specify which Babel transformations we want to perform on our JavaScript files. Open up package.json and add a babel property:

This will run two transformations on each JavaScript file in our project. The env transformation will convert ES6 JavaScript to standard JavaScript that’s compatible with all browsers. And the react transformation will compile JSX code down to createElement() function calls, which is perfectly valid JavaScript.

Now, back to our webpack.config.js file.

The last property we have is plugins, which contains any special operations we want performed during the build process. In our case, we need Webpack to create an index.html file which includes a reference to the bundled JavaScript file. We also indicate an existing index.html file (the one we created earlier) to be used as a template to create the final bundled index.html file.

Build and Test

Let’s now add a script property to package.json. By the way, you can add as many scripts as you like to perform various tasks. For now, we just want to be able to run Webpack, so in package.json delete the "test" script and replace it with:

Before we test the build process, let’s add a React component to index.js so we have something to render.

This should look very familiar by now if you’ve followed along with the previous tutorials in this series. 

From the command line, run:

After a little while, you should see a new public folder created inside my-first-components-build, containing index.html and index.js. Open up index.html to see the output of our test React app.

Test React app

Notice the bundled JavaScript file has been added for us, and the test component is rendered to the correct DOM element.

Automate the Compilation Process

Once you start making multiple changes to your app, you’ll soon learn that it’s rather tedious to have to manually edit a file, save it, run the build command, and then reload the browser window to see the changes.

Fortunately, we can use the Webpack mini server that we installed earlier to automate this process. Add a second script to package.json so the ‘scripts’ property looks like this:

Now run:

After a few seconds, you’ll see a new browser tab open with your web app running. The URL is now pointing to a local server instead of pointing to a specific local file. Make a minor change to index.js in the src folder and save. Notice that your app automatically updates in the browser almost instantly to reflect the new changes.

Webpack will now monitor the files in your app for changes. When any change is made, and saved, Webpack will recompile your app and automatically reload the browser window with the new updates.

Note: The Webpack server will not rebuild your app, as such—rather it stores changes in a cache, which is why it can update the browser so quickly. This means you won’t see the updates reflected in the public folder. In fact, you can delete this folder entirely when using the Webpack server.

When you need to build your app, you can simply run npm run build to create the public folder again (if necessary) and output your app files, ready for distribution.

Finishing Up Our App

For completeness, let’s add the two simple components we’ve been using in previous tutorials.

Add two new files in the root project folder called MyFirstComponent.js and MySecondComponent.js to the main app folder. In MyFirstComponent.js, add the following code:

And in MySecondComponent.js, add:

To use these components in our app, update index.js to the following:

This results in the same output as we’ve seen before, except this time via setting up the React app 100% manually.

Finished React app

Reusable React Setup Templates

Once you’ve gone through this manual setup once and created configuration setup files, this is the only time you’ll need to do this completely from scratch. For future projects, you can reuse one or more of your existing setup files, making subsequent React projects much quicker to set up.

You could even create a set of purpose-built React starter templates, and host them on GitHub. It would then be a simple case of cloning a starter project and running npm init to install the required Node.js modules.

Download and Install the Project

The React project for this tutorial is available for download, so you can play around with it or use it as a template for new projects.

Click the Download Attachment link in the right sidebar to access the project .zip file. Once downloaded, extract it and open a command-line window. Make sure you’re in the my-first-components-build directory.

Enter the following commands to install and compile the React app.

The first command will download all the Node.js modules needed for the project, which will take a minute or two. The second command will compile the React app and run the mini web server, displaying it in the browser.

Try making some changes to your React app. Every time you save changes, your app will be recompiled, and the browser window automatically updates to reflect the new version of your app.

When you want to build your project for distribution, just run the following command.


Throughout this tutorial series, we’ve looked at several ways you can approach setting up React apps, each one progressively requiring more setup tasks up front. But the long term benefit is that you have far more control and flexibility over exactly how the project is set up.

Once you’ve mastered setting up React, I think you’ll find developing apps a lot of fun. I’d love to hear your comments. Let me know what you plan to build next with React!

Source: Nettuts Web Development

Is Success Down To The Quality Of Your Work?



One of the biggest fallacies of our industry is that good work speaks for itself. It is a self-delusional lie that those with a good reputation tell themselves to explain their success.

Is Success Down To The Quality Of Your Work?

I will let you in on a secret; I am not that amazing at my job. Don’t get me wrong; I am good. But I am not a leading mind in our industry or anything. But, people often talk as if I am.

The post Is Success Down To The Quality Of Your Work? appeared first on Smashing Magazine.

Source: Smashing Magazine

Set Up a React Environment, Part 3

Throughout the rest of this tutorial series, we’ll focus on setting up React locally. The first of these approaches is similar to CodePen, where the React scripts were inserted dynamically into your HTML file, before being rendered in the output window.

The only difference here is that we’ll be inserting the scripts manually.

Manual React Setup

Start by creating an index.html document and adding a couple of <script> tags for the React and ReactDOM libraries.

The React scripts added are via a CDN, and the particular URIs are recommended by Facebook. If you want to work completely offline, you could download these scripts locally and change the links to be relative.

An element <div id='app'> was added as the location in the DOM our React app will be rendered to. A blank <script> tag was also added, which will be used to add our React code shortly.

This time, however, we won’t be able to use JSX as there is no way to convert it to JavaScript at runtime. It has to be compiled ahead of time via a preprocessor such as Babel. We can’t use ES6 classes or modules either as these features don’t yet have universal browser support.

Let’s use the same React component from the CodePen example in part two of this tutorial series, so we can directly compare the two setup methods.

Starting with the <App /> component only:

This is what a React component looks like without JSX. In fact, this is what the JSX code is actually compiled into by Babel.

Let’s now add the definitions for the two child components and add a reference to each of them in the top-level <App /> component. I’ll also implement the number props from the CodePen example.

Here’s what the whole HTML source code now looks like.

Notice how in the <App /> component we can create as many elements as we like by adding more calls to React.createElement(). Also, props are passed into child components via a props JavaScript object, which can then be accessed inside components via the function parameter props.

Open index.html in a browser to see the React output.

Reacts output

I won’t go into more details here about React.createElement(), and other non-JSX topics, as the majority of React users choose to write their components using JSX. We’ll be using JSX for our React components for the remainder of this tutorial series.

Clearly, the lack of tools such as Babel restricts how easy it is to write React code completely from scratch. There are many other tools we could take advantage of too, such as a bundler that creates a single JavaScript file from all the required React libraries plus our app code. We’ll discover a better approach in the next section that’s just as easy to set up.

Create React App

To solve the problem of complex manual React setups, Facebook introduced create-react-app, which is a user-friendly way to get started developing with React. It provides you with full build setup but requires no manual configuration at all.

Let’s go ahead and install create-react-app. Type the following code in a command-line window.

npm install -g create-react-app

This will install create-react-app globally so you can access it from any directory.

You’ll need npm installed to run this command, and Node.js to run create-react-app. As npm comes bundled with Node.js, simply download and install the latest version of Node.js from the official website.

We’ll now create a new React app called my-first-components. Note that create-react-app creates the containing folder for your app automatically, so you only need to make sure you’re in the directory you want your app folder created in.

Run these commands to create your app and run the start script.

It might take a minute or two for create-react-app to complete installing everything. Once done, enter the npm start command and a new browser window will open and, after a few seconds, your React app will be displayed.

The initial display of the React app

The nice thing about create-react-app is that it includes a mini web server and also watches the files in your app for changes. Whenever a change is made, your app is rebuilt, and the browser window automatically reloads to display your updated app.

During the automated setup process, create-react-app generates several files as well as the following three folders:

  • node_modules
  • public
  • src

A React apps organization

To get a feel for how we create components and connect them together inside a create-react-app generated app, we’ll create the same components that we have been working with so far.

The default output of the app suggests we edit App.js as a starting point, so open this file and remove the import calls for the logo and CSS files as we won’t be needing these. We can also simplify the <App /> component, and add in our two child components from before.

Your App.js file should now look like this:

Save your changes and create-react-app will automatically update your app in the browser. This results in the same output as before. (Notice it’s loaded in the browser via the local web server this time, though.)

Your first React component

Let’s make this more modular, though, to be in line with modern best practices for creating React apps. Create two new files inside the src folder named MyFirstComponent.js and MySecondComponent.js.

Inside MyFirstComponent.js, add the following code:

And inside MySecondComponent.js, add similar code:

Finally, we need to update App.js to import both child components as they’re now located in separate files:

This approach to structuring your React app is much more modular and portable. It also allows for easier debugging as each component is self-contained inside its own module.


In this tutorial, we’ve covered two methods for setting up React locally: the manual approach, and using the create-react-app tool from Facebook.

Creating a React app manually from scratch and inserting the script dependencies directly inside the index.html file is pretty inefficient. As your app scales, and as different versions of your scripts are released, manually updating the scripts will quickly become unmanageable. On top of that, we can’t use ES6 features, or write our components in JSX!

Using create-react-app, on the other hand, is a very smooth process. It’s installed and initialized with a couple of commands. Once running, create-react-app rebuilds your app and updates the browser window every time you edit any project files. This is a really nice workflow when making a lot of minor changes, as it helps to speed up app development.

In the next tutorial, we’ll create a React app from scratch that uses Webpack and Babel to bundle and process our app into a single JavaScript file. Unlike create-react-app, where everything is done for you, we’ll be manually configuring all the setup files, and we’ll discuss why you’d choose this approach.

Source: Nettuts Web Development

New Course: Get Started With Phoenix

If you want to learn about a rising web framework, you should check out Phoenix, a new framework for the Elixir language. With a server-side MVC pattern, it’s similar to other web frameworks like Ruby on Rails or the Python framework Django, but it also contains powerful new ideas to make web development easier and more effective.

Our new course, Get Started With Phoenix, is the perfect introduction to this exciting framework. In this post, you’ll get a quick introduction to the course and be able to view some free sample lessons.

Get Started With Phoenix

What You’ll Learn

In this course, instructor Markus Mühlberger will show you how to use the Phoenix framework and give you an in-depth introduction to its key architectural concepts. 

You’ll build a web app right through to deployment, and along the way you’ll learn about how Phoenix handles template rendering, asset compilation, database integration, WebSockets, testing, and more!

Here are some free lessons from this course, as a preview of what you can expect:

The Phoenix 1.3 Architecture

With version 1.3, the architecture of the Phoenix framework has changed quite a bit. Whether this is your first look at Phoenix or you’re updating your knowledge from a previous version, in this video you’ll get a look at the core principles of the framework architecture. You’ll also learn about some differences from earlier versions.


Endpoints, Routing, and Pipelines

In this video, you’ll learn about the entry points to your application, “endpoints”, and what it takes to get a request through to the controller that will process it.


Working With Controllers

Controllers handle requests. In this video, you’ll learn you how controllers work and what functionality they bring with them.


Take the Course

The full course contains 12 more videos taking you through every aspect of the Phoenix framework. You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Source: Nettuts Web Development

An Introduction to Component Routing with Angular Router

This article is part 4 of the SitePoint Angular 2+ Tutorial on how to create a CRUD App with the Angular CLI.

  1. Part 0— The Ultimate Angular CLI Reference Guide
  2. Part 1— Getting our first version of the Todo application up and running
  3. Part 2— Creating separate components to display a list of todo’s and a single todo
  4. Part 3— Update the Todo service to communicate with a REST API
  5. Part 4— Use Angular router to resolve data
  6. Part 5— Add authentication to protect private content

In part one we learned how to get our Todo application up and running and deploy it to GitHub pages. This worked just fine but, unfortunately, the whole app was crammed into a single component.

In part two we examined a more modular component architecture and learned how to break this single component into a structured tree of smaller components that are easier to understand, reuse and maintain.

In part three we updated our application to communicate with a REST API backend using RxJS and Angular’s HTTP service.

In this part, we will introduce Angular router and learn how it can update our application when the browser URL changes and vice versa. We will also learn how we can update our application to resolve data from our backend API using the router.

Don’t worry! You don’t need to have followed part one, two or three of this tutorial, for four to make sense. You can simply grab a copy of our repo, checkout the code from part three, and use that as a starting point. This is explained in more detail below.

Up and Running

Make sure you have the latest version of the Angular CLI installed. If you don’t, you can install it with the following command:

npm install -g @angular/cli@latest

If you need to remove a previous version of the Angular CLI, you can:

npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest

After that, you’ll need a copy of the code from part three. This is available at https://github.com/sitepoint-editors/angular-todo-app. Each article in this series has a corresponding tag in the repository so you can switch back and forth between the different states of the application.

The code that we ended with in part three and that we start with in this article is tagged as part-3. The code that we end this article with is tagged as part-4.

You can think of tags like an alias to a specific commit id. You can switch between them using git checkout. You can read more on that here.

So, to get up and running (the latest version of the Angular CLI installed) we would do:

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-3
npm install
ng serve

Then visit http://localhost:4200/. If all is well, you should see the working Todo app.

A quick recap

Here is what our application architecture looked like at the end of part 3:

Application Architecture

In this article we will:

  • learn why an application may need routing
  • learn what a JavaScript router is
  • learn what Angular router is, how it works and what it can do for you
  • set up Angular router and configure the routes for our application
  • create a resolver to fetch the todo’s from our REST API
  • update our application to fetch the todo’s using our new resolver

By the end of this article, you will understand:

  • when and why your application may need routing
  • the difference between routing on the server and routing in the browser
  • what Angular router is and what it can do for your application
  • how to set up Angular router
  • how to configure routes for your application
  • how to tell Angular router where to place components in the DOM
  • how to gracefully handle unknown URLs
  • what a resolver is and what it can be used for
  • how to use a resolver to resolve data using Angular router

So, let’s get started!

Why routing?

In its current state, our web application does not take the browser URL into account.

We access our application through one URL e.g. http://localhost:4200 and our application is not aware of any other URLs such as http://localhost:4200/todos.

Most web applications need to support different URLs to navigate users to different pages in the application. That is where a router comes in.

In traditional websites, routing is handled by a router on the server:

  1. a user clicks a link in the browser, causing the URL to change
  2. the browser sends an HTTP request to server
  3. the server reads the URL from the HTTP request and generates an appropriate HTTP response
  4. the server sends the HTTP response to the browser

In modern JavaScript web applications, routing is often handled by a JavaScript router in the browser.

What is a JavaScript router?

In essence, a JavaScript router does 2 things:

  1. update the web application state when the browser URL changes
  2. update the browser URL when the web application state changes

JavaScript routers make it possible for us to develop Single Page Applications (SPA’s).

A Single Page Application is a web application that provides a user experience similar to a desktop application. In a Single Page Application, all communication with a back-end occurs behind the scenes.

When a user navigates from one page to another, the page is updated dynamically without reload, even if the URL changes.

There are many different JavaScript router implementations available.

Some of them are specifically written for a certain JavaScript framework such as Angular, ember, React, Vue.js, aurelia, etc. Other implementations are built for generic purposes and are not tied to a specific framework.

What is Angular router?

Angular router is an official Angular routing library, written and maintained by the Angular Core Team.

It is a JavaScript router implementation that is designed to work with Angular and is packaged as @angular/router.

First of all, Angular router takes care of the duties of a JavaScript router:

  • it activates all required Angular components to compose a page when a user navigates to a certain URL
  • it lets users navigate from one page to another without page reload
  • it updates the browser’s history so the user can use the back and forward buttons when navigating back and forth between pages

In addition, Angular router allows us to:

  • redirect a URL to another URL
  • resolve data before a page is displayed
  • run scripts when a page is activated or deactivated
  • lazy load parts of our application

In this article, we will learn how to set up and configure Angular router, how to redirect a URL and how to use Angular router to resolve todo’s from our back-end API.

In the next article, we will add authentication to our application and use the router to make sure some of the pages can only be accessed when the user is signed in.

How Angular Router Works

Before we dive into the code, it is important to understand how Angular router operates and the terminology it introduces.

When a user navigates to a page, Angular router performs the following steps in order:

  1. it reads the browser URL the user wants to navigate to
  2. it applies a URL redirect (if one is defined)
  3. it figures out which router state corresponds to the URL
  4. it runs the guards that are defined in the router state
  5. it resolves the required data for the router state
  6. it activates the Angular components to display the page
  7. it manages navigation and repeats the steps above when a new page is requested

To accomplish its tasks, Angular router introduces the following terms and concepts:

  • router service: the global Angular router service in our application
  • router configuration: definition of all possible router states our application can be in
  • router state: the state of the router at some point in time, expressed as a tree of activated route snapshots
  • activated route snapshot: provides access to the URL, parameters, and data for a router state node
  • guard: script that runs when a route is loaded, activated or deactivated
  • resolver: script that fetches data before the requested page is activated
  • router outlet: location in the DOM where Angular router can place activated components

Don’t worry if the terminology sounds overwhelming. You will get used to the terms as we tackle them gradually in this series and as you gain more experience with Angular router.

An Angular application that uses Angular router only has one router service instance; It is a singleton. Whenever and wherever you inject the Router service in your application, you will get access to the same Angular router service instance.

For a more in-depth look at Angular routing process, make sure to check out the 7-step routing process of Angular router navigation.

Enabling Routing

To enable routing in our Angular application, we need to do 3 things:

  1. create a routing configuration that defines the possible states for our application
  2. import the routing configuration into our application
  3. add a router outlet to tell Angular router where to place the activated components in the DOM

So let’s start by creating a routing configuration.

Creating the routing configuration

To create our routing configuration, we need a list of the URLs we would like our application to support.

Currently, our application is very simple and only has one page that shows a list of todo’s:

  • /: show list of todo’s

which would show the list of todo’s as the homepage of our application.

However, when a user bookmarks / in their browser to consult their list of todo’s and we change the contents of our homepage (which we will do in part 5 of this series), their bookmark would no longer show their list of todo’s.

So let’s give our todo list its own URL and redirect our homepage to it:

  • /: redirect to /todos
  • /todos: show list of todo’s

This provides us with two benefits:

  • when users bookmark the todos page, their browser will bookmark /todos instead of /, which will keep working as expected, even if we change the home page contents
  • we can now easily change our homepage by redirecting it to any URL we like, which is convenient if you need to change your homepage contents regularly

The official Angular style guide recommends storing the routing configuration for an Angular module in a file with a filename ending in -routing.module.ts that exports a separate Angular module with a name ending in RoutingModule.

Our current module is called AppModule, so we create a file src/app/app-routing.module.ts and export our routing configuration as an Angular module called AppRoutingModule:

Continue reading %An Introduction to Component Routing with Angular Router%

Source: Sitepoint

Rapid Enterprise App Development with Zend Expressive

If you’ve ever done a Zend Framework quick start, you’ve probably never worked in Zend Framework. The quick start has historically been anything but quick, and it’s easy to lose interest and move on to the next thing.

Zend Expressive greatly improves upon this experience with the wizard driven composer create-project command. However, it can still be daunting to set up because there are so many choices to make up front. This tutorial guides you through my recommended setup for rapid development which will
yield an enterprise level, robust application.

Zend Framework logo

This tutorial is not about setting up your environment, so I am going to assume that you have a good working environment like Homestead Improved.

Project Setup

Start your project by running the following command your the folder where you keep your projects (Code on Homestead Improved):

composer create-project zendframework/zend-expressive-skeleton expressive

You will be prompted to make a few decisions along the way. Use these answers:

  • What type of installation would you like?
    • Modular
  • Which container do you want to use for dependency injection?
    • Zend ServiceManager
  • Which router do you want to use?
    • Zend Router
  • Which template engine do you want to use?
    • Twig
  • Which error handler do you want to use during development?
    • Whoops
  • Please select which config file you wish to inject ‘ZendValidatorConfigProvider’ into?
    • config/config.php
  • Remember this option for other packages of the same type?
    • y

Then, run these commands:

cd expressive &&
git init &&
git config color.ui true &&
git add . &&
git commit -m "Initial commit" &&
chmod -R +w data;

This initializes a repository in the newly created folder and makes the data folder writable.

Then, start up a php server for testing with

composer serve

… and browse to http://localhost:8080 or just visit the VM’s IP or virtual host if you’re using Homestead Improved.

Zend Expressive Homepage

Understanding Expressive

Expressive’s folder structure looks like this:


Most of it is self explanatory. Expressive provides an App module by default. You can put all your code in here, or build separate modules as you build larger features.

Continue reading %Rapid Enterprise App Development with Zend Expressive%

Source: Sitepoint

Set Up a React Environment, Part 2

If you are new to React then, understandably, you just want to get coding, and play around with some simple components to see how React works. You really don’t want to have to wade through a lengthy setup process in the first instance.

In this tutorial I’ll show you how to begin coding with React in seconds, almost completely removing the setup process! You’ll be using CodePen, an online code editor, that enables you to begin writing React code instantly.

A useful side effect of using online code editors is that you can easily share your work with others via a unique URL. Anything you create can also be searched for by other developers looking for React-based examples.

Let’s take a look at CodePen and see just how easy it is to set up React and start coding your first app!


CodePen gives you access to three windows to edit HTML, CSS, and JavaScript, plus another window to render output. You can use CodePen completely for free, and don’t even need to register for an account to share your work. However, if you use the service regularly, you might want to consider opening an account so you can fill out a profile and begin to build up a portfolio.

Every new creation in CodePen is called a ‘pen’. Go to the homepage and click the large Create button at the top right of the screen, and then New Pen from the dropdown menu.

Create a new CodePen

Depending on your default settings, the three editors will either be on the left/right side of the main window or laid out across the top in a single row.

The main window

The CodePen output window is updated automatically every time you type in any one of the editor windows. This is optional and can be disabled via the pen’s settings.

Configuring Settings

Before we can write any React code, we need to import the necessary library scripts and set up our JavaScript processor. We’ll be using JSX inside our React components, as well as some features of ES6, so to be sure the CodePen JavaScript editor can interpret our code, we need a tool that will take our JSX and ES6 code and compile it down to standard JavaScript that all browsers can run.

We’ll be using Babel as our JavaScript compiler, so you’ll be able to safely use all the latest features of JavaScript without having to worry about browser compatibility. The added support for JSX compilation is a real bonus as it means we only need to use one tool.

To enable Babel in CodePen, we need to configure our pen’s settings. Click the Settings button in the top right menu, and then on JavaScript in the Pen Settings dialog box that appears. We can also add the required React libraries here too.

Click on the Quick-add dropdown and select React from the list. Notice that React is added to the first input box with the full path to the library specified. Click the drop down again to add React DOM. This is needed as we’re rendering our React components to the browser DOM.

Finally, under the JavaScript Preprocessor dropdown, select Babel. Your Pen Settings dialog should now look similar to this:

Pen Settings Dialog

The exact versions of React, and React DOM scripts, may be slightly different on your screen as CodePen will inevitably update to the latest version from time to time.

Click Close to return to the main CodePen interface. Notice that next to the JS label in the JavaScript editor window, an additional (Babel) label has been added as a reminder that the JavaScript will be passed through the Babel compiler before it is executed in the browser.

Our First React App

In the HTML CodePen editor window, add a single <div id="app"> element. This serves as an empty placeholder our React app can use to render out our component.

We don’t need to add much HTML manually as React handles adding and updating DOM elements for us. We won’t be adding any CSS to our pen either, so feel free to rearrange the windows so that the JavaScript editor and output window have more space available.

CodePen Editor

In the JavaScript editor window, enter the following code to add our first component.

This is pretty much the most basic version of a component possible in React. We used an ES6 class to extend the core React component class, which implements a render() method and returns a HTML element.

To display our component, we need to call the ReactDOM.render() method:

The first argument is the React component you want to render, and the second specifies which DOM element to render to.

Creating a React Component

Let’s now create another couple of React components. First, add this snippet to the HTML window:

Now add another component definition to the JavaScript window:

The second component is very similar to the first one, and we render it out to the div element with id of app2 with another call to ReactDOM.render().

However, it’s not very efficient to render out individual components this way. The currently accepted approach is to define a top-level component such as <App />, which contains all other components in your React app. Then, all you need is a single call to RenderDOM.render(), rather than a separate call for each component.

So let’s refactor our very simple React app to make use of this top-level component approach.

Firstly, remove the <div id="app2> element as we only need a single element to ‘mount’ our React app to. Then, add an <App /> component definition:

Now, our React app is entirely self-contained via a single top-level component. Notice that it’s comprised of HTML elements and React components. This makes it very easy to structure your app however you want.

Finally, remove all ReactDOM.render() methods and replace with a single call:

Replacing ReactDOMrender Methods

Now, what if we wanted to add some information to <MyFirstComponent /> and <MySecondComponent /> but didn’t want to necessarily specify it inside the component definitions? We can do this by passing down information to child components from parent components using HTML attribute like syntax. This is know as props in React.

Let’s demonstrate this by passing down numbering information to our two nested components. Change the <App /> definition to be:

We’ve added two number props which will be passed down to each child component and made available via a JavaScript object. Inside the component definitions, we can access the props via the props object as follows:

The final state of the code

Let’s quickly recap on how easy it was to start coding with React using CodePen.

Firstly, we opened a new pen and configured the settings to add the React and ReactDOM script dependencies. We also added the JavaScript Babel preprocessor to compile our JSX and ES6 code down to standard JavaScript.

Then, it was just a simple case of adding our React components to the JavaScript editor. Finally, to get our components to display in the output window, we inserted a <div> element as a mounting point for our React app in the HTML editor window.


Using CodePen, you can get a React component outputted to the screen within just a couple of minutes! However, it does have some limitations.

Modern React best practices for React development recommend a modular approach, with each component in a separate file. You can’t do this with the basic version of CodePen.

Also, because the CodePen output window is embedded inside an iframe element, you don’t have access to the browser React developer tools, which is an important consideration as your apps get more complex.

For beginners, though, and for quickly testing out new ideas for simple apps, CodePen is a great tool for React development. You could also use it to create an online portfolio, or as your own mini-library of React components ready to paste into other projects. There are plenty of other online code editors similar to CodePen such as JSFiddle, JS Bin, and many others.

In the next tutorial, we’ll focus on setting up React apps locally.

Source: Nettuts Web Development

Launching An App? Make App Store Optimization Your Foundation For Growth



Most apps developed and released in Google’s Play store are abandoned by their developers. Over half of these apps get fewer than 5000 downloads, and most apps are considered unprofitable. This article is not going to make you the next Instagram, but it will hopefully help you get a nice base level of users that you can grow from.

Launching An App? Make App Store Optimization Your Foundation For Growth

To give you some better understanding of numbers, the example app in this article received 100,000 downloads in eight weeks. This is with a marketing budget of zero and very little work since launch. We’ll cover the basic app store optimizations that will help bring people to your Google Play page. Getting them to download and stay is up to you and up to the value your app provides.

The post Launching An App? Make App Store Optimization Your Foundation For Growth appeared first on Smashing Magazine.

Source: Smashing Magazine

Set Up a React Environment, Part 1

React is a JavaScript library for building user interfaces (UI). It’s maintained and developed by Facebook, and is one of the most popular tools for creating web apps today.

However, it’s had a bit of a reputation for not being very user friendly to set up a React app, particularly for beginners. The problem stems from when React first became popular, and the standard method of creating a React app involved complex manual configuration of a whole host of setup files.

A lot of tutorials intended to help beginners get started with React introduced different approaches, and tools, to set up a working app. Even with subtle differences between suggested build methods, confusion was inevitable.

To be able to successfully set up a React app via manual configuration requires a good understanding of multiple different technologies.

The technologies used with React

This flexibility in setup is actually a great thing. You have complete freedom to choose the specific tools you want to build your React app, and configure them exactly as required.

Once comfortable with these tools, you’ll have the confidence to use them to their full potential and create in-depth complex apps. Until then, there still remains an entry barrier to a lot of developers who haven’t necessarily got experience with the command-line tools needed to create React apps.

To help alleviate this frustration, this tutorial series focuses on various methods for setting up React apps. We’ll start with the most basic approach and then build up to more complex setups. Let’s kick things off, though, by clarifying in more detail the types of React setup we’ll be covering.

What We’ll Be Covering

By the end of this tutorial series, you’ll be able to set up React apps in four main ways:

  • using an online code editor (CodePen)
  • basic manual setup, without Node.js or npm
  • using create-react-app
  • full manual setup and configuration

The first method demonstrates how to use an online code editor such as CodePen to set up a React app very quickly. Using this method, you’ll be coding your first app literally in seconds!

Then, we’ll move on to setting up React in a local development environment, starting with directly adding scripts to an HTML file using no build tools whatsoever. The next two setup methods focus on how you’d set up a typical React app in your day-to-day development.

As you’ll see, using the create-react-app tool makes it extremely easy to spin up React apps with just a single command! Finally, we cover how to set up a React app via the command line completely from scratch, the old-school way.

Each setup method has its place, and there’s no single ‘better’ approach, just alternatives depending on your needs.

React is a fantastic library to build web apps with, and it’s a lot of fun too! Let’s take a look now at the tutorial prerequisites to make sure you’re up to speed.


The simplest method for setting up a React app requires nothing more than an internet connection. However, as we progress to more complex setups, we’ll be moving towards setting up a React app completely from scratch. Therefore, some knowledge of the following topics is recommended.

Command Line

Windows, macOS, and Linux all provide access to command-line tools. These are used heavily in modern web development for completing complex tasks quickly and efficiently. If you don’t have any experience working with the command line to perform operations such as managing files/folders, installing tools, running scripts, and so on, then it would be worth your time at least learning the basics.

Node.js and NPM

If you’ve been doing web development for any amount of time then chances are you’ve at least heard of Node.js and npm. Node.js was originally created to run JavaScript on the server but is also now widely used for developing web apps, simplifying and automating common tasks, all under a single environment.

There are literally hundreds of thousands of Node.js modules available, and npm was introduced as a dedicated package manager to help install, organize, and manage all the various modules in your web app. Since npm is bundled with Node.js, all you need to do is install the latest version of Node.js on your system to make it available via your command line.


A reasonable level of JavaScript is required to set up and develop React apps. Otherwise, you’ll most certainly struggle at some point to create React apps of any depth or complexity. This includes some features of ES6 such as arrow functions, classes, and modules. I recommend brushing up on your JavaScript skills if necessary before attempting to develop a React app.


This tutorial series focuses on setting up React apps rather than developing them, and so we won’t be delving too deeply into React specific topics such as components, props, and state. It’s a good idea, though, to have some basic knowledge of what these are, so in the next section we’ll be covering the basic features of React and exploring how all the parts fit together to form a working app.

Structure of a React App

Before we dive into our first setup method, let’s take a quick tour of React itself.

At its core there are three fundamental features of React that most apps are comprised of. These are:

  • components
  • props
  • state

These are the key features you need to master in order to write effective React apps. Once you’ve reached that stage, you’ll be very well prepared to dive much deeper into React and develop more complex apps.

You might be pleasantly surprised to find that React components, props, and state are not that difficult to get your head around. My personal experience was that the React setup process was more difficult than learning React itself!


The building blocks of any React app are components. Think of them as reusable blocks of code which encapsulate markup, behaviour, and styles. They can also be nested inside each other, which makes them highly reusable. For example, you might have a <Book /> component which represents data and UI associated with a single book. You could then also have a <BookIndex /> component which renders out multiple <Book /> components, and so on.

To make constructing components easier, JSX was created to give components an HTML-like structure. If you’re familiar with HTML or XML then you’ll be right at home using JSX to build components. It’s worth noting that you are not required to use JSX at all in React, but it’s now become the accepted standard way to define components.


Props allow you to pass information between components. And in React, information can only be passed via props from parent components to child components.

If you choose to use JSX in your component definitions (and I highly recommend you do) then defining props on a component is remarkably similar to adding HTML attributes. This is one of the reasons JSX is so popular! Being able to use HTML-like syntax for React components and props makes it very easy to quickly scaffold out your app.

Let’s take a closer look at our <BookIndex /> React component example and see how we can define it with multiple nested child <Book /> components. At the same time, we’ll pass down information to each individual <Book /> component from <BookIndex />.

First, here’s the <BookIndex /> component definition:

Then, inside each <Book /> component, we can access passed-in props like this:

If the above syntax for creating React components looks strange, don’t worry—it’s pretty straightforward. An ES6 class extends the base component class, and then a (required) render method handles the output of the component.


State enables us to keep track of all the data in a React app. We need to be able to update the UI whenever something changes, and state handles this for us. Whenever state is changed, React is smart enough to know which parts of your app need updating. This makes React very fast as it will only update the parts that have changed.

State is typically applied to the top-level component in your React app, so that it’s available to every child component to consume state data as necessary.

That’s it for our whirlwind tour of React. It’s by no means comprehensive, and there’s a lot more you need to learn before you can create fully fledged complex apps, but understanding components, props, and state will give you a solid head-start.


In this tutorial, we laid the groundwork for learning how to set up a React environment. The rest of this tutorial series focuses on the specific methods needed to do this. We’ll cover setup methods ranging from very simple to more complex methods requiring manual configuration.

In the next tutorial, we’ll start by taking a look at using CodePen, an online code editor, to set up a React app in just a few mouse clicks. This is by far the simplest and quickest way to get coding in React!

Source: Nettuts Web Development