Learn Express, Greensock and Nightmare

As developers, we have a responsibility to protect the data our users trust us with. No one wants to wake up to the news that their site was hacked and all of the user accounts stolen.

Security is important, yet it is often overlooked and forgotten.

Part of the reason for this is that security seems hard to get right. This results in developers crossing their fingers and hoping for the best.

In this course, you'll learn how to protect your application by learning how to attack it.

Start your journey into web security today!

Check out these [**community notes for this course on Github**](https://github.com/wjohnson85/eggheadio-web-security-essentails).

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

express

Web Security Essentials: MITM, CSRF, and XSS

Express is a well-known and supported framework for Node web applications. It provides a lot of excellent functionality to process requests, interact with other APIs, handle authentication and return appropriate requests for any client.

This collection will look at providing an API for a specific application but will explore concepts that will be helpful in building a wide variety of applications.

Building an API with Express

Modern applications know how to keep users informed of realtime updates through notifications, popups, and other messages.

On the development side, the ability to not only create web apps but have them communicate in realtime is a quirky, standout skill for your resume. It’s interesting, useful, and powerful.

In this course, Mark Barton will show you how to use Socket.io to facilitate bi-directional client-server communication and notifications using Vue on the frontend. Socket.io is a JS library that connects a client-side library to a node.js server. In the course, you’ll see how to use Socket.io to broadcast simultaneously to all or targeted clients based on filters you set up — so the right people see the right message at the right time.

You’ll learn to set up and connect Socket.io with node.js and Vue, and you’ll get practice making informed, complex architectural decisions around realtime broadcast messaging.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue and Socket.io for Real-Time Communication

Learn how to build a simple REST API to store notes using the latest built-in node features including native ES modules, the fs/promises API, async/await, the nullish coalescing operator, and destructuring. No compilers, no build steps, pure code.

This collection of lessons is great for beginners to Express as long as they are familiar with JavaScript and the HTTP protocol. Those more familiar with node and express will appreciate a fast-paced, modern take on using these popular tools and will likely benefit most from the lessons on input validation, models (which emphasizes a lot of new syntax), using fs/promises to serialize a `Map`, and accessing asynchronous data with `async/await`.

Pre-requisites:

- [Install curl](https://curl.haxx.se/)
- [Install node 14](http://nodejs.org/)
- Be familiar with the terminal

View the source for this project in the [project's github repo](https://github.com/xjamundx/egghead-express).

**Notes**:

- I'm not very pedantic about REST and basically just mean an API over HTTP
- [Express 5](https://expressjs.com/en/guide/migrating-5.html) is still in alpha (and has been for over two years), but most of these lessons apply to Express 4 as long you use something like [express-async-errors](https://www.npmjs.com/package/express-async-errors) to add support for `async` routes and middleware

Build a REST API with Express 5 and node 14

Animations attract the eye and add a higher level of engagement for your users. But they’re not easy to set up, and they don’t always look the way they should on every browser. 

Greensock is the best platform available for creating performant, highly-customizable animations. This course will walk you through the features of Greensock, including how to:

- animate an element
- manually control an animation
- animate between CSS classes

…and more, with cross-browser support to ensure your animations look sharp everywhere.

Ultra high-performance, professional-grade HTML5 animation for the modern web

greensock

Create Amazing Animations with GreenSock

While this course is for IBM Domino Developers who are looking to utilize Node.js alongside their applications, or Javascript developers looking to integrate with a Domino server. There are quite a few tips and tricks you can learn for integrating Node.js as a proxy server for any REST API you might want to communicate with your JavaScript Application.

We cover how you can continue to use cookies provided by IBM Domino for user authentication and authorization while accessing a Node.js / Express based application, including modifying the standard login form to expose authentication errors.  

We show how to store user level information inside a JWT giving the option to store functional levels of access safely.  This stateless token can then be decoded server side to list what user roles a user has and therefore can restrict functionality without having to refer back to Domino each time.

The course will demonstrate Create, Read, Update and Delete methods using the Domino Data Services all via the NodeJS application but still maintaining Domino security.

And finally, we show how you can reuse Domino generated HTML inside a handlebars template by scraping and manipulating the HTML.

Integrate IBM Domino with Node.js

JSON Web Token (JWT) is a low overhead option for authentication that is easy to implement and scales with your application. There is no need to store session data as everything you need is stored in an encoded string sent in the JWT, significantly reducing database overhead for your servers.

In this course, we will build a simple authentication server that will act as a token issuer, and we will use those tokens to access resources on an API.  Starting from scratch, you will learn how easy token based authentication can be and will understand how to use them on your APIs as well as on the front end of your web applications.

JSON Web Token (JWT) Authentication with Node.js and Auth0

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

Nodejs

Express is a minimal web server built on Node.js that provides essential functionality for delivering web applications to the browser and mobile devices. This series will guide you through the first steps of using Express for building your own applications.

Getting Started with Express.js

GreenSock supports all of the CSS3 3d properties, so you can freely rotate around X, Y, and Z axises with rotationX, rotationY, and rotationZ. Once that's set up, you can tweak the perspective of the element with transformPerspective.

Spin Elements in 3d with GreenSock

By default, elements use their own perspective, so if you rotate multiple elements on the page the perspective will seem a bit off for each of them. The solution is to set the perspective on the container element, then each child element will follow the parents' perspective.

Control the Shared 3d Perspective of Multiple Elements with GreenSock

Sometimes you want to leave an animation looping without any user interaction. This is done using the "repeat" and "yoyo" properties combined to keep the tween moving back and forth from the start properties to the end properties.

Loop a Tween Forever Using Yoyo and Repeat with GreenSock

In this lesson we create a very simple web page to connect to our socket Server.

Once a client connects, it is assigned a unique random identifier as its socket ID and we will log this out to the Server console.

We will send out a random number on the socket every second and demonstrate multiple clients receiving this value at the same time.



Set up a simple Socket.io client to connect to the server.

In this lesson we connect a Vue application to our Socket Server.  

We use the pulse from the previous lesson to display a graph using the Vuetify framework and then demonstrate 2 clients showing the graph changing in sync.

Connect a Vue.js Component to a Socket.io server

**Note:** If you want to understand and follow along with the logging service Mark uses, watch this lesson: [NodeJS Logging using Winston and Papertrail](https://egghead.io/lessons/javascript-nodejs-logging-using-winston-and-papertrail)

In this lesson we will get an Express Server up and running with Socket.io.  We will build the Socket.io logic in a seperate file to demonstrate how the Socket.io instance can be used within other parts of the Express Application.

This lesson is short and sweet and lays the groundwork for the other lessons in this course. 

If you get an error starting the server which indicates a Papertrail connection error then you have not updated the Papertrail host and port in the logger.js.

You can safely ignore this error if you do not wish to use Papertrail - else you can sign up to a free Papertrail account and add the correct host and port.

Getting started with Express and Socket.io

Using a HTTP POST to trigger a message which is broadcast to all connected clients via Socket.io.  The message is displayed within a Vue component, which in this case is a [Vuetify snackbar](https://vuetifyjs.com/en/components/snackbars) component. 

As part of the lesson we demonstrate transmitting an object so we can dynamically change the snackbar color, as well as the message itself.

An example where this approach might be used is where you want a server monitoring system call a web hook on your server when there is an issue, this in turn pushes a message to connected clients, simultaneously and in real time.

Display a broadcast message using a Vuetify snackbar component which is sent via Socket.io

Often we need to send data to specific users or groups of users using Socket.io, but by default Socket.io only provides a unique volatile ID so this lesson will demonstrate how we can map on the Server a known User with that Socket ID.

The lesson will build a new Vue component which will allow a User to select their name and group and then send this information from the client to the server using the Socket.

This lesson will also use SessionStorage to store this information so if the browser is refreshed then the component will be auto populated and the details sent to the server.

Mapping a Socket.io id to a known User using an example Vue component.

In this lesson we create a Quiz Vue component which displays a random image.

The random image is read from the Server filesystem and sent over the socket to each of the connected clients.  The clients use the Quiz component to display the image in a modal window and then select an answer.  The answer is then sent back to the server over the socket.

Sending an Image from Express to a Vue Component using Socket.io

Building on the previous lesson this lesson will build a Vue component for composing a message to send to a specific user or group of users.

The lesson will not use HTTP for communication between Server and Client and Client to Server but instead use Socket.io to demonstrate bi-directional real time communication.

Once the payload has been received at the server the targeted User or Group will be identified and Socket.io will then emit the payload to them.  The clients will then use the previous lessons PopupMessage component to display the message. 

Build a Vue Component to send a message to specific users using Socket.io

In this lesson learn how to track when a client disconnects from the server as well as update our previous Vue component to display a message if the server disconnects.

Handle Client and Server disconnects using Socket.io

An acknowledgement function allows the client side call to receive a server side generated response as part of the callback.

This can be useful where the client needs confirmation that the initial call has succeeded  or the payload has been manipulated with Server side logic and returned back to the client.

In this lesson we enhance the previous lesson Quiz Vue component to simulate checking the answer on the server and then returning back to the client in the callback function the result of the check.

Topics

Instructors

Content Type