[VIDEO] DEV SNACK: Text Editors & Validators

TRANSCRIPT

Welcome to Skillcrush Dev Snacks: bite-sized demos about all things development!

In this video, we're going to talk about how professional developers, like you, use text editors not only to edit, but also to debug code, in combination with code validators. It's really important as a developer to be able to debug your code. So let's get started!

Text editors have powerful features. One feature is the ability to open a project directory, rather than just individual site files. This is important because files in individual project directories (aka site folders) often have similar naming conventions, like index.html or main.css. So the first step in my debugging practice is ensuring my files are set up and linked properly, that I don't have duplicate files, and that the file I'm viewing in my browser is the one I'm editing. (And not accidentally, say, solution code in my Downloads folder.)

Open up your text editor (here I’m using Atom) and go to File > Open Folder. I can quickly switch between files in my project directory, and I know exactly which file I'm editing.

The file path in my text editor and the browser path should match.

Opening a project directory is also a great idea for WordPress sites, Ruby projects...you name it!

Text editors write code without any formatting. Despite the lack of formatting, they help make the code easier to read with automatic indentation for nested elements and syntax highlighting.

Syntax highlighting means my text is color-coded based on the programming language. Typically, tags are one color, text another color, etc.

The colors can give me clues when I have errors. For instance, my first list-item label in this list ("About") is white, but the second label ("Work") is the orange reserved for my tags.

If I inspect this line, I notice a typo. I'm missing the closing punctuation for my opening link tag! Once I add that in, "Work" changes to white so I know it’s been fixed.

Now, what's going on with the third list-item and the code that follows? It's all green, rather than just the link. I see I've forgotten my opening quotation mark on the href. Fixed!

Syntax highlighting works for many languages, including CSS and PHP used on WordPress sites.

Despite syntax highlighting and multiple checks, sometimes errors still hide.

So, periodically as I work, I want to validate my code. Here is the W3C HTML validator. Since my code isn't live, I'll use "Direct Input." Aaaaaand it seems I have some errors.

Errors 1 and 2 reference the same line. They mention there is a fragment, or bad value, in my href. I also see talk of quotes. Upon further inspection, I can see I'm missing an opening quotation mark.

Error 3 is warning me I have an element somewhere above line 40 that isn't closed. Error 4, says I have a problem starting around line 31. If I review the code between those lines, I find I didn't close my first half-width div! Often if you resolve one error higher up in the code, when you revalidate, you'll find the errors after it have been resolved, too. Sweet!

Validators won't catch every error, but they are a great place to start.

Happy code debugging!

See you next time!