Forem: Dr. Michael Garbade

TiDB on KubeSphere: How to Use Cloud-Native Distributed Database on Kubernetes

Dr. Michael Garbade — Wed, 31 Mar 2021 15:46:28 +0000

Introduction
Kubernetes has, in the recent past, become the go to standard for building applications running multiple containers. Using Kubernetes comes with the need to run cloud-native distributed databases. One of the prominently emerging cloud-native, open-source NewSQL databases is TiDB.

By deploying TiDB on KubeSphere, this article demonstrates how you can have TiDB clusters powered by Kubernetes and how to manage the clusters using an easy to use web interface.

What is TiDB and KuberSphere?
TiDB, an open-source NewSQL database, supports Hybrid Transactional and Analytical Processing (HTAP) workloads. TiDB is MySQL compatible and contains features such as; horizontal scalability, a strong consistency, and is highly available. TiDB provides users with a single, multi-purpose database solution, covering systems and services such as;

Online Transactional Processing (OLTP)
Online Analytical Processing (OLAP), and
Hybrid transactional/analytical processing (HTAP)

KubeSphere, on the other hand, is a distributed operating system managing cloud native applications with Kubernetes as its kernel, and provides plug-and-play architecture for the seamless integration of third-party applications to boost its ecosystem.

How do you deploy TiDB on KubeSphere?
You will need a Kubernetes cluster before you deploy TiDB on KubeSphere. Installing the Kubernetes clusters require you to prepare either virtual or physical machines, and configuring network rules to enable smooth flow of traffic from one instance to the next.

How do you prepare the environments?
KubeSphere can be installed on any infrastructure, including deploying Kubernetes by itself. Read the KubeSphere documentation for more insights. In this article, we use the QingCloud platform, provided by QingCloud, which sponsors KubeSphere. It is a highly-functional platform that enables fast deployment of Kubernetes and KubeSphere at the same time with just a few clicks.

Deploying the TiDB Operator
The TiDB Operator is simply an automatic operation system used for TiDB clusters in Kubernetes. The operator provides a complete management life-cycle for TiDB, which includes deployment, scaling, upgrades, fail-over, backup, and any configuration changes. The TiDB Operator helps TiDB to run seamlessly in Kubernetes clusters that are deployed on public or private clouds. You should first deploy a TiDB Operator on KubeSphere, before you deploy a TiBD cluster.

Deploying a TiDB Cluster
So, after you have deployed the TiDB Operator, you can move ahead and deploy a TiDB cluster on Kubernetes. This process of deploying a TiDB cluster is pretty much similar to deploying the TiDB operator.

How do you Access TiDB Clusters?
Now that you have prepared your environment, deployed the TiDB operator and cluster, your apps are ready, and you may now need to focus on observability. The KubeSphere dashboard allows you to observe your applications throughout their lifecycle.

You then need to verify that the apps are up and running. Kubernetes lists all running services and the port in which each service is exposed to, for easy access.

Wrapping Up
Many developers continue to move from cloud-hosted to cloud native environments. As this happens, the way DevOps builds applications and stores distributed data continues to change. This article describes how TiDB and KubeSphere are powerful tools for cloud-native applications. As Suenot describes in his project, “How to use Rancher (Kubernetes cluster) on Hetzner cloud” it is not possible to showcase all the features of TiDB and KubeSphere in a single post.

Make Money Online By Teaching People How To Build Products

Dr. Michael Garbade — Mon, 29 Jul 2019 12:00:26 +0000

Coding is one of the most lucrative skills in the industry. It opens up a plethora of options for you as a programmer.

If you are looking to make money through your skills, then you are in luck! There are many ways one can earn money.

One such way is teaching others how to build products.

The industry is growing at a rapid pace with an ever-growing demand for coders. Just like you followed tutorials and projects to learn coding skills, there are thousands of other people who are also doing the same. Some of them are even struggling to get past the beginner phase. The new learners mostly struggle because they do not know how to transit their coding skills into a real-world project.

And, this is where you get the chance to make money.

If you have crossed past the beginner stage, and have started making projects of real value -- you can use your knowledge to teach people how to build products.

That’s game-changing, considering that the best way to learn is to teach others. It’s easy to get started.

1. You do not need a significant amount of time

One of the misconceptions about teaching people online is that you have to spend a lot.

That’s not true. On average, anyone can start teaching online by just spending 4-5 hours per week. All you need to do is plan properly and execute it with precision.

Building a product can take you anywhere between 2-3 weeks, depending on the complexity of the project.

2. No need to live stream

Live Streams can be a great way to interact with your audience, but they lack the structure for teaching or learning.

As a teacher, you have to record videos and then upload it to your website or a learning platform of your choice.

3. Join a platform

There are many amazing platforms out there that let you explore the possibility of teaching others.

One such platform is the Education Ecosystem that offers a good earning model. On the platform, you can get paid per project and also for the view time. You can join the platform and start your journey of teaching others.

In contrast, you can also upload on YouTube, but it lacks a proper earning model. Also, it requires a specific target audience -- which means that you need to bring your own audience.

Another way you can make money is to create your own website, set up a Google Adsense, do proper SEO optimization and marketing. However, it may require a lot of time and commitment, which may hamper your projects.

In short, we suggest you reach your audience through established learning platforms and then create a following of your own later down the path.

4. Freelancing

Teaching through freelancing is also a possibility.

There are many platforms such as Fiverr, Upwork, etc. where you can get gigs on teaching people. However, the gigs are mostly run short, and you may also not get the chance to record a tutorial.

What’s next?

Building products is at the core of software engineering. As a programmer, you should always keep a tab on showcasing your skills and earning from it as well. Not only that will help you keep learning new things, but also make you a decent amount of money.

So, what do you think about making money online teaching people how to build products? Comment below and let us know!

11 Best Tools for Blockchain Development

Dr. Michael Garbade — Thu, 25 Jul 2019 14:39:11 +0000

With the rise in popularity of blockchain, we have witnessed a drastic increase in blockchain development.

No doubt that almost every company wants to take advantage of decentralized ledger technology.

And this is where you come in.

As a blockchain developer, you are highly valuable in the current market. If you want to stay relevant, then you need to make the most out of the blockchain development tools out there.

Hdhameliya, a blockchain developer from the United States, also speaks about the importance of tools and how choosing the right tool can radically improve efficiency and productivity. He is super selective in his tools and always advises to try out tools before incorporating them in the workflow.

10 Best Tools for Blockchain Development

Solidity

Solidity is one of the most popular programming languages used in blockchain development.

It supports the object-oriented paradigm and is used to write smart contracts. Ethereum dApps can also be coded with Solidity. Solidity is designed to target the Ethereum Virtual Machine(EVM).

So, what makes Solidity so special? First of all, it is used in one of the most popular blockchain solutions, i.e., Ethereum.

Secondly, it can be used to smart contracts which open up a variety of use-cases, especially when it comes to crowdfunding, voting, and multi-signature wallets.

As a blockchain developer, you can get started by going through Solidity documentation.

Cakeshop

Cakeshop lets you manage a local blockchain node.

It comes with APIs and tools which you can use to set up the cluster node, work with contracts, and explore the chain.

Geth

Geth is Ethereum node implementation. It is created using the Go programming language. Geth is used in a variety of tasks on the Ethereum blockchain.

It can be used to transfer tokens, mine ether tokens, and even create smart contracts. Furthermore, it can also be used to explore block history.

Geth is available in the three interfaces including:

JSON-RPC server
Command-line
Interactive console

As a blockchain developer, you can use Geth on all three major operating systems, i.e., Windows, Mac, and Linux.

Once you install Geth, you need to either connect to an existing blockchain or create your own. To simplify things, Geth automatically connects to Ethereum mainnet.

Warning: Geth downloads whole Ethereum blockchain before you can start using it. Depending on your internet speed connection, it can take a while! We also recommend using an external hard disk to store Ethereum blockchain.

Blockchain Testnet

As a blockchain developer, you will always need a blockchain testnet.

It is an essential tool as it lets you test your dApps before making them live.

Each blockchain solution has its testnet, and we recommend that you use the respective testnet.

Testnets are especially useful as it lets you test without spending real resources. Ethereum, for example, uses gas as the fuel for carrying out different actions. It is not possible for developers to spend gas every time they do a test run. This means spending thousands of dollars to test. It is not feasible.

A testnet lets blockchain developer iron out bugs without spending tons of cash. The choice of testnet depends on your dApp. You can use public test, private test, or GanachiCLI - a customizable blockchain emulator.

Blockchain-as-a-Service(BaaS)

Implementing a full end-to-end blockchain solution is not practical for any business out there. This gave rise to Blockchain-as-a-Service(BaaS).

With BaaS, businesses can create and host their dApp solution on cloud infrastructure. They have to pay for using BaaS. Moreover, they also need to hire blockchain developers to take care of all the implementation process.

As a blockchain developer, you should know how to work with BaaS. it can help you gain more trust and reputation. It is similar to Software as a Service(SaaS) model.

Few examples of BaaS solutions that you should know include Azure, Microsoft, and SAP.

Truffle

Truffle is Ethereum blockchain framework. It offers asset pipeline and development environment for Ethereum development.

With Truffle, you can develop complex Ethereum dApps and smart contracts. It has a vast library that let you tackle challenging requirements.

The key features offered by Truffle include the following:

Automate contract testing using Chai and Mocha
Do full smart contract development including linking, compilation, and deployment
Do custom build procedures with the configurable build pipeline

And much more!

Ether.js

Ether.js is a handy tool when it comes to developing client-side JavaScript wallets. It lets you interact with Ethereum blockchain.

Initially, it was only used to work with ethers.io, but now it is a full-fledged general-purpose library.

The key feature of Ether.js includes the following:

Keep private keys safe in client
Connect easily to Ethereum nodes using MetaMask, Etherscan, and other tools.
Small in size, 88kb compressed.
Offers great documentation
Open-source (comes with MIT License)

Remix IDE

Remix IDE is a popular IDE that runs from the browser. It lets you develop Solidity contracts from the browser.

It is developed using JavaScript which means that you can use any modern browser. You can also use it locally. It comes with module support that brings more functionality to the IDE.

For example, you can use a file explorer module to save or load files from your computer. Other useful modules include plugin manager, solidity editor, terminal and settings.

They also have excellent documentation.

Hyperledger Caliper

Hyperledger Caliper lets you check the blockchain performance.

It can determine blockchain performance using different parameters including latency, success rate, resource consumption, and throughput.

Solc

If you have used Solidity, you already know its syntax is similar to ECMAScript as it is a loosely-typed language. But, Ethereum Virtual Machine uses a slightly different format which makes Solc a must-have tool for Ethereum related projects.

Solc is a Solidity compiler that covers solidity script into a more readable format. Its popularity can also be gauged from the fact that it comes natively with most of the Ethereum nodes.

Solc can also be used for offline compiling.

dAppBoard

If you want to ease your Ethereum development, then check out dAppBoard. It is an analytical platform used for Ethereum smart contracts. Moreover, it also comes with Ethereum blockchain explorer.

dAppBoard is web-based and let you monitor smart contracts running on Ethereum networks. It can give you information such as a total number of users for a particular dApp or get an overview of the whole Ethereum network.

Conclusion

This leads us to the end of our best tools for blockchain development. As a developer, you should always be on the outlook for new tools. The best way to do so is to watch other developers develop interesting things. This way, you can learn which tool can work for you.

Are you excited to try out new tools? Let us know in the comment section below.

Also, published on Dzone

How WordPress Security Team Protects WordPress Core

Dr. Michael Garbade — Thu, 04 Jul 2019 18:44:55 +0000

Have you ever wondered what makes WordPress secure? If you do, then we got you covered as we will go through how WordPress Security works.

WordPress is the number one content management system. But, that also makes it the number one target for hackers.

Jpolansky, a cybersecurity expert from the United States, also thinks on similar lines. His work surrounds on network monitoring, which focuses on how to understand network data and threats identity. According to him, WordPress’s popularity is what makes it an ideal hackers target, and it is the job of the WordPress security team and ethical hackers to find the loopholes and fix them!

Is WordPress Insecure?

WordPress is one of the most vulnerable content management systems out there. More than 70% of the WordPress website has some form of vulnerability.

However, out of the 70% infected WordPress website, only 10% are the ones that occurred due to the WordPress core weakness. On top of that, these sites are hacked because they were using old WordPress build and have not been updated to a more secure WordPress version.

Source: wpwhitesecurity.com

Most of the hacks are zero-day exploits which are fixed by the WordPress team as soon as they come out.

The hacks also happen because the site uses bad themes, plugins, or hosting. Even the careless end user can make their site insecure and make it vulnerable to hackers.

In short, WordPress is not secure. The reason behind it is its ecosystem. It is the cumulation of different aspects, including users, plugins, and themes, which means the majority of WordPress websites are vulnerable.

Security Releases

The WordPress release cycle is at the core of improving WordPress with each release.

It starts with the formation of the core team and then discussing features. Once the features are decided upon, they move to the development phase. Next, they release betas to test out the build and find out any bugs associated with it. The release candidate is then followed by the launch.

WordPress version numbering determines if it is a major release or a security release.

All major releases start with first two number sequence. So, that means that 5.0, 4.9, 3.5, etc. are all major releases.

However, the minor releases are aimed to provide critical bugs and vulnerabilities fixes.

So, what does that mean for a WordPress user? Not only they have to update to major releases, but also keep updating to the minor releases as well. The minor releases are aimed at security and should not be ignored at any cost. Security releases are pushed automatically to WordPress website if they are not turned off by the admin itself.

Role of WordPress Security Team

So, who keeps WordPress core safe from all the vulnerabilities and hacks? It is the “WordPress Security Team.”

The security team consists of approx 50 experts - a group of security researchers and lead developers. Their work is to collaborate with other security teams all around the world, and ensure that they fix the vulnerabilities before it is exploited by hackers.

The security team is proactive in their approach and always ensure that potential vulnerabilities are put forward and fixed as soon as possible.

How secure is the WordPress core?

Over the years, WordPress has seen many major and minor releases.

WordPress follows the OWASP to ensure that WordPress maintains the same level of security.

OWASP is the Open Web Application Security Project for web application security. It is a community-driven and extremely comprehensive.

The top 10 OWASP threats have been covered and secure in WordPress. They include the following.

Injection
Session Management and Broken Authentication
Cross-Site Scripting(XSS)
Insecure Direct Object Reference
Sensitive Data Exposure
Security Misconfiguration
Missing Function Level Access Control
Known Vulnerabilities for using components
Cross-Site Request Forgery(CSRF)
Unvalidated Forwards and Redirects.

Apart from the top 10 threats, other security concerns are also handled by OWASP. As a WordPress user, you should not worry about the major vulnerabilities at all.

If you fancy yourself to help WordPress security, you should learn about Ethical Hacking Basics. You can get the basics of ethical hacking and grow yourself as a security expert -- and maybe one day help secure WordPress core!
WordPress Security as a process
WordPress ecosystem is huge. It consists of plugins and themes, developed by countless third-party developers. The quality of the code of the plugin and themes also determine whether your site is secure or not.

As an administrator, you need to secure your website correctly. You can also use Sucuri, WordFence, and BulletProof plugins to automate most of the security of the site. These plugins or services provide WordPress security as a process. WordPress security is a huge topic, and many companies working hard to secure your website!

What’s next?

WordPress security is essential for all the users and the web itself. If it stays secure, then most of the internet stays secure, considering that 30% of the online websites are developed using it.

So, what do you think about WordPress security?

Comment below and let us know.

3 Ways to Create Objects in Object-Oriented JavaScript

Dr. Michael Garbade — Thu, 04 Oct 2018 19:41:46 +0000

(This article was originally published on my blog here ).

JavaScript is a powerful programming language that supports Object Oriented Programming (OOP).

In fact, in JavaScript, objects rule the day—from core features such as strings and arrays to browser APIs built using the language.

Bautista, a U.S.-based web developer who is passionate at teaching people about programming, emphasizes that “to take your JavaScript skills to the next level, you need to understand the object-based nature of the language.”

Here are three ways to create objects in Object-Oriented JavaScript (OOJS) programming:

1. Using object literals

In OOP, an object literal refers to a comma-split list of name-value pairs enclosed within curly brackets.

The names are strings, and the values are any primitive data types available in JavaScript such as arrays, strings, numbers, functions, and many others.

Usually, object literals are utilized in encapsulating code and wrapping it in an orderly package. This way, they prevent collisions with variables and objects found on the global scope.

With object literals, you can gather properties and methods together and make your code clean and uncluttered.

Here is an example:

var liveedu = {
  //declaring properties
student: "james",
  //declaring methods
watch: function() {
    console.log("learn new tech skills");
  },
};
//accessing methods and properties
liveedu.watch();
//output is learn new tech skills

JavaScript object literals are singletons, and they allow you to create objects conveniently and flexibly.

They save you from writing excessive lines of code.

For example, you can place an object literal anywhere in your workspace without including any previous setup, and it will still work well—something which can be very useful!

Although object literals are important, they do not support instantiation or inheritance.

If you want to make use of these features, you’ll need to use other techniques for creating objects.

2. Using object constructor functions

Constructor functions are the most conventional technique of creating JavaScript objects that rely on prototyping inheritance to utilize each other’s functionalities.

A key characteristic of these functions is that they can be instantiated and inherited from.

Let’s see an example of how constructor functions can be used in OOJS.

function Liveedu(student) {

      // properties

    this.student = student;

    // methods

    this.watch = function() {

      console.log(this.student + "learns new tech skills");

    }
}

// instantiating the object

var liveedu = new Liveedu("James ");

// accessing methods and properties

liveedu.watch(); //output is James learns new tech skills

console.log(Object.getPrototypeOf(liveedu)); // output is object

Here is what is happening on the above code:

Constructor functions are created just like regular functions. However, the difference is that the this keyword is employed for declaring properties and methods. In this case, this represents the object presently in the scope of the Liveedu function.
A new object referred to as liveedu is created using the new operator. Typically, new binds the newly created object to the this operator within the called constructor function. Consequently, the binding enables the liveedu object to acquire the properties and methods of the constructor function.
The liveedu object has a property referred to as prototype, which is where all inherited members are defined. So, when a function like watch() is called, the browser will move up the chain of objects and their respective prototype properties until it retrieves its value.

3. Using prototyping inheritance

JavaScript objects can also be created using the concept of prototypical inheritance.

Most modern browsers implement prototypes using a special property called proto, which is pronounced as dunder proto (shortened version of double underscore prototype).

Let’s use the following examples to illustrate how proto can be used in prototyping inheritance.

var liveedu = { 

    student: "james",

    watch: function() {

        return this.student + " is learning new skills";
    }
}

var livecoding = { 

    student: "felix",

    watch: function() {

        return this.student + " is learning new skills";
    }
}

As you can see on the above code, both objects have similar methods, which make the code look redundant.

Therefore, to make the objects share the same watch method, we can use the proto prototype property.

In other words, we can use the prototype to extend the properties of the objects.

Here’s is the rewrite of the above code:

var WatchProto = {

    watch: function() {

        return this.student + " is learning new skills";
    }

}

var liveedu = { 

    student: "james",

    __proto__: WatchProto

}

var livecoding = { 

    student: "felix",

    __proto__: WatchProto

}

console.log(liveedu.watch()); //james is learning new skills

console.log(livecoding.watch()); //felix is learning new skills

As you can see on the above code, both the objects share the same method that is defined in WatchProto. The liveedu and livecoding objects can directly access it, leading to cleaner and efficient code.

It’s important to note that proto is a new JavaScript ES6 syntax that may not be available in old browsers.

Alternatively, you can use the Object.create() method to create prototypes.

Here is an example:

var WatchProto = {

    watch: function() {

        return this.student + " is learning new skills";
    }

}

var liveedu = Object.create(WatchProto);

liveedu.student = "james";

Wrapping up

Understanding JavaScript objects is key to getting deeper into the ubiquitous language.

What’s your experience with implementing the object-oriented programming features of JavaScript?

Please share your comments and questions below.

How to Use the HTML5 Canvas Element with JavaScript

Dr. Michael Garbade — Wed, 19 Sep 2018 21:26:57 +0000

(This article was originally published on my blog here ).

Before HTML5 was introduced into the world of web developers, things were lifeless, unsatisfying, and complicated to achieve. For instance, any developer who needed to create graphics and animations was forced to depend on tools like Flash plugin or Java plugin—something which was burdensome and head spinning.

Nikitka, who has more than seven years of web development experience and currently teaches people his skills, says that “the advent of the powerful HTML5 element called Canvas turned around things and empowered developers to complete actions that were previously difficult.”

What is HTML5 Canvas?

Canvas is an HTML5 element that allows you to easily and powerfully draw graphics, on the fly, using the ubiquitous JavaScript programming language.

The element only works as a container for graphics; therefore, you should use JavaScript to render the graphics.

You can use the Canvas element to achieve various objectives on your web applications, including drawing graphs, creating HTML Canvas animations, developing games, or creating photos—all without depending on another external tool.

Amazingly, Canvas is available as an API, and it is supported by most modern browsers and platforms. Furthermore, it’s cross-platform compatible. As such you can create an application once, and deploy it anywhere—on PCs or mobile devices.

Let’s see a Canvas markup code

Here is a simple markup for the HTML5 Canvas element:

<canvas width="320" height="160" id="canvasExample"></canvas>

As you can see on the above code, the Canvas element allows two specific attributes: width and height. If you do not provide values for these two attributes, the Canvas will resort to its default values of 300 pixels for width and 150 pixels for height.

The id attribute is used for identifying the Canvas element in the JavaScript code. Furthermore, you can include other CSS styling properties to make the canvas drawing region more interactive and visible, such as padding, background color, or border—just like with any other HTML element.

How to draw on a Canvas

To create graphics on a Canvas, you need to begin by targeting it using the Document Object Model (DOM).

And, an id attribute will assist you to identify the matching target location (in this HTML Canvas example, the id is “canvasExample”).

Initially, the element is blank. Thus, to exhibit something, a JavaScript script should obtain the rendering context before drawing on it.

The Canvas element has an in-built DOM method referred to as getContext. It is a JavaScript function utilized in accessing the rendering context together with its drawing methods. This function accepts a single parameter, which is usually the 2D graphics context (defined as “2d”).

Example of JavaScript Canvas Code

For example, to create a rectangle shape on the Canvas, you’ll need the following property and functions:

fillStyle = “color”—it adds color to the shape; otherwise, it will have a default color of black
fillRect(x,y,width,height)—it draws a filled rectangle
strokeRect(x,y,width,height)—it gives the rectangle its outline
clearRect(x,y,width,height)—it clears the specified rectangular section and makes it entirely transparent

For defining coordinates, the Canvas grid or coordinate system is used. In this system, the original dimensions are located on the upper-left corner of the Canvas region, at coordinate (0,0). *

As such, the X coordinate will be moving to the right whereas the Y coordinate will be moving downwards. The distance is in pixels.

Here is an image showing how the Canvas Grid system works:

Each of the above-mentioned functions for creating rectangles takes the following parameters for denoting the coordinates and dimensions:

x gives the horizontal position from the upper-left corner to the right
y gives the vertical position from the top-left corner to the bottom
width gives the width of the rectangle
height gives the height of the rectangle

Here is a JavaScript canvas tutorial example code that draws a rectangle:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript HTML5 Canvas Example</title>
</head>
<body onload="canvasExample()">
    <canvas width="320" height="160" id="canvasExample"></canvas>
<script>
    function canvasExample(){
        //identify the Canvas element via the DOM
        var canvas = document.getElementById("canvasExample");
        //checking for Canvas browser compatibility
        if(canvas.getContext){
            //Use getContext to specify the rendering context
            var context = canvas.getContext('2d');
            //setting of color
            context.fillStyle = "blue";
            //creating the rectangle
            context.fillRect(50,50,150,250);
            context.clearRect(75,75,100,50);
            context.strokeRect(90,90,75,20);

        }else{
            //providing a fallback option
            alert("Please a Canvas-Supporting Web Browser");
        }
    }
</script>
</body>
</html>

Here is the output on a browser:

This is what is happening in the JavaScript script:

The Canvas element is first identified through the DOM
The context is defined
The fillRect() function produces a rectangle of 150 by 250 pixels
The clearRect() function then deletes a rectangle of 100 by 50 pixels from the center
Lastly, strokeRect() function constructs a rectangle of 75 by 20 pixels within the cleared region

Wrapping up

As demonstrated by this HTML5 Canvas example, this element allows you to use JavaScript to dynamically render graphics on the web browser.

Canvas is great because it is completely open sourced, highly interactive, and very flexible. It’s what you need to add some life to your applications and accelerate their performance.

Therefore, you need to learn how it works and take your web development skills to the next level.

All the best.

3 Best Practices for Working With React Components

Dr. Michael Garbade — Thu, 06 Sep 2018 19:34:39 +0000

(This article was originally published on our blog here ).

React.js (also referred to as ReactJS or React) is a popular JavaScript library for creating wonderful user interfaces.

One of the notable features of React is that it relies on a component-focused approach for building interactive UIs.

Maxim-Filimonov, who has more than ten years of experience in the software development industry and presently teaches people his skills, says that “adhering to the React API best practices when creating components will assist you to write high-quality and clean React code.”

Click here to watch and learn from one of his projects on How to Build Cross-platform Mobile App in React Native.

Here are three React tips and best practices you need to take your development skills a notch higher.

1. Avoid creating new components unnecessarily

Here is an example of a React component:

export default class Liveedu extends PureComponent {
  static propTypes = {
    userIsLearning: PropTypes.bool,
    user: PropTypes.shape({
      _id: PropTypes.string,
    }).isNeeded,
  }

  static defaultProps = {
    userIsLearning: false,
  }

  render() {
    const { userIsLearning, user } = this.props;
    if (!userIsLearning) return <Learning />;
    return (
      <div>
        <div className="two-col">
          <section>
            <LearnOnline userId={user.id} />
            <Watching projects userId={user._id} />
          </section>
          <aside>
            <UserDetails user={user} />
            <WatchProjects user={user} />
          </aside>
        </div>
        <div className="one-col">
          {isInfo('student', user={user._id} &&
            <LearnersInfo userId={user._id} />
          }
        </div>
      </div>
    )
  }
}

As you can see from the above code, we have a single component called Liveedu. We’ve included other components like LearnOnline and WatchProjects inside this huge component.

Since we are taking all the data from the same location (user), we could have just declared the components separately. However, to achieve conciseness, we opted to include the smaller components inside one component.

Whereas there are no black and white rules concerning how to create a new component for your React code, the following guidelines are worthwhile:

If you are going to reuse your code, consider creating new components for each functionality.
If you want each component to represent a specific functionality, then making new components can be a good idea.
If your code is becoming unwieldy and cluttered, improve readability by creating new components.

2. Know when to use Component, Stateless Functional Component, and PureComponent

Another best practice when creating React code is to know when to use the various types of components.

Here is a code sample that shows how to create a Stateless Functional Component:

const Liveedu = () => (
  <WatchProjects>
    <H1>Programming Projects</H1>
    <div className="learn_online">
      <Link className="liveedu_project_image" to="/">
        <img alt="experts building projects" src="liveedu.jpg">
      </Link>
      <div className="Project Learning Platform">
        <h2 className="create">Programming Projects</h2>
        <li>JavaScript</li>
        <li>PHP</li>
        <li>Angular</li>
      </div>
    </div>
  </WatchProjects>
);

This type of component will assist you to write clean and uncluttered React code.

You can use them to make components that are not relying on any type of refs, state, or other lifecycle methods.

Therefore, you’ll not be concerned about state manipulation or lifecycle methods, which will not force you to install libraries for performing tests.

Just like the name suggests, this component is without any state; it’s just a function. Therefore, it assists you to define a component just like a constant function that returns the required data.

In other words, it is a function that is used to return JSX.

In the above first code sample, you might have realized that we declared Liveedu as PureComponent instead of using the traditional Component.

PureComponent is often used to prevent React from re-rendering unnecessarily. Whenever a component receives a new prop, it will automatically be re-rendered.

This will take place even when a component has received a new prop without any changes.

For example, if a prop is referencing a string or Boolean value, and changes take place, a PureComponent can detect that.

On the other hand, whenever a property inside an object experiences any changes, a PureComponent cannot initiate React re-rendering.

Therefore, you can use PureComponent in place of Component to ensure re-rendering takes place only when necessary.

3. Use spread attributes sparingly

The … (three dots) spread operator is useful for achieving brevity in your React code.

Here is a code sample that selects specific props that a component consumes and uses the spread operator to pass the entire props object

const Liveedu = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked to start learning")}>
        Watch Experts Create Practical Projects
      </Button>
    </div>
  );
};

In the above code, the kind prop is consumed without any issues. Furthermore, it is not passed to the <button> element in the Document Object Model (DOM).

Also, the other props are passed using the …other object, which adds some flexibility to this component. In fact, it passes an onClick and children props, as shown on the code.

Whereas using spread attributes in your components can be beneficial, it increases the chances of passing needless props to components that do not care about their existence.

Furthermore, this syntax can make you pass unwarranted HTML attributes to the DOM.

Therefore, using them sparingly is better.

Wrapping up

React components are the cornerstone to creating powerful and intuitive user interfaces.

The above-mentioned best practices will give you the confidence you need to take React.js by its horns and escalate your front-end development skills to the next level.

What other React.js best practices do you know?

Please share your comments below.

iOS vs. Android Development: Which is the Best Choice for You?

Dr. Michael Garbade — Tue, 21 Aug 2018 20:37:56 +0000

(This article was originally published on my blog here ).

The world of operating systems has seen the race to clinch the biggest market share tighten between two giants: iOS and Android.

Asitaka, who has more than four years in Android development and currently teaches people his skills, says that “App developers are often forced to decide which platform between the two would best suits their development needs.”

You can watch and learn from one of his projects here.

Here are three critical things that will assist you to make the best choice:

The target audience
Your set budget
The benefits you expect to accrue

1. The Target Audience

What are your audience’s preferences? Your audience’s behavioral patterns should guide you on the best platform to choose for your app.

Currently, the Android operating system commands a bigger market share of 87% with the platform being a favorite in developing countries and among lower income earners.

This can be attributed to the introduction of smartphones running on the Android OS in emerging markets for as little as $100.

For a long time, the iPhones were out of reach for the low-income earners who could not afford the $600 that the devices were priced at.

The proliferation of the cheaper smartphones made it affordable and accessible to more users.

The Google infrastructure also plays a huge role in the popularity of smartphones by allowing users to fulfill their desires and customize their devices. For instance, the availability of different widgets and backgrounds lets users to modify and lock their home screens as they please.

The iOS, on the other hand, does not command such a huge market share. The platform has a 12.82% following and it is a favorite with the younger generation who spend most of their time scouting apps. It is also popular among the educated class and those with higher income levels.

In the U.S., for instance, an iPhone user makes an average of $85,000 annually while an Android user averages $61,000 in annual earnings; a 40% contrast.

Users have been found to spend almost twice their time on apps on the iOS platform as compared to the Android apps.

It is also intriguing that the iOS platform appeals to a target audience that put style, simplicity, and uniformity before anything else.

The iOS operating system, therefore, is the best choice if you aim to flourish in the premium smartphone market without necessarily targeting mass adoption of the app.

The Android operating system, on the other hand, is best suited where there’s need for a non-restrictive platform that offers more flexibility in publishing apps to the target audience.

2. Your Budget

The resources available at your disposal towards the development of an app also determine the platform you choose for the application.

Developing an Android app will normally require more time and resources compared to an iOS app. This, therefore, makes it more expensive in addition to the need for fragmentation.

For Android app development, responsive designs have to be built to fit in different screen sizes and be available for various versions of the operating systems while accommodating the different technical capabilities.

Another downside of the Android development platform is its incompatibility with some mobile devices as well as superior consumption of RAM. An Android app requires more lines of code compared to an iOS app with developers writing about 40% more for the Android.

The Apple brand has a strong reputation for its intuitiveness and maturity when it comes to its apps and operating system.

It boasts of its Xcode which offers excellent development tools for app builders that make the process of building and debugging smooth and proficient.

Piracy of apps on iOS is also difficult thanks to the Xcode being a closed system. The same cannot be said of the Android platform.

Your budget will also come into question when choosing the best operating system based on the app’s quality. Despite the Android Studio allowing for beta testing of the apps, its functionalities and features are still inferior.

Android apps of low quality often translate to higher costs as a result of constant maintenance which can be quite bothersome, if you are on a low budget.

Considering the long-term costs when launching a mobile app, the iOS is the best choice since the Apple Store requires a recurring $99 annual payment.

Google play, on the other hand, charges a paltry one-off payment of $25 but the maintenance costs will definitely hit the roof.

Therefore, knowing the difference between iOS and Android development costs can assist you to make a sound decision.

3. The Potential Benefits

You will also have to consider the potential benefits that will accrue once you launch your application.

The likely gains you will reap from advertisements and the driving of in-app purchases should influence your choice of a development platform.

What is more important to you: is it app engagement or app popularity? Is evaluating Android vs. iOS difficulty essential?

If you are looking forward to driving in-app purchases, then iOS is the best choice given that most of its users are on a higher income level and will likely use twice as much time on apps compared to Android users.

Therefore, if you are chasing the money and would like to sell your apps and drive other in-app purchases, Apple users are your best bet.

The Android operating system, on the other hand, is best for advertisement related benefits. Ad-supported content performs best on the Android platform which greatly drives mobile monetization.

The operating system’s popularity with a wider base of users allows you to access a larger audience which greatly boosts your revenue streams through the in-app advertisements.

It is important, therefore, that your choice of a development platform is in line with your app development goals for you to reap maximum benefits.

Conclusion

The battle for supremacy between iOS vs. Android development for building apps is not likely to end any time soon.

In fact, you should expect it to escalate even further as the two operating system bigwigs try to outdo each other as they improve on their features and functionalities.

This will definitely work to the app developers’ advantage as the development platforms improve to unprecedented levels.

Ultimately, you should go for the platform that best meets your needs and helps you to achieve your app development goals.

Click here to learn about iOS app development.

Click here to learn about Android app development.

How to Create Your Own Cryptocurrency Blockchain in Node.js

Dr. Michael Garbade — Tue, 07 Aug 2018 22:09:44 +0000

(This article was originally published on my blog here ).

The recent explosion of cryptocurrencies and their underlying blockchain technology has taken the world by storm.

As much as blockchain is a big buzz word these days, few people properly understand how the technology works to power the incredible growth of cryptos like Bitcoin and Ethereum.

Elliot Minns, who has more than six years of software development experience and currently teaches people skills on how to create cryptocurrencies, says that “making your hands dirty by learning how to create blockchain will assist you appreciate the technology and how it works.”

You can check one of his practical-based projects here.

In this article, we are going to explain how you can create your own simple blockchain in Node.js (and release it to the world, hopefully!).

We’ll call it liveEduCoin.

Blockchains

A blockchain is a constantly increasing list of records, referred to as blocks, which are securely connected to each other using cryptography.

The blocks are linked such that if any block within the blockchain is tampered with, the rest of the chain becomes invalid.

This immutability property is central to the growth of cryptocurrencies because it makes it difficult for people to alter their transactions after completing them.

Creating a block

As mentioned earlier, a blockchain comprises of several blocks that are connected to one another. Cryptographic hashes are used to maintain the integrity of the blockchain.

Every block has a hash that is calculated based on its data. It also has the hash of the preceding block. If the hash of any block is changed, it would invalidate the rest of the blockchain.

Here is how a Block class would look like in Node.js:

const SHA256 = require("crypto-js/sha256");
class Block {
    constructor(index, timestamp, data, previousHash = '') {
        this.index = index;
        this.previousHash = previousHash;
        this.timestamp = timestamp;
        this.data = data;
        this.hash = this.computeHash();
        this.nonce = 0;
    }
    computeHash() {
        return SHA256(this.index + this.previousHash + this.timestamp + JSON.stringify(this.data) + this.nonce).toString();
    }

As you can see above, the constructor function, which instantiates the class, takes the following parameters:

index—it tracks the position of a block in a blockchain.
timestamp—it places a timestamp of every transaction completed.
data—it provides information about the transactions completed, such as the quantity bought.
previousHash—it references the hash of the preceding block in the blockchain.

We used the computeHash function to generate the cryptographic hash of every block according to the above values. To do this, we imported the crypto-js library and utilized its SHA256 hash function.

The SHA256 is a strong, irreversible hash function that is used for ensuring the security of most cryptocurrencies.

To set up the crypto-js library, navigate to the terminal, and on the same folder as your project folder, install it using npm.

Here is the code you can use:


//remember to run npm init first
npm install --save crypto-js

Creating the blockchain

Block-chain is based on a concept that the blocks are “chained” to one another.

Therefore, we’ll begin chaining the blocks to each other in a Blockchain class.
Here is the code:

class Blockchain{
    constructor() {
        this.chain = [this.buildGenesisBlock()];
        this.complexity = 5;
    }
    buildGenesisBlock() {
        return new Block(0, "17/07/2018", "genesis block", "0");
    }
    obtainLatestBlock() {
        return this.chain[this.chain.length - 1];
    }
    addBlock(newBlock) {
        newBlock.previousHash = this.obtainLatestBlock().hash;
        newBlock.mineBlock(this.complexity);
        this.chain.push(newBlock);
    }
    }

As you can see on the above code, the class is composed of the following helper functions:

a). Constructor function

The blockchain is initialized by passing buildGenesisBlock.

b). Building the genesis block

In a blockchain, the genesis block is what signifies the start of the blockchain. This initial block doesn’t have any predecessors and the subsequent blocks are built on it.

We’ll use the buildGenesisBlock() function to create it.

c). Getting the latest block

To get the latest block in the blockchain, we’ll use the obtainLatestBlock() function.

d). Adding new block

To add a new block to the blockchain Node.js example, we’ll use the addBlock() function. To achieve this, we’ll add the hash of the previous block to the new block—to maintain the blockchain’s integrity.

Since we altered the details of the new block, it will be essential to compute its hash once more. After it is completed, we’ll push the block into the chain array.

e). Confirming the validity of the blockchain

The confirmValidity() function is pivotal in assessing the integrity of the blockchain and ensuring that flaws are absent. This function employs a series of if statements to confirm whether the hash of every block is unaltered.

Additionally, it also checks if the hash values of every two successive blocks are pointing to each other. If everything is valid, it returns true; otherwise, it returns false.

Here is the code:

confirmValidity() {
        for (let i = 1; i < this.chain.length; i++){
            const currentBlock = this.chain[i];
            const previousBlock = this.chain[i - 1];
            if (currentBlock.hash !== currentBlock.computeHash()) {
                return false;
            }
            if (currentBlock.previousHash !== previousBlock.hash) {
                return false;
            }
        }
        return true;
    }

Testing the blockchain

This is the most exciting section!

Here is the code:

let liveEduCoin = new Blockchain();
console.log('<<Lets mine block 1>>');
liveEduCoin.addBlock(new Block(1, "27/07/2018", { quantity: 10 }));
console.log('<<Lets mine block 2>>');
liveEduCoin.addBlock(new Block(2, "27/07/2018", { quantity: 20 }));

We’ll create a new instance of the Blockchain class and name it liveEduCoin.

Thereafter, we’ll add some arbitrary blocks into the blockchain. You can add any kind of data into the blocks.

In this simple blockchain Node.js tutorial, we decided to add an object with the quantity property.

Here is the entire code for our blockchain project:

const SHA256 = require("crypto-js/sha256");
class Block {
    constructor(index, timestamp, data, previousHash = '') {
        this.index = index;
        this.previousHash = previousHash;
        this.timestamp = timestamp;
        this.data = data;
        this.hash = this.computeHash();
        this.nonce = 0;
    }
    computeHash() {
        return SHA256(this.index + this.previousHash + this.timestamp + JSON.stringify(this.data) + this.nonce).toString();
    }
    mineBlock(complexity) {
        while (this.hash.substring(0, complexity) !== Array(complexity + 1).join("0")) {
            this.nonce++;
            this.hash = this.computeHash();
        }
        console.log("Mining is taking place: " + this.hash);
    }
}
class Blockchain{
    constructor() {
        this.chain = [this.buildGenesisBlock()];
        this.complexity = 5;
    }

    buildGenesisBlock() {
        return new Block(0, "17/07/2018", "genesis block", "0");
    }

    obtainLatestBlock() {
        return this.chain[this.chain.length - 1];
    }

    addBlock(newBlock) {
        newBlock.previousHash = this.obtainLatestBlock().hash;
        newBlock.mineBlock(this.complexity);
        this.chain.push(newBlock);
    }

    confirmValidity() {
        for (let i = 1; i < this.chain.length; i++){
            const currentBlock = this.chain[i];
            const previousBlock = this.chain[i - 1];

            if (currentBlock.hash !== currentBlock.computeHash()) {
                return false;
            }

            if (currentBlock.previousHash !== previousBlock.hash) {
                return false;
            }
        }
        return true;
    }
}

let liveEduCoin = new Blockchain();
console.log('<<Lets mine block 1>>');
liveEduCoin.addBlock(new Block(1, "27/07/2018", { quantity: 10 }));
console.log('<<Lets mine block 2>>');
liveEduCoin.addBlock(new Block(2, "27/07/2018", { quantity: 20 }));

If we save the code on a blockchain.js file and run it on the terminal, here is the output:

It works!

Conclusion

The above cryptocurrency blockchain in Node.js is far from complete. In fact, if you go ahead and release it to the world, you can end up to be the only one using it!

For example, it lacks important tenets of a successful cryptocurrency such as proof-of-work and a peer-to-peer network.

Nonetheless, the blockchain node.js demo shows how a blockchain works. Contrary to what many people think, this simple project illustrates that the concepts of blockchain are simple and easy to implement.

Of course, if you are looking for a more advanced project to entirely immerse yourself in the world of cryptocurrencies, you can click here to grab a tutorial from the LiveEdu website.

2018 FIFA World Cup: Three Key Lessons for Web and Mobile Developers

Dr. Michael Garbade — Wed, 01 Aug 2018 22:36:52 +0000

(This article was originally published on my blog here ).

Besides the thrill and entertainment that the 2018 FIFA World Cup brought, it was full of critical lessons that web and mobile developers can use to take their careers to the next level.

From big teams falling to the underdogs to technology making critical match-changing decisions to surprises filling the stadiums, the happenings during the World Cup carries with it lessons—beyond the 90+ minutes that each match was played.

For example, if you want to create an online voting web application like Ricardo does it here, or any other type of application, the soccer event could inculcate important lessons to help you sew things together well.

Here are three key 2018 World Cup lessons that programmers can take home from the monumental sporting event.

1. Overcome your odds—no matter what it takes

Although Croatia lost to France in the final match by 4-2, the Croatian team will be remembered as the greatest underdog performance in the tournament’s history.

Croatia, with a population of four million people—one-13th the size of England's—surmounted economic and demographic odds to brush shoulders with the giants and reach the event’s pinnacle.

Furthermore, how the little country with big dreams showed an indomitable spirit throughout the matches is encouraging. In most of the matches, the Croatian team had to claw back from behind—after conceding some goals—which affirms its strong endurance and never-say-die attitude.

Actually, the team won three knock-out matches during overtime, demonstrating their mental strength under massive pressure.

As a web or mobile developer, how many times do you throw tantrums when your code doesn’t compile? When things seem not to be working, do you give up coding the application altogether or you reevaluate your mistakes and seek for assistance?

As demonstrated by the endurance of the Croatian team, you need to safeguard your weaknesses through overplaying your strengths—without lamenting at the odds that are against you.

2. Embrace teamwork

Emerging winners in a football match requires experts in various domains—goalkeepers, defenders, midfielders, strikers, and coaches—to work together to achieve the victory. Every player has a role that he needs to deliver, while collaborating with the others in the field.

In the 2018 World Cup results, the players that embraced teamwork brought glory to their countries. For example, France took home the trophy because of their wonderful display of teamwork.

Almost half of the French team consisted of African-immigrant players. The former U.S. President Barack Obama, during a recent lecture to celebrate 100 years since the birth of President Nelson Mandela said that “embracing diversity delivers practical benefits since it ensures that a society can draw upon the energy and skills of all people. And if you doubt that, just ask the French football team that just won the World Cup.”

As a developer, you need to learn how to work with others, regardless of their backgrounds and nationalities. If members of a team complement one another’s development skills and collectively join hands in completing tasks, they become more productive as a unit than when working at individual levels.

If you are a coding superstar and you cannot work together as a unit with other programmers in your team, the chances of success will be dwindled.

For example, although Portugal and Argentina had the most talented and awe-inspiring stars in their squads—in Christiano Ronaldo and Lionel Messi respectively—they were unable to utilize teamwork to reach the tournament’s pinnacle.

3. Embrace new technology

For the first time in the history of football, new technologies were used extensively during the FIFA 2018 World Cup to assist the match officials in making game-changing decisions.

For example, a notable technology that has ignited a lot of debate is the Video Assistant Referee (VAR). The video technology was introduced to assist referees review footages of the game before making critical decisions, such as during the final match when the referee used the VAR footage to award France a 38th-minute penalty.

The fact that FIFA, the organization that governs football in the world, adopted new technologies to improve the quality of the tournament shows its commitment to ride with the changing times; the world is quickly adopting new technologies to improve processes and enhance efficiency of outputs.

As a web developer or mobile developer, you should also continuously adopt new technologies or your applications may not meet the current demands of the modern audience.

For example, why should you rely on legacy code that will give you maintenance headaches while a new framework has been released that can improve the efficiency of your operations?

Wrapping up

The 2018 FIFA World Cup has been concluded but the lessons that it brought to the fore are long lasting—especially for developers who often struggle with issues impeding their growth.

What other lesson(s) did you learn from the concluded popular football tournament?

Which one(s) will you use to progress your programming career?

Please share with us in the comment section below.

A Simple Machine Learning Algorithm to Differentiate Between an Apple and an Orange

Dr. Michael Garbade — Fri, 20 Jul 2018 21:45:58 +0000

(This article was originally published on the LiveEdu blog).

Machine learning (abbreviated as ML) is a field of computer science that endows applications with the capability to automatically learn from examples and improve from that experience without relying on hard-coded rules.

With machine learning, it is possible for computers to identify hidden insights and make accurate predictions based on the examples of data provided—with minimal human intervention.

For example, AndreyBu, who has over five years of ML experience, has created a model that can predict stock market data. You can watch and learn from his project here.

In this article, we are going to illustrate how to create a simple machine learning algorithm that can differentiate between an apple and orange.

Without machine learning, finding a solution to such a problem could require writing several lines of code, which may not give the desired results. ML simplifies that process.

Simply, we will create a machine learning algorithm that can learn the differences between the two fruits and make predictions accordingly, after being given some examples.

Let’s get started

We are going to use the Anaconda open source Python distribution. It comes with Scikit-learn, which is the machine learning library we’ll use to implement our algorithm.

In this example, we are going to use a supervised machine learning algorithm, which utilizes a known dataset (referred to as the training dataset) to predict future events.

The training dataset, which consists of input data and output values, learns from the examples provided and makes use of the experience to distinguish between the two fruits.

Here is a general flow of the supervised learning recipe:

Gather training data
Train the classifier
Make predictions

Let’s talk about each of the steps.

1. Gathering training data

The training data are the examples of apples and oranges that we’ll classify according to their differences.

Here is a table that uses the features of the two fruits to differentiate them:

As you can see above, the fruits are differentiated according to their weight and texture.

The last column in every row is what is called label in machine learning. In this case, the label can either be an orange or an apple.

Every row in the table is called a data point. The whole table is called the training data.

It’s important to note that the accuracy of the outcome will depend on the number of examples provided in the training data.

Now, let’s use some Python code to show what is happening in the table.

We will use two variables: features (data in the first two columns) and labels (data in the last column).

In other words, features are the input data and labels are the output values.

Here is the code:

features = [[155, "rough"], [180, "rough"], [135, "smooth"], [110, "smooth"]] 
labels = ["orange", "orange", "apple", "apple"]

Next, because Scikit-learn requires numerical features, let’s convert the strings into integers by defining rough as 0 and smooth as 1.

Let’s do the same for the oranges and apples by giving them integer values of 1 and 0 respectively.

Here is our new code:

features = [[155, 0], [180, 0], [135, 1], [110, 1]]  
labels = [1, 1, 0, 0]

2. Training the classifier

In ML, classification is a supervised learning technique whereby the algorithm learns from the examples data and then utilizes the experience to categorize the new observation.

Now, we’ll use the examples data to train our classifier to make new observations and categorize them. There are several types of classifiers you can use in your machine learning problems.

In this case, to keep things simple, we are going to use a decision tree, which can use decision rules deduced from the data features to learn and make appropriate predictions.

Here is a code that imports the decision tree classifier and adds it to our project:

classifier = tree.DecisionTreeClassifier()

After adding the classifier to our project, we’ll need to train it using a learning algorithm; otherwise, it may not differentiate between an apple and an orange.

The learning algorithm identifies patterns in the training data and makes suitable conclusions.

For example, it may recognize that apples tend to be smoother in texture; therefore, it will develop a rule that tends to identify any smooth fruit as an apple.

In Scikit-learn, the training algorithm is referred to as Fit (which can loosely be interpreted as “find patterns in data.”).

Here is a code that adds it to our project:

classifier = classifier.fit(features, labels)

3. Making predictions

The last step after subjecting the classifier to some training is to test it and see if it can classify a new fruit. We’ll use the predict function to make the predictions.

Let’s say that the new fruit is smooth and weighs 120 grams. Remember that we represented smooth as 1.

And, because the weight is not very high, it is likely to be an apple (0).

Furthermore, smoothness is a feature of apples.

Let’s see if our ML algorithm can make such a prediction:

print (classifier.predict([[120, 1]]))

It works!

The output is what we expected: 0 (apple).

Wrapping up

Here is the entire code for the project:

from sklearn import tree
 # Gathering training data
# features = [[155, "rough"], [180, "rough"], [135, "smooth"], [110, "smooth"]]  # Input to classifier
features = [[155, 0], [180, 0], [135, 1], [110, 1]]  # scikit-learn requires real-valued features
# labels = ["orange", "orange", "apple", "apple"]  # output values
labels = [1, 1, 0, 0]
 # Training classifier
classifier = tree.DecisionTreeClassifier()  # using decision tree classifier
classifier = classifier.fit(features, labels)  # Find patterns in data
 # Making predictions
print (classifier.predict([[120, 1]]))
# Output is 0 for apple

Programming with machine learning is not difficult. To master how to use it in your applications, you need to understand a few important concepts.

Therefore, to increase your skills, you can use practical projects from LiveEdu to learn how experts build real world-changing machine learning applications.

Happy learning machine learning!

Results of a Study to Understand JavaScript Bugs (and How to Avoid Them)

Dr. Michael Garbade — Fri, 15 Jun 2018 19:44:36 +0000

JavaScript is a popular programming language that is extensively used in web applications to enhance user-interactivity on the client side.

Benhartouz, who is currently using JavaScript to teach people how to build a website for searching jobs, says that "unfortunately, the ubiquitous language is prone to bugs and errors, which make most developers frown and freak." You can visit the link to learn more about his project.

Researchers from the University of British Columbia (UBC) recently carried out a study to understand the causes and consequences of client-side JavaScript faults and errors.

The researchers investigated 502 bug reports from 19 bug repositories and discovered some common patterns that make JavaScript-powered applications to behave abnormally.

Here is a table summarizing the findings of the study:

In this article, I’m going to illustrate the key findings of the study and how you can make your JavaScript programs less prone to errors and performance failures.

1. DOM-related errors

Surprisingly, according to the JavaScript bug report study, DOM-related faults accounted for most of the errors, at 68%.

The Document Object Model, usually referred to as the DOM, is a dynamic tree-like structure that consists of the components in the application and how they interact with each other.

With DOM API calls, you can utilize JavaScript to manipulate the constituents of the DOM, making the web page to be interactive without necessitating a page reload.

As much as the features of the DOM allow developers to add interactivity to the applications, they are also one of the main avenues for introducing flaws in JavaScript applications.

For example, a common mistake most developers make is to reference a DOM element before it is loaded on a web page.

Here is the code:

<!DOCTYPE html>
<html>
<body>
     <script>

document.getElementById("javascript").innerHTML = "JavaScript is Fun!";

  //it throws an output error
    </script>
    <div id="javascript"></div>
    </body>
</html>

If you run such a code, it will throw an error. JavaScript code usually loads and runs following the order it appears in a document; therefore, the browser will not know about the referenced element when the code is executed.

There are a couple of ways of solving this problem:

Place the <div id="javascript"></div> first before the script.

<!DOCTYPE html>
<html>
<body>

    <div id="javascript"></div>

    <script>

document.getElementById("javascript").innerHTML = "JavaScript is Fun!";

  //it does not throw an output error

    </script>

</body>
</html>

Use the JavaScript onload event attribute to run the code immediately after the page has been loaded.

<!DOCTYPE html>
<html>
<body onload="bugJS()">

    <div id="javascript"></div>

    <script>

       function bugJS(){

     document.getElementById("javascript").innerHTML = "JavaScript is Fun, yeah?";

        }

    </script>


</body>
</html>

2. Syntax-based errors

The study found out that 12% of all JavaScript bugs were due to syntax errors in JavaScript programs. Syntax faults are due to grammatical errors that are not aligned to the standard syntax of the JavaScript programming language.

Here are two common syntax-based errors:

Mismatched brackets

This error often arises when you forget to match the brackets accordingly, especially when working on a complex application.

Here is an example of a JavaScript object function without one corresponding closing bracket.

functionPerson(name,street){

this.name = name;

this.street = street;

this.info =function(){

returnthis.name +this.street;

//closing bracket missing here

}

Missing a semicolon

Although ending every statement with a semicolon is not necessary in JavaScript, and your code will execute without any problems, the problem usually comes when you have several lines of code, and some of them end up piling up on the same line.

Therefore, it’s a good practice to always end your statements with a semicolon to avoid such bugs.

To avoid making such grammatical errors in your code, you need to spend time increasing your skills in JavaScript programming.

For example, Kauress, who is from the U.S. and has over four years of experience in web programming, has completed a project on how to code a calculator using JavaScript.

You can use his project to increase your skills in JavaScript programming and avoid making syntax errors.

##3. Undefined and null errors

The researchers at UBC discovered that misuse of undefined and null keywords lead to 9% of all JavaScript bugs.

This result of the study implies that most JavaScript programmers do not understand how to use the two keywords correctly to avoid coding errors in JS web applications.

The null keyword is an assignment value, which is a representation of a non-existent value. It also behaves like an object.

Here is an example:

var bugJS =null;

    console.log(bugJS);

        // null is the output

   console.log(typeof bugJS);

        // object is the output

Conversely, the undefined keyword means that a declared variable or any other property does not have an assigned value. In fact, it is a type of itself.

Here is an example:

var bugJS;

   console.log(bugJS);

        // undefined is the output

   console.log(typeof bugJS);

        // undefined is the output

Furthermore, when the null and undefined keywords are compared with one another using the equality and identity operator, it is only the former that considers them to be equal.

console.log(null==undefined);

       //true

  console.log(null===undefined);

       //false

4. Improper usage of the return statement

The return statement is used to tell the interpreter that the running of a JavaScript function is completed, and the value needs to be returned.

According to the results of the study, improper usage of the return statement accounts for 2% of all JavaScript bugs.

For example, a common error most web programmers make is to break the return statement.

Here is a code example:


function bugJS(z) {

    var

    fun =10;

    return 

    z * fun;

}

console.log(bugJS(77));

//it leads to undefined error

Running the above function will lead to an undefined error.

Here is how the interpreter executes the code:

function bugJS(z) {

    var

    fun =10;

    return;//semicolon inserted here automatically

    z * fun;

}

console.log(bugJS(77));

//it leads to undefined error

Since the interpreter will automatically insert a semicolon at the end of the line of the return statement, it will lead to an undefined error.

This also illustrates why ending JavaScript statements with semicolons is important.

5. Other causes of JavaScript bugs

Lastly, the study found out that other JavaScript programming mistakes lead to 9% of all errors and faults in JavaScript code.

For example, a common cause of errors in this category is neglecting the differences in browsers when developing applications.

With the availability of various web browsers, which interpret JavaScript code differently, it is essential for developers to ensure that their applications can run smoothly in the different browsers.

Otherwise, if your code cannot work comfortably across the major browsers, your applications may not meet the needs of the intended audience.

For example, the new JavaScript arrow function, which is supported by most modern browsers, cannot work on the good old Internet Explorer browser.

Here is an example of an arrow function:


var colors =['blue','white', red];

colors.forEach(values =&gt; console.log(values));

//blue

//white

//red

Conclusion

If you want to ensure that your JavaScript programs are error-free, you need to understand how the quirks of the language work.

And, the best way to master the intricacies of the language is to build real applications using projects offered by LiveEdu.

With practice (and lots of it), you’ll be able to build amazing web applications that improve the user experience.

Happy bug-free JavaScript coding!