On the Protection tab, deselect Locked:

Select the cell(s) you would like to lock, right click and choose Format Cells:

On the Protection tab, make sure this is locked:

From the Review Tab, select Protect Sheet:

Here you can add a password:

Locked cells cannot be edited but unlocked cells can be updated:

Step 1. Create a Project Repository and Add Collaborators

From the Settings Menu, add your group members so they can access your Group Project Repo by clicking on Collaborators:

Add users by searching their GitHub name or email address associated with their account:

Step 2. Create Issues

You can create a few issues at this stage so that you can populate your Project:

Step 3. Create a Project

From your Profile menu, navigate to “Your projects” and create a New project by clicking on the green button:

Step 4. Add collaborators to your GitHub Project

By clicking on the ellipsis (…) in your Project home page, you can select the Settings Menu. From there select Manage access:

Step 5. Import Issues into your Project

By clicking on the plus sign, you can opt to import existing issues from your repository:

Import any/ all issues you would like to track in your Project:

Now you can easily track all your issues and update their status by dragging and dropping them on the kanban board:

Step 6. Create new Issues from your Project!

You can draft new Issues from your Project! If you start typing you are able to save a draft issue that you can later assign to your repo:

Code Spell Checker

Though it seems simple, this extension has caught more bugs than probably any other tool I use! Your code can’t compile if you typed calss instead of class — Code Spell Checker will catch those little typos by underlining them in VS Code.

Auto Rename Tag

If you need to rename an HTML element tag this extension allows you to edit both the opening and closing tags at the same time. It also works with JSX so this extension will come in handy with React as well!

Prettier — Code Formatter

Prettier is a code formatter that will parse through your code and leave it more readable. This extension helped me to write cleaner looking code and understand best practices.

Live Server

Live Server allows you to right click on an html file and open a locally served browser window. The best part is that the connection is live — every time you save your file, those changes are visible in the browser window without needing to refresh.

HTML CSS Support

This extension offers code completion and other support features for writing HTML/CSS in VS Code — very helpful!

JavaScript (ES6) Code Snippets

This extension is incredibly useful when learning JavaScript basics. It will provide code snippets that will improve your workflow.

vscode-icons

This extension improves the file icons that appear in your code editor and can be very helpful when searching for specific file types. It helps everything stand out.

Simple React Snippets

This extension will come in handy when learning React. I use this extension every day of my professional developer life! It provides commands and snippets to set up React components quickly.

GitLens

This is a powerful tool especially for collaboration — it will show you information about the the changes to code inside your editor. Super handy to track down commits.

Path Intellisense

Autocompletion suggestions for file paths. You will do a lot of linking and importing of files within your projects — this extension reduces errors in your path names.

Markdown All in One

A large percentage of your grade depends on having a quality README.md — this extension helps with mardown syntax highlighting, keyboard shortcuts, and auto completion.

Where To Add Extensions:

By clicking on the extensions icon (fifth one from the top) you can search extensions in the Market place.

What is Docker? Docker is a platform for building, running and shipping applications. A common issue developers run into is that their programs run perfectly in a local environment but doesn’t somewhere else. Missing dependencies, mismatched versions, and differing configuration environments can cause major bugs. This is where Docker really shines.

Docker enables you to package your application and run it on any other machine that runs Docker! If you have a new team member or are using a different machine, you can be up and running without taking hours to set up a local environment.

Also, when are done working on a project you can remove the application and all of its dependencies. This definitely helps remove the clutter that inevitably takes up space on your development machines.

Docker utilizes Containers to create isolated environments for running applications. Containers are lightweight, allow for the running of multiple applications, and utilize the operating system of the host machine. Unlike virtual machines, containers also start quickly and need far less hardware resources.

Installing Docker:

Docker can be downloaded by clicking here. There are options for Mac, Windows and Linux. Once downloaded and installed, double click the Docker.app to run the Docker Engine. The whale logo should appear on your status bar (see below, second from left). If it doesn’t, Docker is not running on your machine.

Check that Docker is working by opening a terminal window and running the following command:

docker version

You should see something similar to the output above.

From here, you will need to create a Dockerfile in an application. A Dockerfile is a plain text file that contains instructions needed to run your application. It can include: Operating System, runtime environment (like Node), application files, dependencies and environment variables.

For illustration, I am going to create a simple JavaScript application in VS Code:

To Docker-ize this simple application we will need to do four things:

1. Start with an OS
2. Install Node
3. Copy the app files
4. Run node app.js

We can easily write these instructions by adding a Dockerfile to the project:

With these simple instructions, we can now create an image by going to the terminal and typing:

docker build -t <application name>

Here is a look at the terminal response:

You can see a list of all current images by typing the command:

docker images

Now we can run this image on any computer running Docker by entering the command:

docker run example

Our application can now be uploaded to Docker Hub and pulled down to any machine running Docker. Of course this is a very simple example, but having these variables spelled out for larger projects saves valuable time and energy!

After a deep dive into Redux, I was feeling pretty overwhelmed. The boilerplate required to make an API call was daunting. Most docs and sources prompt you to answer the question “Is Redux needed for this project?” Considering the scale of my project, the answer was a resounding no— but I wanted to learn and implement it if I could. Luckily, I came across Redux Toolkit. You can implement Redux Toolkit in a couple of ways:

You can create a React application from scratch:

npx create-react-app my-app --template redux

Or add Redux Toolkit to an existing app:

npm install @reduxjs/toolkit

Redux Toolkit comes with time saving features like:

• configureStore(): wraps createStore to provide simplified configuration options and good defaults. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes redux-thunk by default, and enables use of the Redux DevTools Extension.
• createSlice(): accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.

In addition to these tools, Redux Toolkit features RTK Query which allows you to create a slice to handle fetch requests. To demonstrate this functionality, I will be creating an API slice that fetches a list of users from https://jsonplaceholder.typicode.com/users.

Step 1 — Add the Redux packages. CD into the root directory of your project (if it is an existing application) and type the following code into the terminal:

npm i @reduxjs/toolkit react-redux

This will bring in both React-Redux (needed for Step 4) and Redux Toolkit.

Step 2 —Create the API slice in a new file (I have named mine usersAPI.js) and import the tools needed from Redux Toolkit:

Next, write out the API slice using createApi(). CreateApi accepts an object that includes your baseQuery/ baseUrl. Most projects will likely only need one API slice. As you will see, we can specify many endpoints within this same slice. As long as you are only communicating with one server, this will be the only slice you need.

After the baseQuery is established, you can add your endpoint(s) and export your slice. Whatever you name your endpoint will be concatenated with the word use and Query to become the dispatch for our fetch. As you can see, my users endpoint became useUsersQuery (oof).

Step 3 — Create the store by adding a store.js file in your project and import the necessary dependencies:

Now we can define our store by calling configureStore as an exported constant. You can add multiple reducers here but so far, we only have the API slice and its reducer to add. Configure Store does a lot for us under the hood — it automatically connects the app to Redux DevTools and it comes with the necessary Thunk middleware that allows us to perform asynchronous functions like fetches. In lines 8 & 9 of the code block, we will specify that we will use the default middleware as well as the API middleware. If you have your own middleware (logger, toast etc) you can also add that here.

Step 4 — Now that the store is created, we need to wrap our application with a Provider Component so that any child component can have access. In your Index.js file, import Provider from ‘react-redux’ and store from our store.js file. The store is passed a prop to all children components.

Step 5 —We can now dispatch the useUsersQuery in the App.js file to fetch data from our ‘/users’ endpoint. First we will need to import the query at the top of the component:

Using destructuring, you can see all of the information that we will get back (along with our data) without having to manually write out catch statements:

Here is the completed return block to needed to fetch, deal with potential errors/ loading, and iterate through the data:

On the front-end the fetch was successful:

By using Redux DevTools, we can look under the hood to see what happened during our API call. Under the Action tab we see that the application connected with Redux DevTools, the API call was pending, and finally fulfilled:

In the State tab, we see the data payload along with status, start/fulfilled timestamps and other information:

RTK Query will also automatically unsubscribe, cache your data, reject unnecessary server calls, and make tons of julienne fries. Ok just kidding about the fries but the rest amazing. If you have been avoiding Redux, I encourage you to check out Redux Toolkit.

The TDD flow:

• Read, understand, and process the feature or bug request.
• Translate the requirement by writing a unit test.
• Write and implement the code that fulfills the requirement.
• Clean up your code by refactoring.
• Rinse, lather and repeat.

Types of Automated Tests:

Unit Tests — Testing the application without its external dependencies (files, databases, web services. Testing of this sort relies on using Mock APIs and resources to run your tests. This allows the Unit Tests to run very fast — as you are refining and refactoring code, you don’t want extra time as you make calls to an external server. You want most of your tests to be in this category because they are the fastest to run.

Integration Tests — Test the application along with its external resources. These tests are slower than Unit Tests but will give you more confidence that features are working together. Integration tests will touch more than one React component as it is testing the interconnectivity of your application features. These tests are slower than Unit tests but should still be run during major milestones like implementing new features and getting ready for production.

End-to-End Tests — Testing involves launching the application and driving it through its user interface. These tests give developers the most confidence but are also the slowest and most fragile. Developers should be selective about the functions of the application tested with End-to-End tests.

Setting up the Testing Environment

For this blog, we will be creating a few simple Unit Tests using Jest. Jest is an automated testing framework developed by FaceBook built on top of Jasmine.

First, install Jest in your project:

npm i jest @types/jest @babel/core @babel/preset-env babel-jest -D

What does all of that code do? First we are installing Jest along with intellisense so we can utilize some handy snippets & autocompletion. Babel allows us to compile our React code into backward compatible code that browsers can understand. By adding -D, we install all of these libraries as development dependencies. If you open your package.json file, these new dependencies will appear there and will not be shipped with the deployed with the application.

Second, create a new file in your root directory called babel.config.json and add:

{

"presets": ["@babel/preset-env"],

}

Next, create your spec file. Usually the test file is namespaced to reflect what we will be testing. For the sake of our example, I will be building a simple math.js module. Therefore, my test file will be named math.spec.js — you can name yours whatever you’d like!

In my math.js file, I have written a simple function, isEven, that returns a boolean:

export const isEven = number => number % 2 === 0;

Back in math.spec.js, I can write a simple test to see if my function is behaving like I expect it to:

//in math.spec.js

import { isEven } from "./math";

it("first test", ()=> {
   const result = isEven(2);
   expect(result).toEqual(true);
});

In the example above, Jest is providing us quite a few methods: it, expect and toEqual are all coming from Jest. toEqual is a matcher method in Jest. Here is a link to all the matcher methods offered when using expect. Below, I will add another test and do a better job with name spacing:

it("should return true if given an even number", () => {

  const result = isEven(2);

  expect(result).toEqual(true);

});

it("should return false if given an odd number", () => {

  const result = isEven(1);

  expect(result).toEqual(false);

});

Now our labels clearly reflect exactly what we are testing! Finally, we can use the describe() function from Jest to group related tests together:

describe("isEven", () => {

 it("should return true if given an even number", () => {

   const result = isEven(2);

   expect(result).toEqual(true);

 });

 it("should return false if given an odd number", () => {

   const result = isEven(1);

   expect(result).toEqual(false);

 });

});

So far we are passing all of our tests! What happens if we fail one of our tests? To illustrate this, I will change my isEven function to something I know will cause my test to fail:

export const isEven = number => true

Running my tests now show which test failed and the specific line in the testing code that caught the failure:

As you can see, automated testing gives you quick feedback about your code!

Creating tests along with my application enables me to really think about what I want my code to be able to do on a granular level. By abstracting the intention behind the code, I have a clearer idea of what I need my code to do for the application and user. I hope you write some tests of your own!

In this blog, I will be walking through the steps necessary to connect Firebase 9 with a React frontend.

New to Firebase? Firebase is a NoSQL database created by Google. It is completely free and offers several services: real-time databases, authentication, document publishing, hosting, and analytics. Every Google account can access the Firebase Console by going to:

https://console.firebase.google.com/

Step 1 — Create a new Project in your Firebase Console by clicking on the Add Project Button.

You will be prompted to give your project a name:

After you have chosen a project name and click continue, you will be be able to create your project. Depending on the scope of your project you can elect to turn Google Analytics on or off. Since I am creating this project for demonstration purposes, I have elected to turn them off.

Step 2 — Linking your project to your React application. Once your project has been created, navigate back to the console. To add Firebase to a web application, select the </> icon:

You will need to Register Your app by giving it a nickname — naming convention is completely up to you. You can also elect to set up Firebase Hosting at this stage. If you would like to deploy your app on Firebase, you can do this now or add it later. Deploying to Firebase is incredibly easy, so I chose the optional hosting now:

Back in your console, your project’s waffle menu will now show that you have 1 app currently attached to the project. Click on this icon:

A small menu will appear — click the cog to access your configuration specs. Click the cog and scroll down to find your SDK Set up and Configuration. Select the config radial button and copy to bring it into your React Application:

Step 3 — Install and setup Firebase in your React App

Back in React, create a config.js file to hold your firebaseConfig constant that you just copied. In your terminal, install Firebase in your project by typing:

npm install firebase

Firebase 9 has a more modular approach to its features. For our purposes, we will be importing initializeApp (to connect to Firebase) and getFirestore to access our database. I have collapsed my firebaseConfig const for security reasons. Here is what your config.js should look like:

Step 4 — Create your data in Firebase/Firestore

In your Project dashboard, click on Firestore Database and click on the Create Database button:

Select test-mode and click next:

Select a server close to your geographic location. YOU CANNOT CHANGE LATER! It will likely default to the closest one to you:

Click on +Start Collection to create your data. Your collections are parallel to a table from a SQL database. You can name your collection and then create your individual records. In this area you can also set up rules for your database as well as Indexes that handle compound queries.

Give your Collection a name and click Next:

Add fields (keys), types, and values to your collection and click Save. Firestore can generate ids for you (see below) or you can assign your own. Being NoSQL, Firebase is schemaless. However, that means you need to be consistent with naming conventions and types. Once you click save, it will also create the first document in your collection. To add more documents, click on +Add document

Below, you can see that the books collection now contains three documents that I have created. By clicking on a document, you can see the data in the right column. You can edit the collection, documents and individual data fields at any time by using the Firebase GUI. Now that my collection is populated with a few documents, we will return to React to write the code to query our new collection of book titles.

Step 5 — Fetching our Data in React.

In the component that will hold the state for my data, I import the variable that I used to initialize getFirestore in my config.js file along with collection and getDocs — both from ‘firebase/firestore’.

The fetch for a Firebase is similar to that of a standard API but with some differences. Instead of listing an HTTP endpoint, you will use the connection through your config.js file to link to your collection.

First: Declare a variable to hold a reference to your collection.

Second: Use that variable with getDocs to retrieve a snapshot of your collection’s data.

Third: Iterate through the data to set it in state.

I have used a variable (booksRef) to contain a reference to my books collection. Using the getDocs method from Firestore, I am able to access a snapshot object and iterate through it to set my data in state:

Snapshots were new to me before working with Firebase. A snapshot is an object that contains all the data and metadata from our collection. Here is a console log of the snapshot. You can see that the docs section contains an array of the three books I entered into my collection in step 4.

Now that my data is in state, I can pass it on to be rendered in by my components:

After launching my React App, I can see the data has been successfully fetched and rendered by the components!

After a brief introduction to SQL, I was perplexed as to why so many companies and data scientists still rely on it after more than 45 years of existence. SQL is far more powerful and exciting than I gave it credit for! Here are 5 fast and powerful queries that allow you to analyze and manipulate your data quickly.

The following examples were run with MySQL in MySQLWorkBench.

1. Arithmetic operators within SQL queries

You can easily manipulate numeric values while performing a query. In the example below, a discount is being calculated within the query based on a customer’s loyalty points. Using basic arithmetic operators, we can easily manipulate the data to reflect a ($ generous $) discount.

2. Running Totals

Finding a total is a common task in data management and SQL has a great tool built in. By using OVER, we are able to loop through our data and produce a running sum invoice_total.

3. Subtotals and Grand Totals with GROUP BY

GROUP BY is a great way to organize your data. By adding WITH ROLLUP, we can create subtotals based on our data. Below is a sample of employee data (fictional, of course!). There is a running sum of salaries based on office location that also displays job titles. The null values at the end of each group of office ids reflects subtotals and the final row reflects the grand total of salaries at all locations.

4. Ranking Data

Rank allows you to quickly assign a ranking based on a column value. In the example below, we are ranking our products based on price. The RANK() method allows us to iterate over our data and provide an integer rank.

5. Creating Functions in SQL

I was surprised to learn that you can actually create and save custom functions in SQL. The following example shows the creation of a simple function that concatenates first_name and last_name columns into full_name. First, the function set up:

Next, call the function on existing data:

All of these queries were fast and relatively easy to learn. Sure, its not new and shiny but it still gets the job done!

If you need to call two endpoints at the same time, utilizing Promise.all is a quick and efficient way to make a call and set state without relying on third party packages.

Step 1. Import useState and useEffect into your React Component:

import { useState, useEffect } from 'react';

Step 2. Inside your functional component, set up whatever state variables you will need to hold your data. You can keep your data sets separate or combine them based on your needs:

import { useState, useEffect } from 'react';

const App = () => {
  
  // Data for Users
  const [users, setUsers] = useState([]);

  // Data for Posts
  const [posts, setPosts] = useState([]);
  
  // Or combine them into one state variable
  const [combinedData, setCombinedData] = useState([]);

Step 3. Using useEffect and Promise.all, you can now hit multiple endpoints to fetch your data and resolve the corresponding promises. I have name-spaced the responses for clarity:

import { useState, useEffect } from 'react';

const App = () => {
  
  // Data for Users
  const [users, setUsers] = useState([]);

  // Data for Posts
  const [posts, setPosts] = useState([]);
  
  // Or combine them into one state variable
  const [combinedData, setCombinedData] = useState([]);

  useEffect(() => {
    Promise.all([
      fetch('https://jsonplaceholder.typicode.com/users'),
      fetch('https://jsonplaceholder.typicode.com/posts'),
    ])
      .then(([resUsers, resPosts]) => 
        Promise.all([resUsers.json(), resPosts.json()])
      )
      .then(([dataUsers, dataPosts]) => {
        setUsers(dataUsers);
        setPosts(dataPosts);
        setCombinedData(dataUsers.concat(dataPosts));
      });
  }, []);

Step 4. A quick console log reveals our double fetch happened! 💁‍♂️:

We can see the array of 10 Users, 100 Posts, and the Combined Array which includes them both.

Here is a final version of the App component:

import { useState, useEffect } from 'react';

const App = () => {
  
  // Data for Users
  const [users, setUsers] = useState([]);

  // Data for Posts
  const [posts, setPosts] = useState([]);
  
  // Or combine them into one state variable
  const [combinedData, setCombinedData] = useState([]);

  useEffect(() => {
    Promise.all([
      fetch('https://jsonplaceholder.typicode.com/users'),
      fetch('https://jsonplaceholder.typicode.com/posts'),
    ])
      .then(([resUsers, resPosts]) => 
        Promise.all([resUsers.json(), resPosts.json()])
      )
      .then(([dataUsers, dataPosts]) => {
        setUsers(dataUsers);
        setPosts(dataPosts);
        setCombinedData(dataUsers.concat(dataPosts));
      });
  }, []);

  console.log(users, posts, combinedData);

Like most websites, it already has a grid-like feel. The first step is visualizing where you naturally see columns and rows occurring in the design. Some sections may span multiple areas — that is ok!

We can see that this landing page can be easily broken up into a simple grid with 3 Columns and 3 Rows. Before turning this mockup into code, I like to identify the main areas of the page. This will be directly reflected in our CSS code later.

Now that the grid elements are identified, I will set up the skeleton code in HTML to reflect the elements needed:

Outside the boilerplate, this is all the HTML code needed to get started. Now on to CSS to code our grid attributes.

In the HTML, I have given the container element the id tag of #container. I will use this identifier to add our CSS attributes. The display is grid… because… that is what this blog is all about! The grid-template-columns setting is repeat(3, 1fr) indicating that we will have 3 columns, each taking up an equal fraction of the grid (shorthand for 33.33% 33.33% 33.33%). Grid-auto-rows will allow your rows to auto populate as needed — I have included a min of 100px so they will be easy to visualize. Grid-gap will put padding between your grid elements but not on the outside perimeter. Next we will define our grid-template-area:

This is where the magic happens. Remember our graphic above? We can literally translate that into our code by typing out what that looks like. You don’t have to tab like I have, but it helps me stay organized. The variables you choose are completely up to you. I chose a naming convention that reflects my HTML elements. After those areas are mapped, we can assign them to our HTML elements in CSS by referencing tags, classes or ids.

Add some background color and our grid already looks like this:

It is very close to our original design, but we can make some adjustments to our grid template area to reflect that “main” and “logo” are actually much larger sections according to our landing page.

By adding one more row for “main” and “logo” in our grid-template-area, they now span an additional row. I also set the height to 100vh (viewport height) so that our grid will fill up the whole page. It looks very similar to our landing page.

Now that these areas are defined, you can use them to easily populate and format your remaining HTML elements. Happy gridding!