anthonyalvarez

Maintainable JavaScript

Writing readable code.

Naming

Camel case is the way most developers name variables and Functions.

Variable and Functions

Beginning with a noun helps to differentiate variables from functions, which should begin with a verb instead.

Variable Examples

anthonyalvarez

Chrome DevTools 101: Debugging JavaScript

• To open DeVTools on Windows: Press Ctrl + Shift + J
• Click sources tab to debug JavaScript

The 3 parts of the Sources panel UI

1. The File Navigator pane. Every file that the page requests is listed here.
2. The Code Editor pane. After selecting a file in the File Navigator pane, the contents of that file are displayed here.
3. The JavaScript Debugging pane. Various tools for inspecting the page's JavaScript. If your DevTools window is wide, this pane is displayed to the right of the Code Editor pane.

anthonyalvarez

Pause JavaScript with Breakpoints

Overview of when to use each breakpoint type

The most well-known type of breakpoint is line-of-code. But line-of-code breakpoints can be inefficient to set, especially if you don't know exactly where to look, or if you are working with a large codebase. You can save yourself time when debugging by knowing how and when to use the other types of breakpoints.

Breakpoint Types

1. Line-of-code : On an exact region of code.
2. Conditional : line-of-code: On an exact region of code, but only when some other condition is true.
3. DOM : On the code that changes or removes a specific DOM node, or its children.

anthonyalvarez

Online & Offline Events in JavaScript

By taking advantage of the 'online' and 'offline' events in JavaScript, you are able to notify your users that your web application is no longer online or even perform different actions based on the status. In this video I show you how to use these events to create simple messages that appear, showing the status of the online state of the browser.

For your reference, check this out:

• MDN: Navigator.onLine Property
• MDN: online event

anthonyalvarez

Online & Offline Events in JavaScript

By taking advantage of the 'online' and 'offline' events in JavaScript, you are able to notify your users that your web application is no longer online or even perform different actions based on the status. In this video I show you how to use these events to create simple messages that appear, showing the status of the online state of the browser.

For your reference, check this out:

• MDN: Navigator.onLine Property
• MDN: online event

anthonyalvarez

Online & Offline Events in JavaScript

By taking advantage of the 'online' and 'offline' events in JavaScript, you are able to notify your users that your web application is no longer online or even perform different actions based on the status. In this video I show you how to use these events to create simple messages that appear, showing the status of the online state of the browser.

For your reference, check this out:

• MDN: Navigator.onLine Property
• MDN: online event
• OneNote

anthonyalvarez

Loose Coupling of UI Layers

Keep CSS Out of JavaScript

Keeping CSS out of JavaScript means that all style information still lives in CSS. When JavaScript needs to change the style of an element, the best way to do this is by changing CSS classes instead of using JavaScript to change style using .style method or using JavaScript expression in a CSS code block.

// Good
element.classList.add('reveal');

anthonyalvarez

Avoid Null Comparisons

Comparison to null does not actually prevent errors. Comparing a variable against null typically does not provide enough information about the value to determine whether it's safe to proceed. Fortunately, JavaScript has a number of ways to determine the true calue of a variable.

Detecting Primative Values

There are 5 primitive types in JavaScript:

1. string
2. number

anthonyalvarez

Throw Your Own Errors

Think of errors as built-in failure cases. It is always easier to plan for a failure at a particular point in code than to anticipate failure everywhere. This is common practice in product design, not just code.

The throw statement throws a user-defined exception. Execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.

Throwing Errors in JavaScript

It is more valuable than any other language. You can throw an error by using the throw operator and providing an object to throw. The best way to display a custom error message is to use Error object.

anthonyalvarez

Style Guidelines

The term "Style Guidelines" amd "code conventions" are pften used interchangeably. Style guidelines are a type of code convention aimed at the layout of code within a file. Code conventions can also include programming practices, file directory layout, and commenting.

Having all code look the same is incredibly important on a team, because it allows:

• Any developer to work on any file regardless of who wrote it. There's no need to spend time reformatting or deciphering the logic of the file, because it looks the same as everything else.

• Errors becomes more obvious. If all the code looks the same, and you come across some code that does not, you have likely found a problem.