 Resources from Elijah Manor in 2021

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Not only can you provide default values when using ES6 parameter object destructuring, but you can also require the presence of certain properties

ES6 Parameter Object Destructuring with Required Values 

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Unfortunately not all shell commands work across various environments. Two main techniques to support cross-environment scripts is to either use cross-platform commands or to use normalized node packages. In this lesson, we will look at updating an existing set of npm scripts and make sure they work on Mac OS X, Linux, and Windows.

Make npm scripts cross-environment friendly

In this lesson we will look at how we can setup our npm scripts to execute when the file system has changed. Some common examples of this are automatically linting your code, running unit tests, or using a pre-processor for your CSS.

Run npm scripts when files change with onchange

In this lesson we will look at running several npm scripts in parallel. Sometimes you don’t need scripts to be run in series and switching them to run in parallel can increase performance since they are not blocking each other. At the end you need to add a wait command so they can be terminated with ^C

Run npm scripts in parallel

For each npm script there is a pre and post version of the script that will be called if defined. This can be helpful when you want to enforce a validation check before running a script or inject a specific behavior when a script is executed.

Use pre and post npm script lifecycle hooks

The need for comments in your package.json file becomes desirable the more and more npm scripts you start to define. At first glance this might seem like a show stopper since JSON does not support comments, but there are ways around this limitation that we will discuss.

Add comments to your npm scripts

We will walk through how to create a simple package.json file manually as well as create a default package.json file through npm with `npm init -f`. Then we will look at where the npm scripts live and how to run the default script that was created.

Create a basic package.json file

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’s styles, however, it can be very tricky to try and inspect an element if it only shows up when it’s being hovered or if it disappears when it loses focus. Thankfully, there is a handy little trick using `setTimeout` and `debugger` that makes inspecting such elements much easier.

Inspect and Style an Element in DevTools that Normally Disappears when Inactive

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

React 16.5.0 now supports the new Profiler feature in the React Developer Tools. In this video, we will update an existing app to React 16.5.0 and show off various features of the new Profiler. The tool can automatically record a lot of useful information from your React App, but you can also add your own custom interactions to help track user generated events.

https://github.com/facebook/react-devtools

Use the New Profiler in React Developer Tools to Generate Flame Charts and Interactions

We will learn how to use npx to run node modules that are already installed locally in a package instead of manually poking into the node_modules/.bin folder or leveraging an existing npm script.

Use npx to run locally installed node modules

In this lesson we’ll temporarily install and invoke a node package from npm that we don’t already have installed globally or locally. This is useful for commands that you don’t use regularly and you’d like to stay up-to-date or for tools you want to play around with temporarily.

Use npx to Temporarily Install and Invoke a Package from npm

Using npx we will test out different versions of a node module from the command line. Depending on your use case you may also need to utilize the -p flag that will temporarily install certain dependency packages during.

Test Different Node Module Versions with npx

In this lesson we will use npx to run a package using different versions of Node.js. This can become valuable when testing the various new features that are introduced in versions of Node.js.

Use npx to run commands with different Node.js versions

We will incorporate npm specific environment variables when executing various npx commands. In our example, we will transpile code to a folder name that matches the version of the current package.

Execute npx commands with $npm_ Environment Variables

In this session we will show how you can use npx to pull and execute code from a GitHub repository. If you need even more control, you can target a specific branch of your repository to execute.

Execute Code from a Remote GitHub Branch with npx

Not only does npx support GitHub repositories, but it also supports pulling and executing code from a GitHub gist. However, as with any code on the internet, you should look and verify the code before running it in your terminal.

Use npx to execute code from a GitHub gist

If you have a presentation coming up or you just need to present some documentation, then the Code Surfer React component is a powerful way to Highlight, Zoom, and Scroll snippets of code. This component is particularly designed to work with mdx-deck, which is a MDX-based presentation framework that enables easy slide creation with markdown and React components.

https://github.com/pomber/code-surfer
https://github.com/jxnblk/mdx-deck

Scroll, Zoom, and Highlight code in a mdx-deck slide presentation with Code Surfer <🏄/>

Historically, the `npm init` command was solely use to create a new package.json file. However, as of npm version 6.1, you can now use a new feature of `npm init` called the <initializer>. The initializer you provide will determine how your new application will be built. npm will prepend `create-` to the name of the initializer and it'll use npx to temporarily install and execute that project.

Create a new project using the npm init <initializer> command

In this course we are going to be talking about a little utility called npx. If you have npm version 5.2 or above, then you already have npx installed on your machine. It enables you to play around with node packages in a way that wasn’t really easy before.

Have you ever wanted to run a locally installed node_module, but you didn’t really want to jump through hoops to do so? Or how about playing around with a package from the npm registry, but you don’t really want to install it globally yet? Well, npx is the tool for those things. You can even play around with experimental GitHub branches with npx, and so much more.

I find myself using npx all the time. It’s one of those tools, where at first you think, "Ohh that’s simple", but then the more you know about it, it can do so much more than you thought at first. So, sit back and enjoy learning about npx.

Introduction to Execute npm Package Binaries with the npx Package Runner

[create-react-app version 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) added a lot of new features. One of the new features is support for [Sass](https://sass-lang.com/). If you start to use Sass, create-react-app will give you an error, but will give detailed instructions on how you can add Sass support to your project.

Add Sass Support to Create React App 2.0

[create-react-app version 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) added a lot of new features.  One of these features is to add CSS Module support.  CSS Modules automatically scope class names and animation names local by default to get around the problem of global name clashes. You can learn more by looking at the [CSS Modules repository](https://github.com/css-modules/css-modules).

Topics

Instructors

Content Type