DEV Community: Heritier Akilimali

Is unit testing really worth it for developing small applications?

Heritier Akilimali — Tue, 18 Jan 2022 04:31:03 +0000

Absolutely! Unit tests are an integral part of the coding process.

Prior to writing the next piece of code, you can make sure the code you wrote is working.

There will always be bugs. It doesn't matter how small your application is.

Unit tests are the key to eliminating bugs and making sure your code works.

No matter what size it is, every application goes through several changes over the course of its lifetime.

This method ensures that those changes won't break existing functions.

It is definitely a good idea to write functions that can be easily tested with a unit-test. As an alternative, you'll need to manually test it. Writing a unit-test actually speeds up the debugging process.

Consider whether it is worth the time to write a unit-test for a function that requires significant effort, such as UI stuff.

Furthermore,since they are smaller and they have fewer dependencies, therefore less complexity, they would probably be easier to test.

Thus, I emphasize, it is worth the effort. On any account.

An Overview of Presentational and Container Component Pattern.

Heritier Akilimali — Mon, 17 Jan 2022 13:01:09 +0000

INTRO

JavaScript's popular React library is known for its unopinionated nature.

No matter how you view React, there is no denying that it is hands-off approach to how developers should build their applications, giving developers and developer teams the freedom to build the apps the way they want.

As you study other React applications and work on different React applications built with different teams, you notice some common design patterns.

Let's take a look at a popular design pattern for building React applications, you are gonna love it.

Presentation Components

The look and feel of the UI depends on these components. Besides displaying data, they have no dependencies within the application. Consider a list:

const ListOfItems = (props) => {
    return (
    <ul>
        {props.items.map((item) => (
        <li key={item.id}>
            <a href={item.url}>{item.name}</a>
        </li>
        ))}
    </ul>
    );
};

It is only responsible for displaying the data passed as props on the User interface in the example above. These components can be written as class components or as stateless functional components that can be tied to UI state

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    };
  }
  render() {
    return (
      <input
        value={this.state.value}
        onChange={(e) => this.setState({ value: 
        e.target.value })}
      />
    );
  }
}

Managing its state in the example above is the responsibility of the TextInput class component.

Container Components

The Container components have a greater impact on the way things work than Presentational components. They typically contain presentation methods and methods for the lifecycle. They also fetch data.

class SeriesContainer extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          series: [],
          loading: false,
          error: ""
        };
      }
      componentDidMount() {
        this.setState({ loading: true, error: "" });
        fetch("https://api.tvmaze.com/schedule/web?date=2020-05-29")
          .then((res) => res.json())
          .then((data) => this.setState({ loading: false, series: data }))
          .catch((error) =>
            this.setState({ loading: false, error: error.message || error })
          );
      }
      render() {
        const { loading, error, series } = this.state;
        return (
          <div>
            <h1> Tv Series </h1>
            {loading && <p>Loading...</p>}
            {!loading && series && <ListOfItems items={series} />}
            {!loading && error && <p>{error}</p>}
          </div>
        );
      }
    }

In the example above, we created a SeriesContainer component that fetches data from an API when it mounts. Furthermore, that data is passed to the presentational component ListOfItems. This pattern has the advantage of separating concerns and reusing components. The ListOfItems presentational component is not closely coupled with the SeriesContainer, so any Container component can use it to display data

Final take away

Dan Abramov came up with this design pattern to distinguish presentational components from container components. The presentational ones are responsible for the look, while the container ones are in charge of managing the state. Despite being more popular before, you can still use this pattern wherever you see fit.

Where do React.js and Node.js differ?

Heritier Akilimali — Thu, 13 Jan 2022 12:06:43 +0000

Intro

Node and React both have JS at the end that refers to JavaScript. They are both JavaScript frameworks. Although they seem similar, both languages are entirely different.
In many ways, comparing node js with react js is like comparing tennis with badminton.

In many ways, they are unrelated. In comparing Node with React, there is a fundamental difference, since Node is a back-end framework, meaning it was created for server-side processing.

Furthermore, React.js was created to manage UI/UX (User Interface and User Experience). Despite the differences, each of these frameworks offers overwhelming strength and versatility to the areas they cover.

This means that you cannot use Node.js and React.js interchangeably at any time during your web development project.

But what exactly is Node.js?

In order for JavaScript code to run outdoors of a browser, Node.Js provides an open-source, cross-platform runtime environment for doing so. There are two things to keep in mind about NodeJS: it's neither a framework nor a programming language.

People are confused and think it's a programming language or framework. Node.js is frequently used for creating back-end services such as APIs, web apps, and mobile apps.

So, what are Node.js' key features?

As numerous programming languages can be used to create back-end services, I will describe what makes Node.js unique. Node.js has the following features:

-This tool is easy to use and is suitable for prototyping, as
well as agile development.
-In addition, it provides fast and scalable services.
-It uses JavaScript throughout, so JavaScript programmers can
create Node.js backends easily.
-The source code is cleaner and more consistent.
-The open-source ecosystem is bigger.
-And it's asynchronous or non-blocking.

*What are the pros and cons of Node.js? *

Here are some pros:

-It comes with its package manager.
-This gain becomes more important when you consider Node.js'
ecosystem of thousands of packages to choose from. Having a
dedicated CLI to manage and install all of the packages
you'll need during development is a huge time saver.
-It can even work as a server-side proxy. This way, your web
app is going to handle several connections at once.
-It'll handle big streams of data.
-There are 1000 packages you can use.

Here are the cons:

-nested callbacks
-CPU-intensive tasks won't run smoothly, and new APIs are
coming out all the time, so you have to keep an eye out for
backward incompatibilities.
-It's only good for web servers.
-It's all about troubleshooting relational databases.

But what is React.js?

ReactJS is an open-source JavaScript library that lets you create single-page user interfaces. Because it's declarative, efficient, and versatile, you can make reusable UI components.

You use it for single-page, large, interactive projects, and react components are hard to re-use. Virtual DOMs are hard to write and take a lot of time. In a React app, each component renders a small, reusable piece of HTML. You can nest components inside other components to build complex applications.

What are the key features of React.js?

These are some of the things that make React.js different from other programming languages and frameworks:

-Using React components is easy because the code is reusable.
-There's a JSX (JavaScript XML) syntax in React that turns
HTML into JavaScript.
-Components in React are reusable and have their own logic
and controls, which is great if you're working on bigger
projects.
-You also get more control over data binding with one-way
data binding.
-By synchronizing with the real DOM, the ReactDOM package
renders the UI and holds it in memory.
-With virtual components, DOM runs smoother and faster.

What are the pros and cons of React.js?

These are the pros:

-It's SEO-friendly. The ReactJS framework renders code from
the server to the browser, similar to how a web page would
function. Therefore, we no longer have to worry about Google
(or other browsers) not reading your JavaScript-heavy web
app.
-A smaller portion of the website is loaded by the DOM
(compared to a full refresh)React handles regular updates to
the DOM.
-In comparison, it updates quicker.
-It's simple to code.

There are some cons, though:

-A steep learning curve
-It's a JSX hybrid that employs a depressingly complicated
view layer.
-If you want to use it, you'll need some adjustments since
it's a library rather than a framework.

The following are the differences between Node.Js and React.Js:

Summary

Node.js is great for building server-side web apps, like an online streaming platform. Whenever you need a project with changing states like dynamic inputs, buttons, etc., React.js is your best bet.

You can combine both frameworks for a single project. A backend can be made with Node.js, while the front end can be built with React.js. There's a lot of community engagement for both frameworks. The choice is up to you.

Hopefully, this post clarified the differences between Node.js and React.js.

How we can use pseudocode to solve problems efficiently whether you are a programmer or not.

Heritier Akilimali — Wed, 12 Jan 2022 23:14:31 +0000

Intro to the world of pseudocode:

It is common in computer science to use a technique called pseudocode that explains in plain English the steps contained in an algorithm or another system. Unlike normal programming languages, pseudocode is designed to be read by humans as opposed to by machines. It is an informal, artificial language that can be used by programmers to create algorithms. Most of the rules of pseudocode are straightforward and convenient to solve problems systematically and efficiently for any field that has problems to solve.

How can we use Pseudocode?

Pseudocode is used to formalize steps taken to solve a problem, in this case, an algorithm.

Let's imagine that we want to find a long-lost friend of ours in the phonebook, and the only thing we know is that their name starts with a J.

One solution would be to flip every page in the book from start until we arrive on the J page, but that would take too long and not be efficient at all.

Another solution would be to flip in the middle of the book, then access if j is on the left side of the book or right side and then flip towards the appropriate side in the middle again, and do this until we find the J page this would be a more efficient way to find the J page in the phone book.

Let's formalize the pseudocode for the second algorithm.

1 Pick up the phone book
2 Open to the middle of the phone book
3 Look at the page
4 If the page is J page
5      Call long lost friend
6 Else if J page is earlier in the book
7      Open to the middle of the left half of the book
9      Go back to line 3
10 Else if J page is later in the book
11      Open to the middle of the right half of the book
12      Go back to line 3
13 Else(if J page doesn't exist)
14      Quit

Now, the last part of quitting is important when writing a computer program because it gives clarity to the computer and eliminates chances for bugs and crashes by eliminating undefined behavior.

Why should we use pseudocode at all?

-Improved readability.
-It will also make code construction easier.
-Ideal as a middle ground between flowcharts and code.
-Serve as a starting point for documentation.
-Makes finding and fixing bugs easier.

Rules of writing pseudocode

As pseudocode is read by humans and not by a computer, everyone has a unique way of presenting things out, as its rules are less rigid than those of a programming language. However, some simple rules help make pseudocode more universal.

-Make sure to capitalize the first word.
-Limit the number of statements per line to one.
-Show hierarchy, improve readability and show nested
constructs with indents.
-Programming language independence is key.
-Names should reflect the problems.
-Be clear, concise, and readable.

Final thoughts

Pseudocode is widely used in programming and software/web development but it is a great tool for anyone that needs a good and systematic way to solve problems as long as the steps taken to a solution can be identified.

It brings clarity and minimizes risks for bugs and is a great start for your documentation. The more comfortable we become making pseudocode the easier it is to see the silver linings in problems at hand.

I hope you got some clarity out of this, if you have anything to add, then leave a comment below. Thanks

A Not so comprehensive webdev guide by Heritier: looking at HTML, CSS, and javascript

Heritier Akilimali — Wed, 12 Jan 2022 02:31:34 +0000

Intro

Learning web development means you'll come across HTML, CSS, and JavaScript. The web is built with these coding languages.
You'll see them everywhere.

The majority of libraries and tools seem to revolve around HTML, CSS, and JS. So if you're aiming to be a web developer, you'd better learn them well. Many sites are built by using these languages.

What are they all and what do they do? How significant are they? In every web development tutorial and topic, you'll see them. What makes them so popular?

We're attempting to look at the basics of HTML, CSS, and JavaScript, how they make the Web work, and what they do themselves. Read on to find out.

Let's start with the Internet.

You can think of it as a network of computers that exchange data (information).
A computer on the internet can be identified and located by its IP Address.
Here's what an IP Address looks like: 196.253.296.217

So what is the Web?

It's a part of the internet. Every internet network has two parts, the browser and the server.

When the client wants some data, the server shares it. But first, they have to agree. It's called the Application Programming Interface, abbreviated API, for short.

Nonetheless, it's important to format and arrange the data so that it's easy to understand by users with all kinds of technical skills. Thats were HTML, CSS, and JavaScript comes in.

What about HTML?

It is an acronym for Hypertext Markup Language.
As a result, you can think of HTML as the language that tells you how to format and style a web page before it is rendered and shown to you.
A HTML page is organized into elements like paragraphs, sections, headings, navigation bars, etc.

Here's a simple HTML document to show you what a page looks like:

<!DOCTYPE html>
<html>
<head>
   <title>Title of the website here </title>
</head>
<body>

<h1>My lvl 1 Heading</h1>
<h1>My lvl 1 Heading</h1>
<h1>My lvl 1 Heading</h1>

<p>My paragraph.</p>

<ul>
  <li>
   Bullet point Item 1 here
  </li>
  <li>
   Bullet point Item 2 here
  </li>
</ul>

<button>button content</button>

</body>
</html>

This is HTML just to make a simple document. The markup contains some tags elements like:
Level 1 h1 tags, A paragraph P tag, A Bullet points ul li tag, A button input tag, And a body tag

These elements can also have attributes, so you can identify them and target them from other places.

<!DOCTYPE html>
<html>
<head>
   <title>Title of the website here </title>
   <link rel="stylesheet" href="index.css">

</head>
<body>

<h1>My lvl 1 Heading</h1>
<h1>My lvl 1 Heading</h1>
<h1>My lvl 1 Heading</h1>

<p>My paragraph.</p>

<ul>
  <li>
   Bullet point Item here
  </li>
</ul>

<button>button content</button>

<span id="firstSpan">content</span>
<span id="secondSpan">content</span>
<span id="thirdSpan">content</span>
<span id="fourthSpan">content</span>
<span id="fifthSpan">content</span>

<script src="index.js"></script>
</body>
</html>

As an example, we added id attributes to the five span elements as a preview on how to label elements for targeting via javascript.

Think of it like your social media handle. It helps people find you on social media. It's also possible for others to mention you or refer to you by your name (you can get tagged in a post, etc.).
Unfortunately, this page is pretty basic. For anything else than a demonstration, you'll have to do some styling. Fortunately, CSS allows us to do just that.

So what is CSS?

CSS is a design language used to make a website look nice and presentable. HTML is a markup language used to layout a web page.

With CSS, you can improve the appearance of a website after linking it in your HTML file. You can make your page more appealing by adding thoughtful CSS styles.

If human beings were just skeletons and bare-bones, how would they look? Kinda gross. CSS acts like our skin, hair, and general looks.
CSS lets you position elements in specific places on your page.

But you have to select them first. You can choose one or more web elements, and you can specify how they look or where they are positioned.

You do this with CSS selectors.
CSS lets you control the color and background of your elements, along with the typeface, margins, spacing, padding, and more.

p {
  color: red;
  text-align: center;
}

You might remember our HTML example page, which had a bunch of pretty self-explanatory elements. Let's say I said I'd change the color of h1 to red.
To illustrate how CSS works, let me share the code that sets the background colors for the level 1 header's to red.

h1{
     background-color: red;
 }

When you apply the above style, our page will look like this:

Pretty neat, huh?
You select the elements you want to work on. Each h1 selects all level 1 headings on the page, each h2 selects the level 2 elements, etc. You can select any HTML element and modify its appearance and positioning.

So what is JavaScript?

So then, HTML is the markup language, CSS is the design language, and JavaScript is the programming language.
Consider these actions in your daily life if you don't know what programming is:
When you detect danger, you flee. You eat when you are hungry. When you're tired, you sleep. When you are cold, you seek warmth. When dealing with a busy street, you calculate the distance between you and the vehicles ahead of you.
When something happens, your brain reacts. An entire web page or individual elements can be programmed to react and act in a certain way when certain things happen.
You can program actions, conditions, calculations, network requests, and different kinds of tasks.
Any element can be accessed through the Document Object Model API (DOM), and you can change it however you like.
The Document Object Model represents pages as trees.

We can access elements on our web page with javascript methods because of the DOM.

let firstNr = document.getElementById("firstNumber");
let secondNr = document.getElementById("secondNumber");
let sumElementDisplay = document.getElementById("sum");
let btn = document.getElementById("btn");

JavaScript allows you to make your webpage more dynamic.
As you might remember from our example HTML page, I mentioned adding the two numbers you see on the page and then displaying the result. After you click the button, it automatically calculates.
You can do calculations with JavaScript like this:

let sum = firstNr.value + secondNr.value;

Do you remember HTML attributes and their uses? Look at this code.

let firstNr = document.getElementById("firstNumber");
let secondNr = document.getElementById("secondNumber");
let sumElementDisplay = document.getElementById("sum");
let btn = document.getElementById("btn");

function displaySum(){
  let ourSum =  Number(firstNr.value) + Number(secondNr.value);
  sumElementDisplay.textContent = ourSum;
}

btn.addEventListener("click",displaySum)

You can think of displaySum as a function that gets two items from the web page, converts them into numbers (with the Number method), adds them up, and passes them into another element as inner values.
In our JavaScript, we were able to access these elements since we assigned them unique attributes to help us identify them.

Hence:

  <div id="calc">
    <input id="firstNumber" type="text">
    <p>+</p>
    <input id="secondNumber" type="text">
    <hr>
    <p id="sum"></p>
   <button id="btn">calc</button>
  </div>

Lastly, once you click the button, you'll see the sum of the numbers on the newly rendered page:

Putting HTML, CSS, and Javascript Together

These three languages work together for formatting, designing, and programming the web.

Then, when you link web pages together with hyperlinks, along with their assets, like images, videos, and so on, on the server, it gets rendered as a website.

Users see what's being displayed on the front end and can interact with it.
The back end of the website is where sensitive data, like passwords, are stored. Basically, it's the part of the website that's only available on the server. The user can't see or get to it right away.

Final thoughts

Sites are made with HTML, CSS, and JavaScript.
We use JavaScript for coding, HTML for structuring, and CSS for designing and layout of the site.
Nowadays, CSS isn't just a design language. You can actually use it to create animations.

Plus, you can do some basic programming with it. Media queries are a good example of this, where you define different styles for different kinds of screens (resolutions).

And JavaScript has grown past just being a tool in the browser. Node.js lets us use it on the server.
However, HTML, CSS, and JavaScript are still the most common languages.
There you go. Simple. I hope you learned something from this. And if you have any questions, comment down below.

React vs Vue: Popular Front end frameworks in 2022

Heritier Akilimali — Tue, 11 Jan 2022 21:13:34 +0000

Although Javascript Frameworks are now a staple in the world of web app development, more and more companies are getting used to how they can improve both performance and time savings while improving the overall development experience. However many other companies and devs still struggle with choosing the right framework.

What we know Currently is that React.js has been on the top spot on the podium for three successive years, while Vue.js is second. So how do you decide which framework fits for you considering that both of them are in the same league when it comes to popularity?
You are in for some luck.
Because for this article, we are aiming to make a head-to-head comparison between React and Vue.

**we’ll explore what their respective use cases are, along with perks that Both of them bring to the table. Let's go.

What is Vue?
**
Vue Is a front-end framework that has garnered immense support from its community, after Being developed and showcased by the talented developer named Evan You in 2014.

Vue was primarily used exclusively in China, but is now used worldwide and has turned out to be among the best options for developing intuitive and interactive user interfaces as well as creating single-page applications.

Vue is known for its two-way-binding feature and its unique way to manipulate the DOM by using a virtual DOM, but the primary reason Vue easily rose to prominence is its progressive design which lets developers migrate and smoothly move pre-existing projects. This is possible by moving each feature, one at a time.

Considering that Vue is an open-source project that got a good start and is still maintaining its dominance as being one of the most accessible frameworks out there, Vue has become more and more associated with many other big names that had to implement web development into their business.

What is React?

Even though React is considered a framework it's actually a javascript library used for web development to create interactive elements for websites and User interfaces.

The creator of React is a former employee of Facebook and is named Jordan Walke.

React was released in 2013 which was a time when javascript made major strides in how it functions and operates as a programming language, and as a result, react had a lot of room for innovation.

React is used in the creation of single-page apps and mobile apps through its flexibility and usage of components which isolates pieces of code and makes the components reusable on different parts of the web app.

React also uses the visual Dom to interact with the DOM but all the elements are represented as javascript objects. This is a declarative, highly efficient, and very flexible library that brings a lot of toolsets to any developer looking to pick up a new framework.

React is the leading framework as its the most used and most in-demand on the work market, and as such, it has on many occasions been associated with names of big companies out there, some examples of websites that use react are Facebook, Netflix, and Instagram.

How do Vue and React differ in popularity, performance, and state management?

Both Vue and React utilize Lazy loading resulting in higher performance and lower loading time and they also share the fact that they both use the Virtual DOM to update the DOM.

Now, let's take a look at Vue first, It has better memory allocation and faster startup, no unnecessary re-rendering because vue keeps track of the virtual DOM, it handles higher frames than react(up to 10 frames/second). It's More popular than react on GitHub based on stars given but less popular on StackOverflow based on the yearly surveys.

with Vue You can edit the data through the data property, so you don't need the local state. However, If you have big apps, you'll need a separate library to manage the state.

Now let's shift our look unto React. React have faster runtime, changing state re-renders all of the components in the virtual dom, handles low frames at 1 frame/second. More popular than Vue on StackOverflow surveys, but less popular on GitHub, more popular in the job market.
With React, you can modify the state in just one place, simplifying debugging.

Differences in syntax and community support: Vue vs React.

Programming style: Vue makes component life cycles more intuitive and keeps HTML, CSS, and javascript code separate. React embeds HTML code into javascript and generates javascript expressions(JSX), and also allows every component to have its own lifecycle.

-Community support: Vue was highly popular in China when it came out on the market and has further garnered more support around the globe hinting that Vue will just keep on growing. React however is backed by Facebook and has a dedicated team of developers maintaining it.

-Documentation: Vue's documentation is very clear and concise. It's organized much better than most other frameworks docs. While React's documentation has improved over the years and is more clear, when it came out, it got criticized for its bad documentation.

-Learning Curve: Vue is easier to learn and intuitive for beginners because it separates HTML, CSS, and javascript, so anyone with vanilla javascript experience will have no trouble getting familiar with it. When it comes to learning time, React takes more time to learn than Vue because of some new concepts not seen in regular javascript.

-Syntax: Vue uses HTML and JSX while React is strictly JSX.

-SEO: Google has a hard time indexing single-page apps, which means by default Vue and React can't be indexed. This can be solved by using server-side rendering, which lets us run the JS code on the server before sending our files to the end-user.

Which one is better, Vue or React?

You should use Vue if:

You need a quick solution -you need your app to run fast -An existing project needs to be migrated to a new technology but you've got limited resources -Most of your team consists of junior developers or HTML developers -you're into clean code -You want to create less complex to medium complex apps(there are always exceptions)

React is for you if:

-You want to create a moderately to a highly complex app or
SPA
-In the future, you'll expand your applications' capabilities
a lot
-you need to make mobile applications
-JavaScript is preferred over HTML
-Your team is comprised of experienced React developers

*Conclusion: *

Both frameworks Come out of the box with their advantages.
With Vue, it's smaller, faster, templates are convenient, a simplified syntax, etc. Meanwhile, React offers more flexibility for bigger, more complex apps. You'll be able to test it better, and it's more suitable for mobile app development. Plus, you'll have access to lots of information in case you have a problem. leave a comment below if you have any questions, thanks for reading.

Is it still worth learning web development if there are already tools that do not require knowing any coding?

Heritier Akilimali — Tue, 11 Jan 2022 09:39:53 +0000

Definitely. The "no-code" tools have existed for over fifty years under various names, and, despite their promise, they never have and probably never will deliver on that promise.

It's an interesting question: if you were not a web developer, how would you verify whether the no-code program does a good job?

With no-code platforms, sites can become complicated and slow, which then leads to a lower search score, resulting in fewer people viewing the site.

The use of no-code tools may be effective for building a simple MVP or landing page, but learning web development will allow you to have more creative and technical control over your website.

Will a no-code tool be easy to use to create 3D UI animations? No, but it might suffice just to have a title with a shadow.

Can we implement a graph database using a no-code tool that lets you focus on how data is stored? Probably not, but we could store some basic information in an excel sheet for convenience's sake.

What about building a startup that supports millions of users? What would be the best way so we can reduce downtime and increase reliability while handling the traffic and usage of our app?
Due to the increasing complexity of features and the increasing amount of customization of UI, we find that no-code tools are simply unable to handle the task.

So, yes, you absolutely should be a web developer if you're curious about these questions and want to delve into the field on a deep level.

No-code tools allow non-developers to update content by using a templated web page that is built by web developers. It is just content to update.

As such, yes, it's worth it if you want to be a heavily in-demand player in the tech industry.
Having no code tools is nothing short of ammunition for the demands of web developers. If no code tools are available, who is going to build them?

As a result of the constant change in technologies as well as the requirement to constantly learn more and hone your skillset, it is clear that web development is still going to generate opportunities for developers in the near future.
Furthermore, it is also essential to mention that there are plenty of different pathways you can follow if you are interested in becoming a web developer.

How to fix security vulnerabillities in a newly created react app.

Heritier Akilimali — Tue, 11 Jan 2022 02:01:34 +0000

If you ever get error messages in the command line interface after creating a new react app with the create-react-app command, just like the image below, then this fix might help you out.

The first thing we do is deleting the starter files in the src path except the index.js and app.js files, ending up with the result in the below image.

The next step involves deleting every starter file in the public path except the index.html file just like below

In The next step, we will delete some code in the index.js file so that we don't have dependency imports that might trigger errors.

We will also delete some code in the index.html file to get rid of some of the deleted dependencies.

After you are finished with finding all the imports that are not used anymore and removing them, there should not be any more errors in the terminal. I hope this helped you out.
Thanks.

Best practices for performance: what is network optimization and rendering optimization?

Heritier Akilimali — Sun, 09 Jan 2022 22:34:00 +0000

Intro

Since internet speed varies for everybody and people don't have time to wait for your website to load, it makes the performance very important. All big and growing companies prioritize fast and seamless user experience because they know that people of today's age are not used to waiting around. Amazon calculated that if the page load slows down with 1 second, that could cause them to lose 1.6$ billion in sales each year. Google calculated that if their search results slow down 4/10 of a second they could lose up to 8 million searches a day, resulting in them losing profit on their ad revenue. Now there are a lot of ways to make your code more performant and your website faster, let's dabble into the different ways to do that.

QUICK OVERVIEW

Let's first review what happens when someone visits a website while browsing the web. There is a client/browser and a server, you make a get request to the server with the URL (www.)example_site.(com), then that server returns an HTML file, and after receiving an HTML file it parses through the different tags and maybe finds out a link tag containing CSS required for the styling.

After becoming aware of the CSS it requests the CSS file from the server and retrieves it. The browser does the same thing for image files and script files for javascript. This process involves the client, the server, and the network transfer.

THE CLIENT, THE SERVER, AND THE NETWORK TRANSFER

The client, the server, and the network transfer are where the work happens to display a website. This gives us 3 ways to optimize the speed of your website and application and thereby improving customer or user satisfaction, retention, and conversion.

So the first thing we can improve on is the front end and rendering of the client view, the next thing we can improve on is the network transfer of files and requests and reduce the network latency. And the third place we can improve on is the backend.

The Network transfer optimization

When it comes to network transfer optimization we can minimize the text files with build tools which will usually delete the white space in the code making it lighter, we can minimize the images and use lower size images on smaller screens, we can also pick the right file format for the images based on how they look and what you want to use them for. For example, if the picture is colorful then we should make the format jpg, if it's going to be transparent then SVG format works best, gif for animation and png for simple pictures with few colors, so maybe something like a logo.

Another thing that can help network optimization is delegating the number of files that can be delivered at a time. By limiting the files delegated in the request process the website won't be overloaded and speed down but rather be lighter on its loading, for this, we bundle the info into one file. And we can also use media queries to change the size based on viewport size and also delete metadata resulting in a faster website.

The Critical Render Path optimization

Let's talk about what happens after the files arrive in the browser and how we can optimize this step. After the HTML arrives, the browser commences building what we call the DOM(Document Object Model). And when the browser parses or reads the HTML, it incrementally generates a tree model of the HTML tags needed to build the website.

And this DOM describes the content of the webpage, but as its parsing, through the HTML it encounters a link tag that's asking for a CSS file. So it requests a CSS file from the server and fetches it for use and then continues generating the DOM and creating the structure of the website. After finishing with the DOM and fetching all the CSS files the browser starts creating the CSSOM.

The CSSOM has the styling information attached to the tree nodes, and this tree describes how the content is styled. After the DOM and CSSOM are generated then the JavaScript script tags will fetch the Javascript from the server and thereafter use the javascript to manipulate the DOM or the CSSOM.

After all those processes are finished, the browser then combines the DOM and the CSSOM into a render tree. This render tree has both the information from the HTML and the styling and layout information from the CSS. By combining the DOM and the CSSOM the browser constructs this render tree so that it knows what to exactly render on the page. The browser then forgets the server files and just uses the render tree to paint and display the website, and then at the end of all that we will finally have a website.

This is called the critical render path, which is one of the most important concepts for optimizing browser performance. This is the path the browser takes to display the website on the screen. Even though it may seem like a long process, in real life it happens extremely fast. And just like we can optimize the network performance, we can do the same thing with the critical render path.

The first step is optimizing the HTML file, how do we do that? The first thing we want to do is load files that are CSS files as soon as possible and the script files that are javascript files as late as possible, with a few exceptions here and there. This is because one of the main principles of CSS performance is getting the CSS to the browser as soon as possible and the JavaScript requires the HTML and CSS to be parsed before it can run and execute DOM/CSSOM manipulation. With this strategy, we give the CSS time to finish parsing and creating the CSSOM, we also get the added bonus of rendering the tree path faster because the script will be parsed after all the necessary resources are finished rendering.

The second step is optimizing the CSS, and one thing we can do is load what is necessary by not repeating the same code multiple places. Another thing we can do is code CSS that only renders the components that are needed, for example, if we refresh a page then the CSS will render the components that are in the view first on top of the page, this is called above the fold loading.

You can implement the above the fold loading by using JavaScript to load the stylesheet at the end of the body tag so that it fetches the stylesheet after all the other resources are loaded up with the help of createStylesheet() functionality and the onload() functionality. We can also optimize it with media attributes and media queries by displaying different CSS on different media sources.

Now, let's take a look at JavaScript and how to optimize the website speed by improving the way it gets parsed. One thing we can do here is load the script's asynchronously, this can be done with the async attribute inside the script tag so that the script gets loaded on another processing thread with the help of the browser. This is recommended to only be used on scripts that don't affect the DOM or the CSSOM, that way it won't affect the user experience in case the script loads faster than the DOM or the CSSOM. A good place to use this might be for analytics scripts or tracking scripts.

Another thing we can do is use the defer attribute which works like the async method but in this case, the JavaScript will only execute after everything has been fully parsed. The defer method is very good for loading scripts that will interact with the DOM or the CSSOM. The last thing We can do is minimize dom manipulations and avoid long-running JavaScript code.

Summary

We have taken a look at how to optimize HTML, CSS, and JavaScript loading so that the browser can render the web app/webpage as soon as possible for the user. We have gone through the sequence of the critical render path and how everything falls into place to create the render tree through combining the DOM, CSSOM, and JavaScript. Keep in mind that google chrome by default enables async functions. I hope this was helpful, and if you have any questions leave them below.

How do you stay motivated as a web developer?

Heritier Akilimali — Fri, 07 Jan 2022 15:48:24 +0000

Try New Tools and Techniques

Using new technology is always a good idea. You'll grow as a developer by getting out of your comfort zone and trying out new technologies. I know, I know, there's a disclaimer to it as well. You shouldn't change your technology all the time like taking a challenge to switch technology after a bunch of projects.

Get a personal project going

You probably don't have much influence on office projects when you work full-time at a web design company. It's frustrating if these projects don't give you a chance to show off your skills, nurture your passion for the work, or make you unmotivated by being repetitive.

Find a passion project to work on in your own time if this gets you down.

Here are a few ideas:

*Build a mobile app;
*Design a font;
*Make free stuff;
*Start or expand your blog;
*write tutorials and articles for developer sites.

Switch It Up and Do Something Different

As for me, I’m easily bored and distracted. It's hard to get through a big project without wishing it was done already.
You might want to try something else if that's the case.

It'll not only make you feel better, but it'll also make sure a project isn't rushed as you try to finish it.
You don't want to do all the fun stuff at the beginning of a project.

Make sure you mix it up with some of the more common stuff so there's always something fun to do. Use these as incentives.

Participate in conferences

A lot of times at a conference you'll hear something new to you or gain a new perspective on something that'll make you want to apply it to your work.

We indeed learn from people who are like us and have more experience than we do.
Getting back to work won't be easy, you'll be dying to try out what you've learned. Trust me!
It's not all about learning at conferences.

It's also about networking, socializing, and having fun with other like-minded geeks. Then you'll remember why what you're doing is awesome and you'll stay motivated.

Check out Meet-ups

Conferencing can be expensive, especially when you have to pay for it yourself. Attending a conference can be pricey. Consider attending a meet-up with like-minded people instead.
There might be speakers to inspire you and other techies to chat with, just like a conference.

Learn

My opinion is that we need to get better and widen our knowledge. As a web developer, you can't just start and expect to sail through your career. It's not just fun to learn about web development when you're bored, but it also might be helpful in your future projects.

Make yourself a specialist

You may be currently working in a generalist role, but that also means that you're probably doing stuff you're not super passionate about.
It's great that you are a web developer that designs too - but you might be designing more than you are coding, so you'd prefer to move into a programming role.
You can specialize to get rid of some of the stuff you don't like and spend more time doing the stuff you like.

Make yourself a generalist

Specialists are awesome. If being a specialist feels too restrictive, and you want to learn more in areas that you don't have much experience in, then move to become a web generalist.

Specialists and generalists are important for the industry. Choosing who you are is a personal decision and will ensure you enjoy your job more.

You need a break

We're exposed to the Internet more than most professions, so we're probably the most online. This makes our work just a click away.

Take a break and go for a hike with your family or close friends. Get close to nature and feel the fresh air, which helps you be more productive. It's okay to take a break as long as you don't do it too often. It might be better to take a 1-day break every month.

Even on holidays, a lot of us work. When you take a break and disconnect for even a little while, you'll be more ready to handle the stresses of your daily life when you get back.
Whenever you start to feel down, take a break and come back refreshed and more motivated.

Get a Job at Another Company

Finding another company that provides what you want is the best next step if staying with your current company isn't challenging or hurting your passion.
This is a very risky proposition in the current economic climate. The stakes are huge, and they cannot be taken lightly. But sometimes it's the only option.'

Break big goals into smaller ones you can accomplish faster

Usually, we set too high or too far-off goals. It's important to have lofty goals, but you have to take small steps along the way. Though it might be a long way off, as long as you keep progressing each day, you'll get there. So, set small goals that will help you get there.
You'll get some quick wins, but you'll also make progress on your bigger projects.

Set yourself up for a quick win.

You can't beat a win! Maybe you're in a slump because you haven't won anything in a while. You can break this losing streak by setting yourself up for some quick wins.
Maybe instead of tackling that huge website project, you should spend an hour writing some marketing copy. Put together a postcard to reach out to some clients, or make it your goal to call five clients in the next hour. Maybe you'll get more business from it down the road, but you'll also have something worthwhile to add to your win column.

Give yourself a reward

You have worked hard by now. You've got a couple more wins, and you've made some progress towards some bigger goals.
You deserve a reward now. Don't go overboard. You could give yourself 5 minutes to play your favorite game, go to McDonald's for a burger, or maybe spend 15 minutes on social media, or read the news. Anything that does not work and makes you feel rich or extravagant.

Take on a Mentorship Role

Teaching something to someone else is the best way to learn it. Connect with beginners and junior developers in your field and try to get their input on the topics they are having trouble understanding and implementing. If you want to collaborate, use social media platforms.

Make Your Own Blog

You can use blogging to share your real-life experiences as a developer, and the struggles that you've faced while trying new things. You might find this helpful for the junior developers who face the same problem. Blogs can also make you money, but don't just do it for money. Start with blogging just to help others who are just getting started in web development or are junior to you.

Keep a positive social presence

You need to develop your social presence in order to showcase your skills for future employment opportunities, and social media provides the best platform for this. If you want to build a personal brand, you need accounts on all of the social media sites like Linkedin, Facebook, Instagram, Twitter, etc. Next, you need to post 2-3 valuable posts a day related to your expertise on these social media platforms.

Make Your Own Portfolio Website

Your personal portfolio website is like an online resume that tells about the skills you've acquired over the years and the things you've done to develop them. Apart from all the clients' websites, a good developer has his own portfolio site. You'll also have an online presence and stand out from the crowd with a portfolio website. Whenever you get into web development, your portfolio website should be the first website you build, because it can give you a jumpstart in your career and get you, clients, right away.

A how-to guide for becoming a web developer in 2022

Heritier Akilimali — Fri, 07 Jan 2022 15:31:16 +0000

The path to web creation: How to start Web development.
You'll need HTML, CSS, and JavaScript knowledge to become a Web Developer. Learn CSS as well as CSS frameworks. By learning these web development skills, you'll learn the lingo, logic, and foundation you need.

Learn Web Development Basics

A great way to start becoming a Web Developer is to learn HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript.
Coding bootcamps are popular for aspiring Web Developers now.
Bootcamps do well because they're short, immersive, and focused on outcomes.

The goal is to teach you the skills you need to get a job, so they're a worthwhile investment for a web developer trying to get started. Job site Indeed says four out of five companies in the U.S. hire bootcamp grads.

Over time, coding bootcamps are becoming more and more practical. For one thing, web development naturally attracts people from all over the world, and for many of them, an efficient way to grow their skills is of paramount importance.

Also, employers value skills and experience over education, so anyone who can prove their skills will be treated the same as developers with a university degree.

To stay ahead of changes in web development and programming languages, tools, and trends, Web Developers - more than most other fields - need to stay committed to ongoing learning. It doesn't matter if it's your first line of work or not, retraining is a must at mid-career.

Choose a specialization in development.

As you get better, you'll need to specialize. But what types are there? You can categorize Web Developers into three types:

-The front-end developers. Basically, they work on any part of the site or app that users interact with. An example would be the layout, design, and user experience of a site.

-The back-end developers: Often referred to as "server-side developers", backend developers work on the backend of the website. These services pertain to how a website operates and may include databases, servers, networks, and hosting.

-The full-stack developer. Developers who are able to work with both the front and back ends of a website are known as Full-Stack Developers.

Understand the key languages that are used to build websites.

If you're going to be a web designer and developer, you'll need to know a few different languages. But what are the most common ones?

Most aspects of web development involve one of three families of programming languages:

-HTML (Hypertext Markup Language)
-CSS (Cascading Style Sheets)
-JavaScript

Of course, the list goes on – these are just the beginning. There are so many different things you can do with web development (and so many coding languages and markup languages you can use to accomplish them) that I can't fit everything here anyway. Luckily, you're a specialist, so you can focus on what you do best.

Learn Web Development by Building Real-World Projects

Once you understand HTML, CSS, and JavaScript, and have a foundation of programming skills, you're ready to get started. Along the way, you'll learn a lot of new Web Developer skills. Many of these are technical skills, or "hard" skills, like SQL programming or Python, using jQuery functions for better programming efficiency, or learning Git for version control. Getting better at web development is just a matter of using it more - the more you use it, the better you get.

In addition to having web design skills, Web Developers should have an understanding of responsive design, which is perhaps the most important. It's not usually Web Developers that do all the design, but if they understand principles of design, they're in a good place. A good understanding of user-centered design will help front-end developers, especially, program the screens customers interact with.

Make a Web Development Portfolio

If you're applying for a web development job, you need a great portfolio. Build a portfolio that stands out from the crowd by keeping these things in mind.
The first thing you should do is build a diverse Web Developer portfolio. The portfolio shouldn't be a highlight reel of everything you've done - it should be a showcase that shows both your best work and your versatility.

It's important to highlight your best work, but you also want to show that you understand the various facets of the job. Try doing a little research into the company and the role you're applying for - then tweak your portfolio, erasing unrelated examples and spotlighting your best work.

Second, figure out what's unique about you and your stuff. You should emphasize your skills in web development that best set you apart - both in the work you include in your portfolio and the way you present it. Your portfolio website, for example, should have a great user experience and a beautiful interface if you're applying for design-related positions. If you're applying for a Web Developer position, make sure your site displays your portfolio flawlessly. Make sure the code is neat and organized.

Finally, demonstrate your process. It's not just the quality of work you produce that makes employers take notice, it's how you solve problems. If you want to draw a case study from each example, tell us about your thinking process and the problem you were trying to solve with the project.

By showing how your projects were made, Recruiters and Hiring Managers will have an easier time understanding your work and will see that you are more than just a standalone project. Communication is also a great skill to have when applying for a position.

Can Web Development be a growth industry?

You bet. Developers are in high demand in North America, as more than 47,000 new jobs were created in the last two years, with the market booming an additional 15% in the next five years. It's no surprise that "Web Developer" is one of the most in-demand and highest-paying job titles in tech.

Salary: How much does a Web Developer make?
According to Indeed, web developers make $71,531, while senior web developers make $95,325. So web development is one of the most lucrative no-degree jobs.

I wanna know: how can I become a web developer fast?
Coding bootcamps are becoming more and more popular among aspiring Web Developers because they offer hands-on learning and give candidates job-ready skills.
In the past, many Web Developers had higher education in software engineering, computer science, or related fields. But it's also possible to come from somewhere totally different. Many professionals are learning development from the ground up later in their careers, either through self-study or coding bootcamps.

Is there a specific set of skills needed to become a web developer?

You'll need these skills to become a Web Developer:

-The basics: To become a Web Developer, you need to fully understand how the web works. It will help you build and style more advanced static web pages. In addition, it will help you learn advanced programming concepts and problem-solving skills.

-Programming basics: Knowing JavaScript and object-oriented programming will improve your ability to write and build components.

-Frameworks for the front-end: React, a JavaScript framework, lets you build dynamic, complex web pages and professional-level user interfaces.

-As a Web Developer, you'll need to know how to build servers and develop APIs along with serving static files and websites.

-You need to know Server Side Rendering and Templating Engines, which let you fill blank page templates with dynamic data, such as product pages for an eCommerce store.

*Managing databases and data on a Web server is another important skill for Web Developers.

Programming languages and techniques change a lot for Web Developers, just like other tech fields. In addition to attending coding bootcamps, web development courses, panel discussions, or workshops, you may also become involved in an open-source project, such as GitHub or Bootstrap.

And you'll need a portfolio of work to impress employers when you're looking for a job. No matter what you do, make sure your versatility shines through so clients from different fields get a sense of you.

Is it worth knowing multiple programming languages?

That's a tricky one. In sum, it's complicated because it's so dependent on several variables. How experienced are you? Do you work on any specific kinds of projects? What are your plans?

You should start basic when you're a new Web Developer, but on the other hand, specializing can help you stand out. It's best to figure out which languages are useful in your field, and which ones aren't going anywhere anytime soon.

Knowing more languages also helps you as you get better at future jobs.
There's a lot of growth in the Web Developer field. Market growth for Web Developers is predicted to hit 15 percent by 2026, according to the Bureau of Labor Statistics. Because of this rapid growth, the field has seen an influx of relatively new talent, resulting in more opportunities.

You Have To Keep Learning To Be A Good Web Developer

It's fun to learn about new technology all the time. Although computer science has remained mostly the same for decades, software development is changing all the time.

While some domains of software are more stable, others are more volatile. Older software has a lot of maintenance and not much innovation, while newer domains need rewriting every few years as things change.

It doesn't have to be a bad thing. With domain knowledge like data science, UX design, product management, digital marketing, and SEO, you can improve your understanding of technology, enabling you to work with colleagues and clients across departments.

To put it simply, a good Web Developer is always learning and looking to expand their skills and knowledge.

Image Optimization: What Is It and Why Is It Important?

Heritier Akilimali — Fri, 07 Jan 2022 14:45:37 +0000

Optimizing your images for performance has a lot of benefits. You can optimize your images by using best practices to keep your file size small and your site loading quicker, resulting in a better user experience. There’s another reason why image optimization matters, and it’s directly related to profit. Images take up a lot of disk space on the server that runs your site and slows it down.
While it’s not the end of the world if you exceed that limit, you may get charged an overage fee or possibly — have your website shut down. You can make the most of your site storage and avoid the bandwidth limit by optimizing your images.

Image optimization benefits include:

*Reduced bounce rate — if you load fast, users are more likely to stick around

*Better customer engagement — images make a big difference in the user experience. Web visitors are less likely to engage with a website that loads slowly (even if the rest of the content is visible).

*Save on hosting and content delivery by optimizing images. Bandwidth is expensive, and by using less, websites use less.

*A better search ranking — Google and other search engines look at the page load time and performance. Optimizing images can boost rankings and traffic.

Techniques for Image Optimization

Pick the right file type
First, choose the right file type for your image.
The most commonly used types are:

*PNGs make great images but are a lot bigger. PNG can be configured to enable lossy compression, but it’s lossless by default.

*With JPEGs, you can balance quality and file size by adjusting the quality level, which ranges from 1–100%.

*The GIF format supports only 256 colors and compression is lossless. More popular for animations than static images.

Use NextGen JPEGs and Progressive JPEGs.

A JPEG image can be rendered in two ways:

*Baseline loading — display the images in full, from top to bottom. It can be a bit of a pain if your internet is slow.

*Gradual loading — initially showing a low-quality image, then improving it as more of it loads.

You can improve your website or app’s performance for users with slow Internet connections by using progressive JPEG.

Another way to speed things up is with next-generation formats like WebP and JPEG-XR. With these image formats, you can save a lot of space without sacrificing quality. Google’s website optimization guidelines recommend them, so they’re important for SEO too.

There’s an issue with next-generation formats that they’re not supported by all browsers, so you need to prepare a fallback image (like PNG) to use if the user’s browser doesn’t support them.

Caching

Caching involves storing images in a proxy server or browser cache, to make it faster to serve content. Using browser caching can reduce application requests and downloads.

For a proxy server to cache image files, several points of presence (PoP) servers must be configured across the globe. It speeds up page load times because images are served from the closest server If you use an image caching service, you’ll get cached images.

Image caching services preprocess images before caching them so they load faster. This is great if you are using low-performance formats and static images.

Compression

A compression technique reduces the size of an image. There are lossy and lossless compressions.

*Lossy compression reduces file size by getting rid of redundant data. Although this can reduce image file size, it also degrades quality. You can’t undo the compression. Keep a copy of everything you do.

*Lossless compression maximizes quality above size. Using this technique will preserve the file’s quality so that you can restore it later. It won’t reduce the file size much, though.

Resizing

Although the image cannot be compressed completely, the size and resolution still have to be balanced. As the resolution increases, the file size increases. Web pages load slower when high-resolution images are used. If a visitor accesses your website using a mobile device, his or her bandwidth is likely to be limited, which means large images will likely take longer to load.

It is best to strike a balance between image quality and file size. Sizing the image to the smallest size that will still produce the desired visual effect is the best solution. You can also show a thumbnail if you need to display large high-resolution images and download the full image when the user asks for it.

Optimize your image delivery!

It doesn’t matter if your image is optimized by following the steps above. You can improve it further. Images load fast for your users based on server speed and network performance.

Get your image server ready for spikes in traffic and handle three to four times as much traffic as normal. Cached images should always have a cache header so local devices can use them.

Alternatively, you can use a Content Delivery Network. You can get your images to users closer to their locations with a CDN. Your images will load faster on nearby servers. They’re easy to set up and are a great solution for improving image performance.

Try loading lower quality images with the Blur method

The speed of your site can still slow down if you have large file sizes or lots of images, even after all the previous optimization steps. Trying to optimize not just images but also load times can make visitors think your site is loading faster.

Let’s make it look like your photos are loading faster so your users don’t just stare at a blank page.
Load a Lower Quality Image (LQI) for this. It’ll show a smaller version of the image while it loads, so you can look at it while you wait. This makes it look like the page loads faster, even though everything is loading just as fast.
**
Use lazy loading to load your images.**

One more trick you can use to give the impression that images are loading faster: Lazy loading. You start at the top of the page when someone lands on your site.
They’ll probably scroll the whole thing, especially if they’re engaged. Rather than loading all the images at once, lazy loading relies on the assumption that users care most about what they can see.

As a result, the images inside their browser view have a full load first, while the rest load a placeholder until the user scrolls over to that area of the page.