Day 4; Advanced JS, Vendoring (Using other people’s code)

Writing javascript is great and all, but it's exhausting to do everything ourselves. This session will cover vendoring, and how to use existing javascript libraries to add functionality to our webpages!

Resources

Here are a list of the additional resources from the slides

Table of contents

• NPM
• The dangers of CDN’s
• Editor types
  • Single Pane/Classic WYSIWYG
  • Forms
  • Document based
• Problems with HTML generation continued
• Visualization
• Games

NPM

NPM is the Node Package Manager, this is a system that lets you run NodeJS packages. We don’t have time to cover NodeJS in this course, but it’s worth learning if you want to go forward in web development. Basically nodeJS makes writing large javascript projects easier, so a lot of people use it!

It allows you not only to write normal javascript, but actually extend javascript by running your own NodeJS server that gives you extra functionality javascript doesn’t have!

We have a series talking about npm on the ignite blog here

If you want to learn about NodeJS and NPM we have left you some resources here:

• Full NodeJS tutorial
• NPM explained

The dangers of CDN’s

There are a few security considerations with CDN’s. Here is a post we made talking about them, and how to avoid some of the problems!

Editor types

Single pane: quill, tiny MCE etc. Good for “small burst” content (twitter, reddit, comment section)

Block Based: Guttenberg, editor JS etc., Good for “long content” (medium articles, blog posts)

Form Based: Formspree, Wix getting started etc. Good for “highly structured content” (Contact forms, sign-in/check-in, profile pages etc.)

Document based: Microsoft office suite, google suite. Good for documents, include WYSIWYG’s with page metadata/state

Single Pane/Classic WYSIWYG

Everything is typed in one box, with controls either at the top, or inline (reddit, slack, medium, etc.)

Forms

Not necessarily a WYSIWYG, but forms will often be used for content that has rules, or multiple inputs (i.e valid phone number, certain length etc.). These are often combined with WYSIWYG’s

Document based

Will often have a classic WYSIWYG, but then will also have a form/forms to configure settings about the document

Problems with HTML generation continued

Regardless of what you’re doing always sanitize any input you’re getting, and make sure you can avoid some common security mistakes.

Here are some good resources on how to avoid problems:

• How To Prevent The Most Common Cross Site Scripting Attack - YouTube
• Input Sanitization - Peter Faiman - YouTube

And here’s a video on what can happen if you don’t:

• Someone finds bug in guy’s twitch chat app

Much more complicated version of this:

• XSS on Google Search - Sanitizing HTML in The Client? - YouTube

Visualization

Sometimes you just wanna make something that looks cool, these libraries let you make things that are visually complicated (3d objects, graphs, charts etc.)

• P5js; javascript version of processing

• Chartjs; Super simple to use chart generator

• D3js; Has a huge variety of charts, bit more complicated

• Threejs; Incredibly powerful 3D library

• WebGL; The web version of openGL (3D library)

• Plotly; Multi-language graph library

• Mermaid; A tool that has its own language, editor and format for creating charts that some people really like

Games

Games are fun, and you can make them run entirely in the browser. There are a few familiar faces from the last slides, but regular 3d libraries are a bit more complicated than dedicated game engines

• Unity; Like unity, but in the web!

• P5js; javascript version of processing

• Threejs; Incredibly powerful 3D library

• WebGL; The web version of openGL (3D library)

• Babylon; 3d game engine with node materials & editor (demo)

• PixiJS; 2D Game engine that is very fast

• Melon JS; 2D game engine with map editor compatibility