Resources for Web Developers in 2022

Bite-size video tutorials for badass web developers.

egghead

Video is a one-way form of communication, so user's don't have the chance to ask you to clarify or ask "Where does X fit in?" This places the burden on you to guide their eyes as you explain how all the little pieces of the code fit together. When your application has a "flow", "X triggers Y, Y triggers Z", make sure to "show the flow" by walking them through where each chunk of code fits. This involves a lot of mouse movement (or fancy keyboard selection shortcuts) and hightlighting to bring it all together.

Guide Their Eyes

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.

In addition to package.json level variables (such as name and version), you can have custom conf settings that can be used in your npm scripts. These config values can be overridden outside of the package.json by using the npm config set command if necessary.

Use custom config settings in your npm scripts

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

Now that we're keeping track of our coverage, let's upload our reports to a third party service so we can track our stats over time. In this lesson we'll show how easy it is to upload our stats to codecov.io.

Add code coverage reporting

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Most projects have automatically generated files or folders from the operating system, applications, package managers etc. Usually, we don't want to include these types of things in our remote repos because they can clutter the git history/storage and are not applicable to everyone that works on the project. In this lesson, we show how to create a `.gitignore` file to ignore files and folders from being tracked by git.

Practical Git: Remove unnecessary git tracking with .gitignore files

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually creating an application store, reducers and action creators. We have already made significant progress in simplifying state management within our application, but we have in fact only touched the surface of what Redux has to offer.

In this lesson, we are going to introduce ngRedux into our application and let it handle the rest of the heavy lifting as we work through this series. ngRedux is a project that provides angular bindings to redux to streamline integrating it into our application.

Angular 1.x Redux: Integrate ngRedux

Speed up your Sublime Text workflow by creating snippets out of boilerplate code. Sublime Text snippets are smart, configurable, and prevent repetitive typing.

Use Sublime Text Snippets to Avoid Repetitive Typing

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

In this video series we’ll take a look at Observables in Angular 2. We’ll figure out how they integrate with the http layer and how we can leverage their power to build a rock solid instant search with just a bunch of operators.

This first video walks you through the process of refactoring an existing solution to consume events from the template as Observables.

Consuming events as Observables in Angular 2

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

High availability apps require that no distinction be made between local and remote services. Attached resources should be accessed by environment variables, and in doing so allow you to swap out one attached resource for another. 

In this lesson we will setup a reverse proxy that directs image path requests and routes them through a defined server URL. By doing so, we decouple server requests for images which allows for easy switching from locally-served image assets to a CDN by simply updating an environment variable.

Proxy Requests for Local and Remote Service Parity

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

Starting with React 0.13.0 you can write components using ES6 classes.  In this lesson we'll walk through some of the syntax differences.

React components in ES6 classes

Learn how to install Angular Material with `npm install`  and load the required libraries and stylesheets into your blank web page.

> This course has been created by Thomas Burleson and Aaron Frost

Angular Material: Installing with NPM

Writing the code in the next version of JavaScript can really simplify the development of a library. In this lesson, learn how to create a build which uses the BabelJS transpiler to enable you to write your code using ES6 (aka ES2015) syntax.

Adding ES6 Support

Open API Initiative (OAI) is focused on creating, evolving and promoting a vendor neutral API Description Format based on the Swagger Specification

openapi

Swagger is a project used to describe restful APIs using the OpenAPI Specification. It allows you to document your API so consumers understand the endpoints, parameters, and responses. In this lesson, I'll show you how to install the swagger command line tool, create a new API project using swagger, and introduce you to the swagger API editor.

Create an API with Swagger

Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single array, the dreaded flatmap allows you to convert an array of objects into an array of arrays which then get flattened, and reduceRight allows you to invert the order in which your reducer is applied to your input values.

Learn to Flatten and Flatmap Arrays with Reduce

In this introductory lesson, we will discuss how the architectural concepts of Angular 2 can be applied to AngularJS 1.x. We will also take a brief tour of the concepts that we will be covering in this series as well as how the code is structured per lesson.

Introducing Angular 2 Concepts in Angular 1

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

nativescript

To prepare your development environment to code against native apis such as Objective C, Swift and Java, let's learn how to [install tns-platform-declarations](https://www.npmjs.com/package/tns-platform-declarations) to provide rich intellisense support for all the native iOS and Android api’s. This lesson will cover how to modify your tsconfig.json and references.d.ts properly to ensure working with native api’s is smooth and as helpful as possible.

Prepare for native iOS and Android api intellisense with NativeScript

Angular gives you two possibilities: externally link a stylesheet to your component, which is a great option when you have a lot of CSS code that might make your Component look messy; or embed it inline, which you might want to do when you only have a bit of CSS you want to apply. In this lesson we will take a deeper look at the advantages of both of these methods. 


Add styles to a component in Angular

By adding ES6 support to our source code, we need to add that same support to our tests so we can consume that synatx. This is quite easy with the `--compilers` flag for `Mocha`.

Adding ES6 Support to Tests using Mocha and Babel

In this lesson, you will learn how to define an HTTP GET endpoint using Swagger with URL parameters to identify the ID of the Todo item being requested.

Define an HTTP GET Endpoint with URL Parameters for a Node.js Server with Swagger

Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects.

Redux: Avoiding Object Mutations with Object.assign() and ...spread

Learn how to implement toggling a todo in a todo list application reducer.

Redux: Writing a Todo List Reducer (Toggling a Todo)

Schema definitions allow you to define the format and types of data sent and received by your API. This allows consumers of your API to be confident in using your API. In this lesson, you will learn how to create a schema definition for the Todo API server. 