Resources for Web Developers in 2022

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

openapi

In this lesson, you will learn how to define HTTP POST operations for your Todo API server using Swagger. Creating the endpoint, passing the todo in the request body, and parsing the todo are all demonstrated.

Define an HTTP POST Endpoint for a Node.js Server with Swagger

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

The AngularJS $exceptionHandler service allows you to catch and handle unanticipated JavaScript errors in a meaningful way.

Catching errors with $exceptionHandler

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

`ngTemplateOutlet` is a directive that simplifies creating elements from template elements. This allows you to create simple, reusable templates then generate elements with custom data whenever you need them.

Create Elements from Template Elements with ngTemplateOutlet in Angular

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

Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.

Use State and Props in the Component Render Function

Natural is a general natural language facility for nodejs. Tokenizing, stemming, classification, phonetics, tf-idf, WordNet, string similarity, and some inflections are currently supported.

natural

In this lesson, we will learn how to train a Naive Bayes classifier or a Logistic Regression classifier - basic machine learning algorithms - in order to classify text into categories.

Classify text into categories with machine learning in Natural

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Ensuring your charts are responsive is essential if you want them to work regardless of the user's device and screen size. In this lesson we'll learn how the viewBox attribute of SVG elements works, and apply that knowledge to make a future-proof D3 chart.

Responsive D3 charts with the viewBox attribute

By default the new Angular Http client (introduced in `v4.3.1`) uses JSON as the data format for communicating with the backend API. However, there might be situations where you may want to use some other format, like `text/plain` for fetching a CSV file. Using the `responseType` property this can be achieved quite easily.

Fetch non-JSON data by specifying HttpClient responseType in Angular

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

Javascript has first-class functions which means that any function can stored, passed around, and returned just like an Object can. This allows for a lot of flexibility with how you call functions. This allows us to use array reduction to create functional pipelines by composing arrays of functions.

Compose Functions with Reduce

angular-formly templateOptions bring a great deal of power and flexibility to your forms with angular without sacrificing simplicity in your templates. The templateOptions property allows you to specify some attributes that would normally exist on your `ng-model` like `required`, `maxlength`, and even `ng-click`. It also works great with `expressionProperties`.

angular-formly: templateOptions

We examine the data structure Task, see some constructors, familiar methods, and finally how it captures side effects through laziness.

Capture Side Effects in a Task

This lesson will teach you how to create the javascript functions defined by the Swagger specification to return all Todo items to the client when requested with an HTTP GET method.

Create a Node.js function for an HTTP GET request for a Swagger API

In this lesson, we will learn how to train a Naive Bayes classifier and a Logistic Regression classifier - basic machine learning algorithms - on JSON text data, and classify it into categories.

While this dataset is still considered a small dataset -- only a couple hundred points of data -- we'll start to get better results.

The general rule is that Logistic Regression will work better than Naive Bayes, but only if there is enough data. Since this is still a pretty small dataset, Naive Bayes works better here. Generally, Logistic Regression takes longer to train as well. 

This uses data from Ana Cachopo: http://ana.cachopo.org/datasets-for-single-label-text-categorization

Classify JSON text data with machine learning in Natural

Chaining operations like `map` and `filter` on an array can have performance issues as we have to iterate through the whole array for every operation.

In this lesson we explore this problem by doing some basic array transformations and measuring their performance.

 We’ve got two utility function to help us with this:
* `arrayOfRandoms` is a higher order function which helps us create a range of random numbers
* `timeIt` will help us measure how long functions take to execute

It's important to understand this problem and why it occurs before we move on to how transducers handle it differently.

Understand why Transducers can Improve Performance

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

One of the most confusing parts of getting started with TypeScript is figuring out how to use all the libraries that you know and love from JavaScript. This lesson walks you through including Lodash in your project, installing Lodash definition files, and then properly loading Lodash with SystemJS.

Using Lodash in TypeScript with Typings and SystemJS

You can change behaviors of element and `@Component` properties based on services using `@HostBinding` in `@Directives`. This allows you to build `@Directive`s which rely on services to change behavior without the `@Component` ever needing to know that the Service even exists.

Combine HostBinding with Services in Angular Directives

Decorators are a feature of TypeScript that are becoming more and more common in many major libraries. This lesson walks you through what decorators are and how to create your own.

TypeScript - Understanding Decorators

In this lesson, you will learn how to define multiple parameters in the API specification to identify the ID of the Todo item being updated in the URL, as well as the contents for the updated Todo item in the body of the request.

Define an HTTP PUT Endpoint for a Node.js API Server with Swagger

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

Let's fix a small UI glitch that was occurring on startup and whenever the refresh button was clicked. In this lesson we will see how to avoid common bad habits of imperative programming, and how to use reactive programming to keep the complete dynamic behavior of a value specified in one convenient place.

Clear data while loading with RxJS startWith

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

chrome-devtools

 AJAX allows us to send requests to the server from our javascript applications, rather than allowing the browser to directly request declaratively specified resources. Under the hood, though, AJAX requests are still just HTTP requests - and that means we can use the Network Panel in Chrome’s DevTools to inspect our AJAX operations!


Examine AJAX Requests with Chrome Devtools

Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visualizations. In this lesson we’ll look at how to use Chrome Dev Tools to examine the data associated with your generated markup and experiment with styles to speed up the development process.

Debug D3 v4 with Dev Tools

Storing and updating values inside a component’s local state (known as controlled components) is such a common pattern that Preact offers a really handy feature called ‘link state’ that not only removes the need to bind class methods, but also handles the setting of new values. This can remove the need for ‘setter’ style methods on classes and in this lesson we’ll look at an example of tracking the value of a ‘text input’