Introducing Website Speed Test: An Image Analysis Tool

Introducing Website Speed Test: An Image Analysis Tool

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

Because images dominate page weight, methodical image optimization can have a significant effect on conversions and user experience. The performance tools you choose to use can have a powerful impact on how websites are built and maintained. One such popular open source tool is WebPagetest. It is designed to measure and analyze webpage performance, which is why Cloudinary chose to partner with our friends there to launch Website Speed Test.

Website Speed Test is an image analysis tool that provides detailed optimization insights beyond a simple compression check. The tool leverages Cloudinary’s advanced algorithms to demonstrate how changes to image size, format, quality and encoding parameters can result in significant reductions in file size while maintaining perceived quality. In short, Website Speed Test shows the why and how of image optimization.

How Website Speed Test Works

Advanced algorithms take into account many factors when examining images, including the exact content of an image and the need for responsive design. The resulting insights enable you to ensure that images are encoded correctly, optimized for performance, and look their best regardless of bandwidth, viewing browser, device or viewport.

At the top of the page, the report shows the total weight of images, potential compression and ‘Page Image Score’: a grade ranging from A-F. This grade is based on the image format used, fit between image resolution and the displayed size in the graphic design, and compression rate of all the images that were analyzed.

Cloudinary Image Analysis Results

The overview is followed by a detailed analysis of each image, with performance insights and recommendations for improvement.

Left Tab – Current Image

Presents the current version of the image being analyzed along with its image score.

Middle Tab – Optimized Image

Presents an optimized version of the image, using the same format as the original image, with the following adjustments:

  • Correctly-sized images – scales the image down to the actual required dimensions on the web page
  • Intelligent content-aware encoding – analyzes the image to find the best quality compression level and optimal encoding settings, based on the content and viewing browser, producing a perceptually fine image while minimizing the file size.

Learn more about these manipulations

Right Tab – Format Alternatives

This tab shows how optimization works for different image formats and the impact on image weight.

Improved Image Analysis Using WebPagetest

Linked from a new Image Analysis tab, Cloudinary powers WebPagetest with robust image analysis capabilities, enabling you to receive valuable data and guidance on how to manage images and deliver an optimal user experience.

Optimizing Images is No Easy Task

The Website Speed Test tool provides insights on the why and how of optimization. While you may be able to optimize an image or two manually, the process becomes exponentially more complicated when you need to scale up, managing hundreds, thousands, or even millions of images delivered to a website.

For the best user experience, each image should be enhanced and optimized to meet the viewing context. This entails automatically adapting the image to fit the layout of the page and selecting the optimal quality and encoding settings.

Accomplishing this type of optimization is no ordinary feat. Optimizing images for different browsers, devices and bandwidth requires considerable knowledge of the intricacies of image formats, encoding parameters and visual quality metrics. For example, it makes sense that a smaller image file size will result in faster load time, less bandwidth usage and a better user experience. However, reduce the file size too much, and image quality could suffer and impair user satisfaction. This is where Cloudinary’s automatic optimization comes in play.

You can create your free account here.

Continue reading %Introducing Website Speed Test: An Image Analysis Tool%


Source: Sitepoint

Starry Summer Nights, Unexplored Worlds, And… Ice Cream! (July 2017 Wallpapers)




 


 

July is almost here, and that means, well, new wallpapers. It’s been nine years already since we embarked on this mission to welcome the new month with a fresh batch of desktop eye candy, with wallpapers that are a bit more distinctive as the usual crowd. And it wasn’t any different this time around.

Desktop Wallpaper Calendars July 2017

Bound to spark new ideas, artists and designers from across the globe once again challenged their creative skills and created a lovely collection of wallpapers for July 2017. All of them come in two versions — with and without a calendar — and can be downloaded for free. Now you only need to decide which one will make it to your desktop. Enjoy!

The post Starry Summer Nights, Unexplored Worlds, And… Ice Cream! (July 2017 Wallpapers) appeared first on Smashing Magazine.


Source: Smashing Magazine

Creating a Blogging App Using React, Part 2: User Sign-Up

In the first part of this tutorial series, you saw how to implement the sign-in functionality. In this part, you’ll learn how to implement the sign-up functionality and modify the sign-in functionality to check for valid users from MongoDB.

Getting Started

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

Once the directory has been cloned, navigate to the project directory and install the required dependencies.

Start the Node.js server and you will have the application running at http://localhost:7777/index.html#/.

Setting Up the Back End

For this application, you’ll be using MongoDB as the back end. Follow the instructions in the MongoDB official documentation to install MongoDB on Ubuntu. Once you have MongoDB installed, you’ll need a connector to connect MongoDB and Node.js. Install the MongoDB Node.js driver using the Node Package Manager (or npm):

Once you have the driver installed, you should be able to require the driver in the application.

Create a file called user.js where you’ll keep the user-related stuff. Inside the user.js file, require the MongoDB client-related dependencies.

You’ll be using a library called assert to check the returned response. Include assert in the user.js file.

Let’s name our database Blog in MongoDB, so our database URL is as shown:

Inside the user.js file, create and export a function called signup

Using the MongoDB client, try to connect to the database. Once connected, you’ll log the connected message in the terminal.

Setting Up the Sign-Up Event

Once you have set up the MongoDB back end, let’s implement the sign-up event. Inside the main.jsx page, include the on-change event for the name, email and password input text boxes in the signup class.

Bind the above event changes in the class constructor.

Define the state variables inside the signup class constructor.

Define the signup method inside the signup class. Inside the signup method, using the axios library, make a post method call to the signup method in the user.js file. 

Inside the signup function in the user.js file, you’ll implement the database insert.

Add the /signup request handler in the app.js file as shown to handle the sign-up click event. Inside the /signup request handler function, make a call to the user.signup method.

Require the user.js file inside the app.js file.

Save the above changes and restart the server. Point your browser to http://localhost:7777/index.html#/signup and you should have the sign-up page. Click on the Sign Up button and you will have the connected message in the terminal.

Save User Details in MongoDB

To save user details in the Blog database, you’ll create a collection called user. Inside the user collection, you’ll keep all the user details such as name, email address, and password. The MongoClient.connect returns a db parameter using which you can insert an entry in the user collection. 

You’ll make use of the insertOne method to insert a single record in the user collection. Modify the code in the signup method in user.js as shown below:

Here is the complete user.js code:

Modify the /signup request handler in the app.js file to pass in the name, email and password to the user.js signup method.

Save the above changes and restart the server. Point your browser to http://localhost:7777/index.html#/signup. Fill the user sign-up details and click the sign-up button. You will have the Saved the user sign up details. message in the server terminal. Log in to the MongoDB shell and check the user collection in the Blog database. To find the user details, enter the following command in the MongoDB shell:

The above command will display the user details in JSON format.

Implementing User Sign-In Check

In the first part of the tutorial, you hard-coded the user sign-in check since the user sign-up hasn’t been implemented. Let’s modify the hard-coded sign-in check and look into the MongoDB database for valid user sign-ins.

Create a function called validateSignIn in the user.js file. 

Inside the validateSignIn function, using the MongoDB client you’ll connect to the Blog database and query the user table for a user with the specified username and password. You’ll make use of the findOne method to query the user collection.

Check the returned result for null in case the entry is not found. 

As seen in the above code, if no entry is found, false is returned in the callback. If an entry is found, true is returned in the callback.

Here is the complete validateSignIn method:

In the /signin method in the app.js file, you’ll make a call to the validateSignIn method. In the callback function, you’ll check for the response. If true, it will indicate a valid sign-in, else an invalid sign-in. Here is how it looks:

Save the above changes and restart the server. Point your browser to http://localhost:7777/index.html#/. Enter a valid username and password and you will have a success message logged in the browser console. On entering an invalid username and password, it would display an error message.

Wrapping It Up

In this part of the tutorial, you saw how to implement the user sign-up process. You saw how to create the sign-up view and pass the data from the React user interface to Node.js and then save it in the MongoDB. You also modified the user sign-in functionality to check for valid user sign-in from the MongoDB database.

In the next part of the tutorial, you’ll implement the add post and display post page functionality.

Source code from this tutorial is available on GitHub.

Do let us know your thoughts or any suggestions in the comments below.


Source: Nettuts Web Development

8 Must Have PHP Quality Assurance Tools

For shipping quality code, we must have testing in mind while coding (if not doing TDD). However, with the wide range of PHP testing tools out there, it’s hard to make a choice! Exploring PHP is a fun adventure (premium course on that here!) but it’s hard to assemble a toolbelt that’s not too heavy to wear to work!

This popular article will highlight the most popular testing tools and has been updated to reflect the state of QA tools in 2017.

Untested code is broken code.

Lab testing environment illustration

PHPUnit

PHPUnit is the go to testing framework for PHP. It was created by Sebastian Bergmann in 2004 and current in version 6 that requires PHP 7.

We have plenty of tutorials coming up about it, but here are some you can already consume.

Cucumber

Cucumber is a framework for creating acceptance tests from specifications. It’s known for it descriptive generated texts that can be read as just plain English. The official PHP implementation for Cucumber is Behat.

Behat logo

We have a getting started tutorial about it here on SitePoint. The below example taken from the documentation is a good example on how expressive those expectations are.

Feature: Listing command
  In order to change the structure of the folder I am currently in
  As a UNIX user
  I need to be able see the currently available files and folders there

  Scenario: Listing two files in a directory
    Given I am in a directory "test"
    And I have a file named "foo"
    And I have a file named "bar"
    When I run "ls"
    Then I should get:
      """
      bar
      foo
      """

Atoum

Atoum logo

Atoum is another unit testing framework for PHP. It’s a standalone package that you can install via GitHub, Composer or via a PHAR executable file.

Atoum tests are very readable with expressive method names and chaining.

$this->integer($classInstance->myMethod())
        ->isEqualTo(10);

$this->string($classInstance->myMethod())
        ->contains("Something heppened");

You want to learn more about PHP unit testing with Atoum, you can follow this tutorial.

Selenium

Selenium is a tool for automated browser testing (Integration and acceptance testing). It transforms the tests to browser API commands and it asserts the expected results. It supports most of the available browsers out there.

We can use Selenium with PHPUnit using an extension.

composer require --dev phpunit/phpunit
composer require --dev phpunit/phpunit-selenium

Here’s a simple example:

Continue reading %8 Must Have PHP Quality Assurance Tools%


Source: Sitepoint

Web Development Reading List #187: Webpack 3, Assisted Writing, And Automated Chrome Testing




 


 

This week, we’ll explore some rather new concepts: What happens if we apply artificial intelligence to text software, for example? And why would a phone manufacturer want its business model to be stolen by competitors?

Web Development Reading List 187

We’ll also take a look at how we can use the new headless Chrome browser for automated testing and learn to build smarter JavaScript bundles with Webpack 3’s new scope hoisting. Sometimes it’s easy to be excited about all the improvements and new things our industry has to offer.

The post Web Development Reading List #187: Webpack 3, Assisted Writing, And Automated Chrome Testing appeared first on Smashing Magazine.


Source: Smashing Magazine

Back to Basics: What are Callbacks in JavaScript?

When learning JavaScript, it doesn’t take long until you encounter callbacks. These might seem strange and mysterious to beginners, yet it is very important to understand how they work in order to harness the power of the language. In this article I will teach you the basics of callbacks using easy-to-understand examples.

Back to Basics: What are Callbacks in JavaScript?

Callbacks — image via unsplash

What Is a Callback?

Simply put: A callback is a function that is to be executed after another function (normally asynchronous) has finished executing — hence the name ‘call back’.

More complexly put: In JavaScript, functions are objects. Because of this, functions can take functions as arguments, and can be returned by other functions. Functions that do this are called higher-order functions. Any function that is passed as an argument and subsequently called by the function that receives it, is called a callback function.

That’s a lot of words. Lets look at some examples to break this down a little more.

This article was first published on codeburst.io and is republished here with the author’s permission. If you enjoy reading, why not head over there and check out some of Brandon’s other articles? If you’d like to sharpen your JavaScript skills in general, why not head over to SitePoint Premium and sign up for our Introduction to JavaScript course.

Why Do We Need Callbacks?

For one very important reason — JavaScript is an event driven language. This means that instead of waiting for a response before moving on, JavaScript will keep executing while listening for other events. Lets look at a basic example:

function first(){
  console.log(1);
}

function second(){
  console.log(2);
}

first();
second();

As you would expect, the function first is executed first, and the function second is executed second — logging the following to the console:

// 1
// 2

All good so far.

But what if function first contains some sort of code that can’t be executed immediately? For example, an API request where we have to send the request then wait for a response? To simulate this action, were going to use setTimeout which is a native JavaScript method that calls a function after a specified delay. We’ll delay our function for 500 milliseconds to simulate an API request. Our new code will look like this:

Continue reading %Back to Basics: What are Callbacks in JavaScript?%


Source: Sitepoint

​Easily Set Up, Manage, and Protect Your Apple Devices with Jamf Now

Jamf Now Apple Devices

This article was sponsored by Jamf Now. Thank you for supporting the partners who make SitePoint possible.

Employees have never been more mobile, increasing the demand for connected smart devices. Between visiting customers, working from home, being embedded with clients, or simply working on the go, connectivity and security is vital to the health and bottom line of all businesses.

Apple devices are incredibly popular in the modern workplace — their combination of beautiful aesthetics, powerful brand recognition, ease-of-use, and a rich application ecosystem makes them a natural choice. The ubiquity of these devices does come with a challenge though — how do you set up, manage, and protect your Mac and iOS devices, no matter where they are or how they’re used?

There’s a software solution that’s up to that challenge — Jamf Now.

Jamf Now — Mobile Device Management

Jamf Now is beautiful, fully-featured, easy-to-use, mobile device management solution designed to make managing iPhone, iPad, and Mac devices a pleasure, throughout your business.

Jamf Now mobile device management provides three key features:

Set Up Devices

Provide consistent configuration settings across all devices to minimize user effort and give employees the exact settings, accounts, and applications needed to work at maximum productivity.

Manage Devices

Collect device information for inventory visibility, manage data usage, and update or deploy applications directly to devices so users always have access to the latest, most functional, and secure versions.

Protect Devices

Ensure that sensitive company information and data accessed on an Apple device remains secure. This includes encryption and enforcing security on devices including passcodes, locking, and even remotely wiping devices.

The Business Benefits of Jamf Now

Jamf Now provides several benefits to your business:

  • Reduces time and resources spent on setting up and managing Apple devices.
  • Ensures consistent application and device settings that can be customized by role or need.
  • Allows rapid deployment of applications for additional functionality or enhanced security.
  • Provides better license and asset management across all devices.
  • Enforces data encryption and passcode access to protect information.
  • Wipes data if a device is lost or falls into the wrong hands.

Jamf Now is Designed Around Simplicity

Traditionally, device management has been the responsibility of the IT department. Jamf Now removes the complexity of managing devices through a simple, easy-to-use interface that lets anyone set up configuration, security rules, application details, and more. The philosophy behind Jamf Now is to get employees set up and using their devices as quickly as possible. The Jamf Now software runs in the background so it’s never a distraction to the user, meaning they can get on with their work in a safe, secure, and always updated environment.

Jamf Now Works with Apple / iOS Devices, Across Multiple Industries

Jamf Now works with Mac, iPad, iPhone, and iPod devices across your business.

Jamf Now works with Apple devices in any industry — from education to finance, retail, manufacturing, healthcare, field services, and more.

Jamf Now Device Setup

Jamf Now takes the hassle out of setting up devices by letting you create a “blueprint.” This lets you input settings once and quickly send them to every device. You can easily customize individual devices with areas like email addresses, role-specific apps, data access, and more. Jamf Now supports Microsoft Exchange, Google Mail, Yahoo! Mail, and any IMAP or POP mail accounts.

Every employee gets access to the right settings, accounts, applications, and data they need to do their job and contribute to your bottom line.

Jamf Now Device Management

It’s vital that employees have access to the latest versions of applications, whether that’s because they need greater functionality or as the result of patching security vulnerabilities. Jamf Now’s management features makes it a breeze to push out new versions of apps. Just point Jamf Now at the latest version and it will automatically download and install it on every user’s device, in the background.

This can significantly reduce the workload of your IT department as it removes the need for manual installs. It also ensures everyone is on the latest version of an app, making support and troubleshooting quicker, easier, and more effective. License management is more effective, letting you track assets and licenses to ensure you don’t pay for software you don’t use. Jamf Now integrates with Apple’s Volume Purchasing Program, letting you buy and deploy multiple licenses and apps to devices, quickly and easily.

Jamf Now also makes inventory and asset management easier — you can easily export details of every device for compliance checks and get insight into all the key information for every device.

Jamf Now Device Security

Mobile devices, especially iPhones and iPads, are easily forgotten and can be prime targets for theft. Jamf Now helps to protect your devices and company data from getting into the wrong hands. It does this in several ways:

  • Encrypting data and information on the device.
  • Enforcing a passcode on the device.
  • Allowing you to remotely lock the screen.
  • Allowing you to display messages on the lock screen (e.g. asking for the device to be returned).
  • Allowing you to remotely wipe all sensitive data from the devices.
  • Allowing you to see the physical location of the phone, through GPS.

Jamf Now is Cloud-Based

Jamf Now runs on a “software as a service” model. It’s cloud-based, so you can manage your Apple devices from anywhere with an internet connection.

Jamf Now Pricing

One of the most attractive features of Jamf Now is the pricing. You can manage your first three devices at no charge. After that, it’s just $2 per device, per month.

Jamf Now Support

Jamf Now is fully supported in three main ways:

  • Live chat with customer service representatives and technical teams.
  • Email support for issues and problems.
  • A complete knowledge base covering all aspects of the software.

The knowledge base contains information on deployment, setup, enrolling devices, configuration, blueprints, devices, apps, settings, troubleshooting, and more.

If your business uses Apple devices, Jamf Now can give you the peace-of-mind you need. Its combination of smart setup, effortless device management, and enhanced security features will empower your users, protect your data, and help you manage all your Apple devices.

Continue reading %​Easily Set Up, Manage, and Protect Your Apple Devices with Jamf Now%


Source: Sitepoint

Internationalization for Your WordPress Theme

WordPress is used to create a variety of types of websites. When building a WordPress theme, you should build it for as large of an audience as possible. That goal also implies that your theme should be ready for sites in different languages. WordPress provides a simple API that you can use in a theme to provide internationalization for it. In this article, you will see how you can make your theme ready for different languages.

How to Configure WordPress for Different Languages

You can add different languages to your WordPress site. For that, you can download the translation files from the blog of the WordPress translator team. From this page, you can see the various languages whose translations are present, as well as what percentage of the translation is complete. Suppose I want to download the French language. I will go to the French language row, then click on the percentage as shown in the image below.

Translations

Then, you can click on the WordPress version, and export the .mo file as shown in the image below

Export .mo Files

Once you have downloaded the .mo file, you will have to upload it to the wp-content/languages folder of your WordPress installation. You can then go to the Settings -> General in your WordPress admin. There you should be able to see the language options which you have put in the wp-content/languages folder as shown below in the image. Please select the desired language you want to change the site to and click ‘Save Changes’

Settings

Continue reading %Internationalization for Your WordPress Theme%


Source: Sitepoint

Podcast: Google Ventures on When Design Sprints Go Bad

Design Sprints banner

In 2016 Google Ventures (GV) design partner Jake Knapp released a seminal book called Sprint. The book introduced the idea of ‘Design Sprints’, a concept that had existed within Google for several years and was a mainstay in the toolset employed by GV with their portfolio of companies.

Jake Knapp

Jake Knapp – Google Ventures.

Many of you will have heard of Design Sprints and perhaps even read the book. Some of you may have even run one. The design community at large loved the idea and before long articles were popping up all over the web and consultancies were adding Design Sprints to their lists of services.

When Design Sprints Go Bad

The beauty of Jake’s book is that it is very specific, there is even a 15-page checklist for when you are running your own Design Sprints. However, this didn’t stop a swathe of folks from appropriating the name, but not the core ideas. This in turn meant is that acts were being committed under the name of Design Sprint but were not even remotely close to what Jake describes in Sprint.

The next domino to fall was the inevitable backlash announcing thatDesign Sprint are snake oil. In this episode of True North, we speak with Jake and Michael Margolis, a UX Research Partner at GV, about how design sprints were created, what they really are, and when they are best used.

Michael Margolis

Michael Margolis – Australia Post

We also visit the enterprise giant,Aus Post, speaking to a team lead where they ran 4 sprints in 5 weeks. Their story was featured on theSprint Stories blog.

Continue reading %Podcast: Google Ventures on When Design Sprints Go Bad%


Source: Sitepoint

Creating a Blogging App Using React, Part 1: User Sign-In

In this tutorial series, you’ll see how to get started with creating a blogging app using React. Throughout the course of this tutorial series, you’ll be focusing on how to use React for developing the application user interface. You’ll be using Node.js for the server side of the application.

In this tutorial, you’ll see how to implement the user interface and back end for user registration and user sign-in.

Getting Started

Create a project directory called ReactNodeApp. Navigate to the project directory and initiate the node project.

Fill in the required details and you should have the package.json file created. Here is how it looks:

You’ll be using the express framework for serving your application. Install express using the following command:

Using the express framework, let’s create our application listening on a port address. Inside the project directory, create a file called app.js. Require the express module inside the app.js and create an app. Set the static path of the application where it can find the static files. Here is how it looks:

Assign a port number for the application to listen on a port. Add the following code to create a server:

Inside the project directory, create a folder called html. Inside the html folder, create a file called index.html. Add the following code to index.html:

Save the above changes and start the server using the following command:

Point your browser to http://localhost:7777/index.html and you should be able to see the index.html page.

Creating the Sign-In View

You’ll be using bootstrap to create the user interface. Download and include bootstrap in the index.html page.

Add the required React libraries in the index.html page.

You’ll be creating the view using JSX. If you are not familiar with JSX, I would recommend reading an introductory tutorial on React and JSX.

To transform JSX code to JavaScript, you’ll need babel, a JavaScript compiler. Include babel in the index.html page.

Create a file called main.jsx inside the html folder. This file will contain the React UI components. 

Let’s create a new React component called Signin inside the main.jsx file. 

Add a render method inside the Signin component which will display the UI for our Signin component.

In the above code, it’s all HTML with just one difference. The class attribute has been modified to className when used in JSX.

The Signin component, when displayed, will display the HTML code inside the render method. 

Add a container div in the index.html page where you’ll render the Signin component.

Render the Signin component inside the .container div in the index.html

Save the above changes and restart the node server. Point your browser to http://localhost:7777/index.html and you should be able to view the sign-in screen.

React Blog App SignIn Screen

Implementing User Sign-In  

To implement the sign-in process, you need to handle the input text onChange event and keep the text box values in a state variable. When the user clicks the button, you’ll make use of the state variables to read the email address and password text box values. So, let’s add the onChange event to the text boxes:

Define the onChange events in the Signin component:

Bind the above defined events and the state variables in the component constructor method:

Define an onClick method which you’ll invoke on button click.

Add the OnClick event to the SignIn button.

Save the above changes and restart the node server. Point your browser to http://localhost:7777/index.html. Enter the email address and password and click the Sign In button, and you should be able to see the email and password pop up.

Posting Data From React to the Node Service 

Once you have the data on the client side, you need to post that data to the Node.js server method to validate the user sign-in. For posting the data, you’ll make use of another script called axios. Axios is a promise-based HTTP client for the browser and Node.js. Include axios in the index.html page.

Inside the signin method in the main.jsx file, add the following line of code to make a post request.

The code makes a post request to the /signin method with the parameters shown. Once the request is successful, the promise is resolved in the then callback. On error, the response is logged in the catch callback. 

Let’s create a signin method on the Node.js side to validate the user sign-in process. In the app.js file, create a method called signin.

You’ll be making use of the body-parser module to parse the request posted from the React client side. Install the body-parser module in the project. 

Require the body-parser module in the app.js file.

Add the following line of code to enable JSON parsing.

Inside the signin method, you can parse the request as shown:

Modify the signin method as shown to validate the user sign-in.

For the time being, the user credentials have been hard-coded. You can replace this with the appropriate service as per your preference.

Once the parameters have been parsed, they are validated against the expected credentials. If true, a success message is passed, else a failure message is returned.

Save the above changes and restart the Node.js server. Enter a valid username and password and click the sign-in method. Based on the credentials, it will return a success or failure message, which will be displayed in the browser console.

Creating the User Registration View

The process of creating the user registration view is quite similar to how you implemented the user sign-in module. Let’s start by creating the Signup component in the main.jsx file.

Since sign-up and sign-in are two different components, you need to link the two components. For the purpose of routing, you’ll be making use of react-router. If you are new to routing in React, I would recommend reading the React routing tutorial.

Include react-router in the index.html page.

Define the required react-router variables to create links in the main.jsx file.

Define the different application routes and the default route as shown below:

Include a link to the sign-in component in the sign-up component and vice versa. Here is the Signin component’s render method with the sign-up link:

Save the above changes and restart the Node.js server. Point your browser to http://localhost:7777/index.html and you should be able to see the sign-in screen with the sign-up link. Click on the sign-up link and you should be navigated to the sign-up screen.

Sign In Screen with Sign Up Link

Implementing user sign-up is similar to how you implemented user sign-in. I’ll leave the user sign-up implementation as an exercise. I’ll post the user sign-up implementation in the next part of this tutorial series.

Wrapping It Up

In this part of the tutorial series, you created and implemented the Sign In screen. You also saw how to use react-router to implement routing in React. In the next part of this tutorial, you’ll see how to implement the Sign Up portion and the Add Post page.

Source code from this tutorial is available on GitHub.

Do let us know your thoughts and suggestions in the comments below.


Source: Nettuts Web Development