Resources for Web Developers in 2022

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

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use [Array.prototype.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) to:

- Sum an array of numbers
- Reduce an array of objects to a sum of a given property
- Group an array of objects by key or a set of given criteria
- Count the number of objects in an array by key or a given set of criteria

Array.prototype.reduce in JavaScript by example

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

Binding is a core feature of AngularJS. It provides a simple mechanism for integrating your HTML with your data via {{bracketed expressions}}. In this video, John covers the basics of binding to get you started.

Basic Binding in AngularJS

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

When dealing with Components, there’s often the need to either have some local state controlled by the component (such as form input fields) or to tap into the lifecycle events of the component. In this lesson we’ll give some practical examples of both.


Define Stateful Components in Preact

Python is a widely used dynamically typed programming language. It allows for many different programming paradigms including object-oriented, imperative, functional programming, and procedural styles.

python

Getting input from the user via a console command can be done with `input` in Python. Learn how to implement it and validate user input in this lesson.

Read Input in Python from the Console

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

In this lesson we'll walk through the process of installing the react-native-cli through setting up a basic react-native project on iOS. We'll get the basic project running in a simulator via XCode. We'll also setup Android, Android Studio and get the project running on an emulator with the react-native run-android command.

Setup React Native for iOS and Android

Adding JWT support to the client. Storing the token in local storage, then creating a http interceptor to add the token to requests made to the server. Also implementing logout.


Auth Interceptor in Angular for JWT

A rich framework for building applications and services hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.

hapi

Routing is a fundamental aspect of any framework. In this lesson, you'll learn how to use path parameters in hapi's router. We'll also touch on how the router uses specificity to order routes internally.

hapi.js - Route parameters

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

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

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

Now let's learn how use the $http service to make requests to remote servers. In our case, we will load the data from JSON files and then make them available in our controllers. We will see a few techniques that I frequently use to make working with $http data a lot more convenient.

AngularJS Architecture: Using $http to load JSON data

PureScript is a small strongly typed programming language that compiles to JavaScript.

purescript

PureScript types are very extensive and we are going to experiment with type constructors and how to make then use them.

Basic Data Constructors in PureScript

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

In this lesson, we learn how to install Ionic and Cordova. We then build an app from scratch using the Ionic CLI and a blank starter template.

Build and Run an Ionic App from Scratch

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 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

In React, components manage their own state. In this lesson, we'll walk through building a component which manages it's own state as well as using TextInput and TouchableHighlight to handle touch events.

Use State and Touch Events in React Native

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.