Put Down the Javascript – Level Up with the Fundamentals of Web Development

♪♪ Hey everyone, stop what you're doing and put down the JavaScript. We're going to talk about how you can level up with the fundamentals of web development.

So, who am I? I'm Kolby Fayak. I'm the one hugging BB8 and Kylo Ren over there. I work with the Dev community as a developer advocate for Applitools. You can find me pretty much everywhere on the web by just googling my name, as I'm the only one in the world.

So we're going to start off with a story. Here we have our two friends, Mark and Luke. Both our friends are switching careers and giving coding a try. They're both trying to find a bootcamp to dive right in. Mark found a one month bootcamp that will make you a JavaScript ninja. They make sure to teach you the most popular frameworks available right now that will make you super marketable.

Luke took a little bit of a different route. He found a course that takes a little bit longer, but he'll know how to build a whole website with just some HTML and CSS. He'll also learn some JavaScript, but they didn't promise any specific JavaScript frameworks.

Both of our friends decided to submit their resume for a job at 1Up Inc. It's a junior front end dev position. They both get a callback for a code challenge. They'll find out that their task is to take this mockup and transform it into a website. They'll have about 45 minutes to do this, and then they'll talk about their work afterwards.

First up is Mark. This is easy for Mark. He just got out of a boot camp where he learned how to use React, and the job posting says that they want React. So that's perfect. It's pretty easy to spin up for a quick win.

Then we have Luke. He again decides to take a little bit of a different route. The website looks pretty simple, right? So he thinks he can do it with some plain old HTML and CSS.

So let's compare solutions. Mark didn't get super far.

He only got the title. Luke seemed to get pretty far, and it's not perfect, but it's a good start. So what happened with Mark? Let's just say that Mark didn't have a great interview. First, Mark tried to get a React app going, but he forgot that he needs to configure a package manager in order to install React locally. Luckily, he was able to quickly look up an example on the React Docs to get moving. But step by step, he kept running into issues, like simply getting React to work inside of the browser. But once he had it working, he realized that he could add some styles to make it look right. But by the time he actually got started styling, he ran out of time. He spent so much time debugging that initial setup that he never had a lot of time to build the site. On the other hand, Luke broke out his favorite editor, just like Mark did, but instead of trying to deal with packages, he just started with some basic HTML. He used some semantic tags like a header and a nav, added a main tag, an image, and some text, added some styles to make it look right, and he was good to go. Luke ended up with a lot more progress than Mark, so of course Luke lands the job. He had something to talk about in those last 15 minutes. Mark didn't have much to talk about. He was stuck fumbling around with the start of the project with React.

The truth is the story is only slightly exaggerated. I didn't use real names or likeness, but this exact situation happens quite often. I've personally sat through interviews watching candidates struggle through these same types of challenges. Job seekers come into an interview wanting to impress everyone by using the coolest tools, but they often set themselves up for failure. It's easy to want to learn exciting tools and jump right in, and that's totally okay. That's what helps keep me motivated to learn. But along the way we can set ourselves up with a good foundation.

So let's talk about why these things can make a difference and learn some cool tricks to level up along the way. So we'll start with HTML. I would imagine most of us have probably at least heard of HTML. So what exactly is it? HTML is the essential building block of all websites, and it has been since probably before you even heard of HTML. A lot of us probably don't have to write this by hand much anymore, given React and other UI libraries kind of do it for us, but this is the basic skeleton of a webpage. We have our doc type, HTML tag, head, and a body with a simple h1. We're probably more familiar with this though, the actual skeleton of our page gets abstracted away.

We define our page by only the content. So instead of our HTML and our head, we might only see our h1. Ultimately this JSX gets compiled down to HTML. The same HTML that we can write by hand, but now we have tooling that can provide us with ways to generate it more efficiently. So that next JS application that you spun up, yeah, that's just creating a bunch of HTML. So next we'll talk about CSS. A lot of us probably know this as the magic that the web design team creates. I've actually heard back-end developers say that they're afraid to touch it. So what exactly is CSS? CSS stands for Cascading Style Sheets. We have a simple example here, but it gives us the ability to change our styles and our layout. And bringing this into React we have a few options. Personally, I'm still a fan of writing my CSS outside of my JavaScript. I like to supercharge it with Sass. But I know a lot of people like to write their CSS inside of their JavaScript and there's luckily a ton of libraries out there to do just that. But similar to HTML that we saw before, this all gets compiled down into our basic CSS. The only difference is how it's served, whether it's an external link, it's embedded, or inline.

Though a lot of people might not, might this not be new for a lot of people, aside from the gasp that I heard when I said that I write my CSS outside of my JavaScript, it's important to understand the foundation and how these basic things work. So how can we do that? The first thing we can apply this to is SEO. Many of us have probably heard of this in one form of another, but maybe not understand what it exactly is. SEO stands for Search Engine Optimization. It can be super complex with keyword research and strategy. But we're going to focus on the stuff that we can control as developers.

So our ultimate goal with SEO is to present our content in a way that makes it easy for search engines like Google to understand. The most important thing here is content. But it also includes the tags that you use to present that and the metadata that you use to make sure that it looks right in the search engine. One thing you can try to do is maintain a logical page outline for your website. You shouldn't have every one of your titles as an h1. Instead, use h1 through h6 to organize your content, similar to what you would see in a book. What this will do is cue the search engines as to the hierarchy of your page. It's helping to answer what information belongs under what title. Here we have two examples of image tags. The top one doesn't have any alt value, but a bottom one has a description of what's happening inside of the image. What do you think is more likely to show up in a Google image search? By providing our alt tag, we're helping Google understand what that image is. It's adding more content value to the page and ultimately helping us in our searches. If you go to your website and click around, and you look at the words inside of the browser tab, does it say the same thing for every single page? The tag that controls this is the title tag. This is what also controls the text that's shown in Google. Google's getting smarter at adding more context about pages. Chances are, it's not going to consider each and every one of those pages as valuable, if all of them show the same name of your blog.

Next, we'll talk about accessibility. Accessibility is one of the more meaningful points here. A good high-level summary of what accessibility is, is how usable your website or application is for different types of people. This is regardless of any type of disability. So that means, can someone with a seeing disability still use your website? Each of us as developers are responsible for how our creations are being used. Remember our page outline from before? While optimizing our SEO by using proper semantic HTML, you're also helping screen readers understand the hierarchy of your content. As a screen reader is moving down a page, it is able to jump over the sections that the person might not be interested in. Imagine this is going to be very difficult if every single one of those headers is an h1.

And remember our image example? Are you starting to see a pattern here? A lot of times when we're writing our HTML properly, you're going to end up providing value in multiple ways. Here if a screen reader lands on our image, the person will actually get to hear what the image is showing. It's just another low-effort way to help everyone experience the website.

Lists are also a practical use of HTML that's used across the web. But far too often, I see code that logically is a list that's not using HTML list elements. Next time you create a navigation for your app, don't use a bunch of divs. Use the actually HTML list elements. This will actually help assistive technology assist the people who are using it. And they're not much harder to style. Just set your list style of your UL to none, and you're practically where you were when you're starting off with a div.

And lastly, we'll talk about simplicity. And what do I actually mean by simplicity? We don't always need extravagant solutions to get our code to work the way that we want it to. Sometimes there's a simpler way to do things that we're struggling to do in JavaScript. You don't need to rewrite the HTML spec every time you add a new component. More often than not, the more JavaScript that you write means the more JavaScript that you ship, which can impact the performance of your app. Use what we already have, it's also less work. Like here, the data list element, we can create a basic autocomplete feature for an input. You also don't need to write JavaScript to create a simple loading animation that you might see on some of your favorite websites. Using some CSS, we can use a gradient and an animation to create this effect. It's just a small snippet here. Better yet, having it as a class, we can extend it to pretty much any element that we want. And if I asked you how you would make this text responsive before you actually saw this, how many of you would jump right into JavaScript? We can actually do this quite nicely with some simple CSS. Here, I'm setting the font size of our H1 to 10 viewport width. It might look a little bit choppy in the slides between having to say this out as a GIF and presenting it across the Internet. But I promise you, it's buttery smooth. That way, it scales nice and evenly with our browser. And bonus, if it gets too small, we can use media query breakpoints and keep it all in CSS.

So how are you feeling after all of that? I hope inspired. There's a lot you can learn without diving head in first into JavaScript. If you take all those things into consideration, you're going to be better off as a developer. Not only will you help yourself by avoiding to over engineer solutions, which can typically bring on more stress, you're going to help yourself bring more traffic to your projects and help others use them. If you want to learn how to go from end to end from design all the way up to a full stack Next.js application, include building out those components with the fundamentals along the way, Check out my free course on YouTube. Where you can find it at from design to.dev. And that's it. If you want more, you can find me everywhere at ColbyFayok. I'll also send a link with some of the information you've seen here today. Thanks everyone.