Throughout this course, we will be working almost exclusively in the following environments:
Visual Studio Code
“Visual Studio Code is an open-source (free) streamlined code editor with support for development operations like debugging, task running and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs”. Visual Studio Code also runs on Mac OS X, Linux and Windows operating systems, which will provide the class with a single unified environment to work in regardless of a student’s choice of laptop or home computer. Some of the noteworthy features of Visual Studio Code Include:
“In Visual Studio Code, you can open an integrated terminal, initially starting at the root of your workspace. This can be very convenient as you don’t have to switch windows or alter the state of an existing terminal to perform a quick command line task”.
To open the terminal:
- Use the keyboard shortcut Ctrl + `
- Use the View | Toggle Integrated Terminal menu command.
- IntelliSense: (suggestions)
- smart code navigation (Go to Definition, Find All References, Rename Symbol)
File & Folder Based
Since VS Code is file and folder based – you can get started immediately by simply opening a file or folder in VS Code.
“On top of this, VS Code can read and take advantage of a variety of project files defined by different frameworks and platforms. For example, if the folder you opened in VS Code contains one or more package.json (which we will be making extensive use of during the semester), project.json, tsconfig.json, or .NET Core Visual Studio solution and project files, VS Code will read these files and use them to provide additional functionality, such as rich IntelliSense in the editor”.
Modern Web Browser
A modern web browser such as Google Chrome or Mozilla Firefox will be used regularly throughout this course. Microsoft Edge will work as well, as it supports a similar set of development tools, however due to it’s lack of plugins / addons and cross-platform support it’s not as highly recommended. All screenshots and development examples used throughout this course have been taken in Google Chrome.
Browser Developer Toolbar
Before starting this course, students should have at least a basic understanding of the Developer Tools built into a modern web browser. Typically, pressing the F12 Key (Windows) will open the bar, however there are alternate ways of opening it. For Google chrome:
- Open the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.
- Right-click on any page element and select Inspect.
This will bring up the Chrome “Developer Toolbar”, as seen below :
We will be working with many of these panels throughout the semester. A quick list of their functionality (from left to right, starting at the top left corner) is as follows:
|Element Inspector: Select an element in the page to inspect it; this will cause the Developer Tools (Devtools) to switch to the “Elements” panel and highlight the rendered source code (HTML) responsible for displaying the item. This will also cause the “Styles” panel (on the right) to highlight all current CSS applied to the element|
|Device Toolbar Toggle: Toggles the “device toolbar” on and off. This allows the developer to select a device and manually enter the pixel dimensions of the screen and scale of the page. This is useful for ensuring that the page looks correct on a variety of devices|
|Network Panel: is used to get additional insights into requested and downloaded resources. Developers can view a log that tracks all resources loaded including their corresponding status code, type, time (latency), size of the resource and the initiator of the request|
|Performance Panel: enables a tool that allows developers to record and analyze all the activity in their applications as they run. It’s the best place to start investigating perceived performance issues. This is done by recording a timeline of every event that occurs after a page loads and analyzing the corresponding FPS, CPU, and network requests.|
|Memory Panel: provides more detailed debugging information than the timeline by enabling developers to record detailed CPU/Memory profiles such as a “Heap Snapshot”, “Allocation instrumentation on timeline" and “Allocation sampling".|
|Security Panel: gives an overview of a page from a security standpoint including: Certificate verification (indicating whether the site has proven its identity with a TLS certificate), Transport Layer Security (TLS) connection (Note: TLS is often referred to by the name of it’s predecessor, SSL) and Subresource security (indicating whether the site loads insecure HTTP subresources – ie: “mixed content”).|
|Error Icon: displays the number of errors present in the “Console Pane”. To review the errors, simply switch over to the Console pane and locate the items highlighted in red.|
|Customize Icon: controls where the Developer Toolbar should be placed relative to the browser, as well as a collection of all related settings and preferences for the tool set.|
|Close Icon: closes the Developer Toolbar.|
Additionally, we will cover a number of topics surrounding the following technologies (in no particular order):
In 2015, ECMAScript 6 was released and many important features were introduced, such as:
- Arrow Functions
- Class Definitions
- Block Scoped Variables
- Binary & Octal literals
- and many more…
Since then, development of ECMAScript has continued and new versions are released yearly. For a comprehensive list of which features are supported in specific browsers, environments and runtimes, see:
Node.js also has an expansive package ecosystem accessible via it’s Node Package Manager (NPM) utility. We will leverage this by experimenting with a number of popular, open-source modules including:
- Express.js (http://expressjs.com)
- EJS (https://ejs.co)
- Tailwind (https://tailwindcss.com)
- Multer (https://github.com/expressjs/multer)
- Sequelize (https://sequelize.org)
- Mongoose (https://mongoosejs.com)
We will be using Git: a command-line tool which serves as a version control system used for tracking changes to your source code and making it available for collaboration with other developers (by leveraging online tools such as Github or GitLab). Additionally, there are many online services that connect to your published code to 3rd party cloud platforms such as Vercel or Netlify which can build your code and host your web application. For this class, we will be using Cyclic - please see the Cyclic Guide for more information.
There is a ton of information online on how to get started using Git / GitHub, such as:
From the PostgreSQL site, postgresql.org:
“PostgreSQL (also known as “Postgres”) is a powerful, open source object-relational database system. It has more than 15 years of active development and a proven architecture that has earned it a strong reputation for reliability, data integrity, and correctness. It runs on all major operating systems, including Linux, UNIX (AIX, BSD, HP-UX, SGI IRIX, macOS, Solaris, Tru64), and Windows. It is fully ACID compliant, has full support for foreign keys, joins, views, triggers, and stored procedures (in multiple languages). It includes most SQL:2008 data types, including INTEGER, NUMERIC, BOOLEAN, CHAR, VARCHAR, DATE, INTERVAL, and TIMESTAMP. It also supports storage of binary large objects, including pictures, sounds, or video. It has native programming interfaces for C/C++, Java, .Net, Perl, Python, Ruby, Tcl, ODBC, among others, and exceptional documentation.
MongoDB is another open-source database that we will be exploring in this course. However, unlike MySQL MongoDB is classified as a “NoSQL” database and stores its data in JSON like format rather than in tables with fixed columns. The term NoSQL comes from “Not only SQL” and is intended to mean that it is a type of database system that can store data in non traditional tabular and relational format. It is because of this that NoSQL is quickly becoming a popular alternative to traditional Relational Databases (RDBMS).
We will be exploring how we can leverage NoSQL (MongoDB) to make data management simple and intuitive as well as how it compares to traditional RDBMS systems.