This article was originally published at codebushi.com
This post is aimed towards the beginner web developer who is looking to take their dev skills to the next level. Maybe you've become pretty comfortable with the basics of HTML, CSS, and JavaScript and are looking for ways to advance your knowledge and career.
Let's get right into it! Here are a few topics and exercises you can practice right now to become a better web developer.
Getting Data From An API
Data, data, data! Being comfortable with fetching data and manipulating data is immensely important for a developer to master.
When you're building a simple website, there isn't much of a need to work with APIs and data. In your browser's DevTools, you spend most of the time in the Elements and CSS tabs.
When you transition into the world of advanced websites and apps, data is king and you'll be working with it all the time. You start to live in the Network tab of your DevTools, looking at the various requests and responses.
Time to practice! No fancy framework or library needed. Let's start by making a dead simple index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JavaScript</title>
</head>
<body>
<main id="app"></main>
</body>
<script src="practice.js"></script>
</html>
At the bottom, we import a practice.js JavaScript file. In order to fetch data, we can use the browser's built in Fetch API. Note that this is a Browser API, which means it's supplied to us by Chrome/Firefox/Safari. Some older browsers, like Internet Explorer, won't have this available. Don't use Internet Explorer.
The data is going to come from a third-party API called https://reqres.in. A third-party API means that some other organization has built this and is hosting it on their servers.
// practice.js
function getData() {
fetch("https://reqres.in/api/users")
.then(res => {
return res.json();
})
.then(json => {
console.log(json.data);
const html = json.data
.map(function(item) {
return "<p>" + item.first_name + " " + item.last_name + "</p>";
})
.join("");
console.log(html);
document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
})
.catch(error => {
console.log(error);
});
}
getData();
Fire up your browser and head into the Network tab. You'll see the request as well as the various logs in the console. To better visualize the data, we map over it and generate some HTML to render on the page.
Poke around at this file and try getting more data! Try different sources and APIs, here is a wonderful list of public APIs you can get data from.
Manipulating Data, Arrays, and Objects
Once we can get data, it's time to do stuff with it. The data above comes to us as an array of objects. It's important to familiarize yourself with the various things you can do with Arrays and Objects.
When we processed the data above, we "mapped" over the items in the Array. If you're familiar with basic JavaScript, you've probably come across the .map() method before. However, there are tons of other methods available to use on an Array.
Methods like .map(), .filter(), and .reduce() helps us easily process and manipulate an Array. To practice these, let's alter our practice.js file:
const data = [
{
id: 1,
email: "george.bluth@reqres.in",
first_name: "George",
last_name: "Bluth",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
},
{
id: 2,
email: "janet.weaver@reqres.in",
first_name: "Janet",
last_name: "Weaver",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
},
{
id: 3,
email: "emma.wong@reqres.in",
first_name: "Emma",
last_name: "Wong",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
},
{
id: 4,
email: "eve.holt@reqres.in",
first_name: "Eve",
last_name: "Holt",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
},
{
id: 5,
email: "charles.morris@reqres.in",
first_name: "Charles",
last_name: "Morris",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
},
{
id: 6,
email: "tracey.ramos@reqres.in",
first_name: "Tracey",
last_name: "Ramos",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
}
];
const newData = data.map(item => {
return item.first_name;
});
console.log(newData);
I'm going to use the data from the previous example and only return the first_name. The newData array should now look like this:
[
"George",
"Janet",
"Emma",
"Eve",
"Charles",
"Tracey"
]
This is a pretty simple example, but I personally didn't have much exposure to these methods when building basic websites. Once I started working more with data, I found myself using these all the time.
You can also do the same thing with various JavaScript "loops", which is also important to be familiar with.
For more practice ideas, check out this fantastic video by Wes Bos.
Recognize Repeating Code and Patterns
When building a website, we often times repeat block of HTML code, for example a series of boxes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JavaScript</title>
</head>
<body>
<main id="app">
<section class="grid">
<div class="box">
<h2>Title 1</h2>
<p>Description 1</p>
</div>
<div class="box">
<h2>Title 2</h2>
<p>Description 2</p>
</div>
<div class="box">
<h2>Title 3</h2>
<p>Description 3</p>
</div>
<div class="box">
<h2>Title 4</h2>
<p>Description 4</p>
</div>
</section>
</main>
</body>
<script src="practice.js"></script>
</html>
It's obvious that we are repeating code for <div class="box"> and its contents. So how can we think about this differently? What if we extract the contents of each box into an array of objects, and let JavaScript map over it?
We can start by removing the boxes markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JavaScript</title>
</head>
<body>
<main id="app">
<section class="grid">
</section>
</main>
</body>
<script src="practice.js"></script>
</html>
Now in our JavaScript file, we make up some static data for these boxes. Data doesn't always have to come from an API, sometimes we can make it up and loop over it.
const boxes = [
{
title: "Title 1",
description: "Description 1"
},
{
title: "Title 2",
description: "Description 2"
},
{
title: "Title 3",
description: "Description 3"
},
{
title: "Title 4",
description: "Description 4"
}
];
function renderBoxes() {
const boxesHtml = boxes
.map(
box => `
<div class="box">
<h2>${box.title}</h2>
<p>${box.description}</p>
</div>
`
)
.join("");
document.querySelector(".grid").insertAdjacentHTML("afterbegin", boxesHtml);
}
renderBoxes();
We make up an array called boxes and add our static data. Since you have full control over what these objects look like, so you can name the properties anything you want.
We're using some arrow functions and template literals when mapping, but that's all vanilla JavaScript and is supported by most browsers. Finally we inject the rendered HTML into our .grid and the results are the same as the original markup.
Recognizing these repeating patterns and code blocks will help you become a better programmer and developer. HTML blocks can be extracted into re-useable "components", which are key in modern frontend libraries. Common functions can be made into "utility functions" that help keep your code DRY.
Other Ways To Advance Your Skills
Using a Frontend Framework
As you can see from the above examples, we don't need to use a frontend framework or library to start flexing our development muscles. You can make entire applications with just vanilla JavaScript. However, a frontend framework can make our lives a lot easier and most companies expect you to be familiar with at least one.
The major ones these days are React, Vue, Angular, and Svelte. You'll have to try them out and see which one is right for you. I would suggest picking one and sticking with it. Try the above exercises in your chosen frontend framework and see if you enjoy it.
Checking out SVGs
SVGs, or Scalable Vector Graphics, have been around for quite some time. The most common use case for them are icons, but there's so much more you can do with SVGs.
They can be easily styled and customized with CSS and can be animated to give some amazing effects.
The above pen is taken from this great article on Log Rocket.
For more https://svgontheweb.com is a great place to learn more about the powers of SVG and all the cool things you can do with them.
Check out HTML Canvas
The HTML Canvas element, or <canvas>, allows you to draw various graphics on a web page. The amount of crazy awesome stuff you can do with canvas is virtually unlimited.
You can get started by trying out this MDN Canvas tutorial.
Conclusion
Hopefully this post has inspired you to experiment and practice more with JavaScript and data. These were basically mini tutorials to help you get started. If you would like me to go more in depth on any of the topics, feel free to comment below! Also comment if you think I should add anything else to this list.
Top comments (2)
Damn that CSS are super heavy tho, I mean take a lot of work, is there any way to make that kind of animation without repeating
dashthing on class?There are other ways to animate SVGs other than with CSS. You could add the
<animate>element or use JavaScript with something like snapsvg.io.This site has some great references to SVGs svgontheweb.com/#animating