In this article and accompanying video, I'll show you two ways to create a lightbox effect in a spreadsheet. The first will trigger the image to be displayed in a large area in the sheet. The second will be an actual HTML popup on top of the sheet.

What is an Image Lightbox?

An image lightbox is what we call it when we hover over or click on an image and it pops up into a bigger version on-screen.

It’s something we’re used to seeing on websites, and it gives things a nice, professional touch when done well.

What about in a spreadsheet, though?

Well, we’ve got two versions of a solution.

1. Using built-in functions to display a larger version in a larger cell.

2. Using Apps Script to create a popup box on top of our spreadsheet.

As a bonus to the first solution, we’ll also include an optional Apps Script to make things a little smoother…more on that below 😉.

Here’s the full walkthrough on YouTube😀

Here’s our demo sheet if you want to follow along.

Image Popup With Built-In Functions

First, we need images in cells. From the top menu, Insert - Image - Insert image in cell will do the trick.

Next, we need to merge some cells together so that there’s a larger container that will hold our larger picture after the next step.

You could use one cell and change its the width and height, but in my example sheet, the “lightbox” area is sharing rows with the rest of the data, so I didn’t want to do that.

In the column next to my image thumbnails, I’ve put checkboxes by selecting Data - Data validation - Criteria: Checkboxes from the top menu.

This will let us select which image to display in our lightbox area.

I’ve named the range A2:A11 as pics and the range B2:B11 as checkboxes to allow for easier readability in the function we’ll write next…

named ranges in google sheets

Now all that remains is one XLOOKUP() function to put inside our lightbox.

=XLOOKUP(TRUE,checkboxes,pics,"") is the function that searches for a check and then displays the corresponding image. By putting this in a big cell or range of merged cells, we can display whichever small image we select in the bigger area.

xlookup function in google sheets

Remember, all a checkbox is doing is storing either a TRUE (checked) or a FALSE (unchecked) value.

checkboxes and image thumbnails in google sheets

⚠️WARNING⚠️

This does have one issue, though. Do you know what it is?

XLOOKUP() is going to return whichever checkboxes it comes to first with a TRUE value. So if you have multiple images checked, it’s only going to display the first one it gets to, not the most recently clicked one.

To get around this, let’s write some code.

Apps Script Improvement

Open up Apps Script by selecting Extensions - Apps Script from the top menu.

opening apps script in google sheets

Delete the built-in function in the code editor that opens. We'll start from scratch with an onEdit function:

function onEdit(e) {

We need to grab the range that we are currently editing.

var range = e.range

Then, get the checkboxes range.

var checkboxes = SpreadsheetApp.getActive().getRangeByName("checkboxes")

Then, we need to check whether what we just edited is in that checkbox range.

if (range.getColumn() == 2 && range.getRow() >= 2 && range.getRow() <= 10) {

If it was a checkbox, then we want to uncheck all the checkboxes and re-check the one we just checked.

// Uncheck all other checkboxes in the range
checkboxes.uncheck();
// Check the edited cell
range.check();

Now, there is a slight delay when you run the code. After clicking a checkbox, all of them are cleared right before the one you checked gets checked again.

Here’s what the full code looks like:

function onEdit(e) {
  var range = e.range;
  var checkboxes = SpreadsheetApp.getActive().getRangeByName("checkboxes")

  // Check if the edited cell is a checkbox in the desired range
  if (range.getColumn() == 2 && range.getRow() >= 2 && range.getRow() <= 10) {
    // Uncheck all other checkboxes in the range
    checkboxes.uncheck();
    // Check the edited cell
    range.check();
  }
}

A Real Pop-Up Box with HTML

modal dialog box in google sheets

Okay, that’s all fine and dandy. What about the real thing, though?

This takes all Apps Script, but it’s doable thanks to the built-in method showModalDialog.

This is basically a pop-up window that can hold HTML. And since the internet is built with HTML, all that we need to do is use a little bit to plug in an image.

📌 This method does require an image to live on the internet somewhere. So, we cannot reference the image that we've embedded in our sheet and use it in the HTML we're going to write.

Weird, I know...

Let’s find an image URL we can use. I’ve grabbed an eagle off of unsplash.

We’ll hold this in a variable.

var imageURL = "https://images.unsplash.com/photo-1715002383611-63488b956401?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

Then we need to build our HTML. In our case all we want is one element, so we won’t worry yourself with constructing a full, semantically correct page (although we certainly could 😉)

Another variable will hold this img element:

var html = '<img src="' + imageURL + '" style="max-width: 100%; max-height: 100%;">';

We have access to Class Ui in Apps Script where we can “…add features like menus, dialogs, and sidebars.”

  var ui = SpreadsheetApp.getUi();

And finally, by calling the showModalDialog() method, we can generate HTML from our html variable using the Class HtmlService.

ui.showModalDialog(HtmlService.createHtmlOutput(html).setWidth(700).setHeight(1000), 'Eagle 🦅');

Make the Image a Button

A final touch is to go add a thumbnail version of our eagle image into our spreadsheet so that it is inserted on top of our cells (this next bit won’t work if it’s embedded in a cell itself).

Once it’s in our sheet, we can click the three black dots in the top right corner and assign a script directly to the image.

assigning a script to image in google sheets

We named our script displayImagePopup, so this is what we enter. Make sure to leave off the parentheses when typing it into the image's script form.

assigning script

Now, anytime we click the small image of the eagle, a pop up box opens with the full image.

Here’s what the full code looks like:

function displayImagePopup() {
  // Get the active sheet
  var sheet = SpreadsheetApp.getActiveSheet();
  var imageURL = "https://images.unsplash.com/photo-1715002383611-63488b956401?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  // Create an HTML string for the popup
  var html = '<img src="' + imageURL + '" style="max-width: 100%; max-height: 100%;">';

  // Show the dialog
  var ui = SpreadsheetApp.getUi();
  ui.showModalDialog(HtmlService.createHtmlOutput(html).setWidth(700).setHeight(1000), 'Eagle 🦅');
}

Thanks!

Thanks for reading; let me know what you think.

Connect on Linkedin
Videos on YouTube

I’ve also wrapped up training for a marathon I’ll be racing on March 3rd… 🤞🤞

Now to the sheets…

Do you ever feel lost in Excel? Like you should know a lot but struggle to grasp the basics?

Fear not. Today's tips are all about some fundamentals that will be useful and speed up your spreadsheet work.

Here's the brief video walkthrough if you're a visual learner:

6 Ways to Number Things

1. Manual - You’re familiar with this, though you hang your head in shame at how often you use it. This is when you manually type everything in. Don’t worry, we all start here.

2. Drag - Level 1. At the bottom right corner of an active cell or range you can click and drag down. Excel is pretty smart. It will expand the sequence of numbers (or dates, or days) and fill in the missing values.

3. Double Click - Now we’re getting up to speed. By double clicking that bottom right corner, Excel will fill down just like when you dragged down. Where it stops will depend on other values in your workbook. If you don’t have other values, or a table you’re working in, this may not work.

   

4. Formula - The power of spreadsheets lies behind the scenes in all the gritty, delicious minutia. It’s here where the wild things live. It’s here where we can write custom formulas to do darn near anything. And I do mean anything - someone built a 16-bit CPU inside an Excel workbook recently.
   For our purposes, we can simply reference the first cell and add something to it. Then if we drag that formula down just like in option 3, we can quickly expand the sequence of dates.

   

5. Sequence - This is an incredibly handy built-in function. It’s like a custom formula, only it’s already baked in to Excel. It allows you to generate sequences of values over a specified number of rows and/or columns. You let Excel know how many of each to use, what value to start with and then what value to increment by. *Bonus: to count down, you can use a negative value in the final “step” variable.

   

6. Row - Another nifty function, and lesser known. Row isn’t explicitly for numbering or sequencing things, but we can use it for this. Row will return whatever the numerical value of the current row is. We can use this as is, but if we worry about rows being deleted, we can also explicitly reference a cell using ROW(A1) or something similar. From here we can sequence subsequent rows using one of the above methods if need be.

What's your favorite method?

Thank you so much!

It means a lot that you’ve read this, and I hope it’s informed and/or entertained you for a few moments today!

Would love to say hi. Here are the best places to find me:

• 📺️ Videos on YouTube

• 💾 Products on Gumroad

• ✉️ Connections on LinkedIn

It's been a while since I've posted one of my articles on Hashnode. Never fear - I'll be repurposing some of my content from the past year or so to keep you in the loop!

Originally published for freeCodeCamp

In this article I will show you how to allow for multiple items to be selected using the drop-down data validation feature in Google Sheets.

Here's the Google Sheet we'll use for the example. You can make a copy of this to edit yourself by clicking File -> Make a copy.

At the bottom of the article is a video walkthrough I recorded for this solution. 👇

The Problem 🤔

My five-year-old son posed a question that triggered a deep dive into Google Apps Script. He wanted to have multiple items selected from a data validation drop-down list.

Leave it to a five-year-old to send me to Google, YouTube, and beyond in search of a spreadsheet solution! 😅

We had built a spreadsheet that showed information about the Teenage Mutant Ninja Turtles. Names, birthdays, ages, favorite colors...

I was highlighting the amazing power of spreadsheets to organize, calculate, and visualize information. Typical five-year-old parenting stuff.

For the favorite color column, we used a drop-down list to select from a list of colors.

This is a fairly simple feature to use in Google Sheets. To create a drop-down list, select Data -> Data validation from the menu:

Update: the same feature is now also available when you right-click a cell:

In either case, a data validation menu will appear where you may set your conditions.

We had our list of colors in the cells H2:H9 so we selected Dropdown (from a range) in the Criteria section and then entered that range.

We wanted this to be copied to other cells without affecting that range, so we locked it in place, using the $ signs: =$H$2:$H$9.

This allows for the validation to be copied to other cells while retaining those cell references for the list of color values.

Google Sheets Allows One Selection Only 🚩

The problem is, Google Sheets only allows for a single selection. We wanted for Leonardo to have multiple favorite colors!

Fortunately, Google Apps Script allows custom code to be written within Google Sheets, and we used this to solve our problem.

I came across the code for this from a YouTube video by Alexander Ivanov and set out to update the information with a more clearly laid out video and explanation of my own.

How to Use Apps Script🧑‍💻

Open the Apps Script screen by selecting Extensions -> Apps Script from the menu bar.

You'll be able to create files using the plus + icon. For this project we need a Code.gs file and a Page.html file.

The Code.gs File

Start in the Code.gs file.

The first thing we want is a drop-down from the Google Sheets toolbar to run our code.

To do this, we use the following code to add the UI option Show dialog to the menu bar. Upon clicking, it will run the showDialog function. By wrapping these methods in the built-in onOpen function, this menu in the toolbar gets added as soon as we open the spreadsheet.

function onOpen(e) {                                
    SpreadsheetApp.getUi()                                
    .createMenu('Multiple Select Data Validation')
    .addItem('Show dialog', 'showDialog')                                
    .addToUi();                                
}

There is often a short delay of a few seconds before custom menus are visible in the menu. Give it a few seconds and it will appear.

The showDialog function will create an HTML variable from a template that we will create in a moment. It then uses the built-in method .showSidebar to create a sidebar with that html.

function showDialog() {                                
    var html = HtmlService.createTemplateFromFile('Page').evaluate();
    SpreadsheetApp.getUi().showSidebar(html);                                
}

Then we have another function, valid, which will check the current cell for any data validation criteria and return those values in a 2-dimensional array.

var valid = function(){                                
    try{                                
        return SpreadsheetApp.getActiveRange().getDataValidation().getCriteriaValues()[0].getValues();                                
    }catch(e){                                
        return null                                
    }                                
}

And our final function, fillCell, will create an array to hold the resultant list of values we want the cell to contain. It then pushes these strings to the array and separates them by commas.

Lastly, it uses the built-in method, setValue to fill the current cell with the comma separated values (our favorite colors).

(fillCell and valid are called in the Page.html code we are about to go over.)

function fillCell(e){                                
    var s = [];                                
    for(var i in e){                                
        if(i.substr(0, 2) == 'ch') s.push(e[i]);                                
}                                
    if(s.length) SpreadsheetApp.getActiveRange().setValue(s.join(', '));
}

Here is the full code for the Code.gs file:

function onOpen(e) {                                
    SpreadsheetApp.getUi()                                
    .createMenu('Multiple Select Data Validation')
    .addItem('Show dialog', 'showDialog')                                
    .addToUi();                                
}                                
function showDialog() {                                
    var html = HtmlService.createTemplateFromFile('Page').evaluate();
    SpreadsheetApp.getUi().showSidebar(html);                                
}                                
var valid = function(){                                
    try{                                
        return SpreadsheetApp.getActiveRange().getDataValidation().getCriteriaValues()[0].getValues();                                
    }catch(e){                                
        return null                                
    }                                
}                                
function fillCell(e){                                
    var s = [];                                
    for(var i in e){                                
        if(i.substr(0, 2) == 'ch') s.push(e[i]);                                
}                                
    if(s.length) SpreadsheetApp.getActiveRange().setValue(s.join(', '));
}

The Page.html File

Now create and open a file called Page.html.

This will control a pop-up sidebar where we will handle our multiple selections, and will contain:

1. a form with checkboxes next to each option

2. a button to fill in the current cell

3. a button to get validation from the current cell

We will use templated HTML for our example. First, create a variable, data, by calling the valid() function we created above. We use <? CODE_GOES_HERE ?> syntax to write code within the html template.

<? var data = valid(); ?>

Then we create a form to house all of the data pulled from the valid() function:

<form id="form" name="form">
</form>

And we'll run some code to build our list of checkboxes within this form. First, we check if the data in the cell is of type [object Array].

<? if(Object.prototype.toString.call(data) === '[object Array]') { ?>

valid() returns a two-dimensional array because it's using the built-in method getValues(). So, you can picture this being returned as an array of arrays with each individual one being one of the favorite colors:

//for illustration only; this is the type of 2D array that valid() will return

favoriteColors = [
    ["purple"],
    ["red"],
    ["white"],
    ["black"]
]

This will help as we look at the next bit of code which can appear overwhelming.

We need to access each color – the strings. We do this by nesting for loops. The first loop iterates through each position in the favorite colors array.

<? for (var i = 0; i < data.length; i++) { ?>

The second loop iterates through each element in the interior arrays. In our case, this will always be one element since each of these arrays are of length 1.

<? for (var j = 0; j < data[i].length; j++) { ?>

Remember, ["purple"] is an array of length 1. The j loop does not count the letters in the string within the array – we are just counting the length of the array.

So, we're looping through each item in the 2D array and creating a checkbox input for each one:

<input type="checkbox" id="ch<?= '' + i + j ?>" name="ch<?= '' + i + j ?>" value="<?= data[i][j] ?>"><?= data[i][j] ?><br>

This adds an id and name that start with "ch" and then adds the element's array position. It also pulls the value (the color) itself as a value in addition to the displayed text.

These screenshots may help connect the mental dots:

If our initial if statement fails, we'll display a <p> indicating that perhaps there are no data validation rules in that cell while linking to a support article showing how to create an in-cell drop down list.

else { ?>                                
    <p>Maybe current cell doesn't have <a href="https://support.google.com/drive/answer/139705?hl=en">Data validation...</a></p>                                
<? } ?>

How to Code the Buttons

Then we need our two buttons.

The first button pulls the data validation from the cell. It runs the showDialog() function we created in Code.gs and builds the form of checkbox entries if there exist data validation values.

// get validation from the current cell
<input type="button" value="get validation from current" onclick="google.script.run.showDialog()" />

The second button fills the selected values into the current cell. This is what we were after all along! This runs the fillCell function in Code.gs.

// fills values into current cell
<input type="button" value="fill current" onclick="google.script.run.fillCell(this.parentNode)" />

Here is the full code for Page.html:

<div>                                
<? var data = valid(); ?>                                
<form id="form" name="form">                                
<? if(Object.prototype.toString.call(data) === '[object Array]') { ?>                                
<? for (var i = 0; i < data.length; i++) { ?>                                
    <? for (var j = 0; j < data[i].length; j++) { ?>                                
        <input type="checkbox" id="ch<?= '' + i + j ?>" name="ch<?= '' + i + j ?>" value="<?= data[i][j] ?>"><?= data[i][j] ?><br>                                
    <? } ?>                                
<? } ?>                                
<? } else { ?>                                
        <p>Maybe current cell doesn't have <a href="https://support.google.com/drive/answer/139705?hl=en">Data validation...</a></p>                                
<? } ?>                                
    <input type="button" value="fill current" onclick="google.script.run.fillCell(this.parentNode)" />                                
    <input type="button" value="get validation from current" onclick="google.script.run.showDialog()" />                                
</form>                                
</div>

Summary

Yes, this is quite a cumbersome solution to something relatively simple. Maybe Google will add this to the native functionality at some point. They have recently updated Data Validation to include more modern and easy to use functionality, so it's not out of the question.

Until then, this has been a great solution for me, and I'm grateful to Alexander for his initial code.

I hope this article has helped you understand the code a bit better and that it empowers you to create your own custom Google Sheets solutions!

As promised, here's my walkthrough video:

Video Walkthrough 📽️

Thanks!

Thanks for reading! If you found this helpful, I'd love it if you followed me and said hey 👋 over on LinkedIn and YouTube where you can find more content like this.

Have a great one!

Originally published for freeCodeCamp

Without clean data, your spreadsheet is knocking on death's door. In this tutorial, I will show you two fast ways to clean up the data in your Excel or Google Sheets spreadsheet.

When dealing with data sets, especially large ones and/or those that you didn't create, it is likely that you will have to clean the data in large or small ways to get it fully functional.

Both of the built-in functions we'll discuss – =TRIM() and =CLEAN() – are available in Microsoft Excel as well as Google Sheets. And both of them have the potential to save you a lot of head-scratching.

Let's examine:

1. What do we mean by clean data?

2. Why isn't it already clean?

3. How do we clean it fast and thoroughly?

pssst: I have a video walkthrough at the bottom 👇 of the article too 😉

What is Clean Data?

In Excel and Google Sheets, the data that we work with is located in cells. In a perfect world, these cells contain properly formatted data like numbers, amounts, names, and other pieces of information.

However, we often encounter things in the cells which don't belong and which will prevent us from using that data in the way we need.

Things like non-printable characters, extra white spaces and letters in cells that should contain numbers are a few examples of unclean data which will negatively affect our work.

What are non-printable characters, you ask? They are the first 32 control characters in the ASCII table.

Check out the table below of the ASCII characters. The first 32 are non-printable control codes. These can cause issues if they somehow make it into your data set.

You can generate this table by using the character function for all the numbers from 0 to 255: =CHAR(<number>).

The other common offenders are spaces that shouldn't be there – leading or trailing spaces in a cell. Or simply spaces in the middle that shouldn't be there.

Compound these finicky cells throughout a spreadsheet that contains thousands or millions of cells, and we've got quite a mess on our hands.

Why Isn't the Data Clean?

Because we live in a fallen world.

🤣 Well, it's not that dramatic. But there can be many reasons the data isn't already clean. Many times human error is the culprit.

Whoever or wherever you're getting your data from simply made some mistakes with it before you got your hands on it.

Or maybe you messed it up when you started to manipulate the data.

As we'll see in the example below, the data could be perfectly fine wherever you're getting it from on the internet. But then when you import it into your spreadsheet, the conversion from HTML to Spreadsheet brings in a bunch of non-printable characters and spaces.

And, of course, because we're dealing with computers and people and data, we may never figure out why the data we've received isn't clean. It simply isn't. And despite our confusion, we have to clean it up to use it and extract meaning from it.

How to Clean Data in Excel and Google Sheets

Let's first get some data. In both Excel and Google Sheets, we can import data from the web. I want to bring in a table of Recipes and Ingredients from a video game website that looks like this online.

Here's Link...I mean, here's the link. ⚔️

To address the obvious question first: yes, I could just copy and paste the table. And, yes, it will in this case paste the table straight into Excel.

But it'll also bring in the pictures which I don't need, the links which I don't want, some formatting that I'll have to reset, and potentially some of the non-printable characters and/or spaces that we'll discuss below.

Above is what it will look like after copying and pasting. But we are interested in preserving data and cleaning it, so we'll import it another way for the sake of the rest of our discussion.

If you're using Excel, it has some pretty robust cleaning features out of the box. When importing data from IGN, we enter the address where it lives, and it will pull down any data that it detects as available for import.

Let's get the table of Poultry and Meat Entrée receipts from Zelda: Breath of the Wild.

The Navigator window shows us a handy list of data tables detected on the page as well as a preview pane on the right that can be toggled between table and website views.

Excel Power Query

Once we've selected our data and loaded it, we'll have imported a table into our spreadsheet just fine. Excel's Power Query features allow us to then go into this particular table and extract the values in the Ingredients column into a list of items delimited by a selector of our choice.

In other words, Excel is smart enough to extract the individual list items in the Ingredients column and put them in a cell one by one and separated by commas (or whatever we select to separate them).

The following three screenshots show this process:

The end result is a comma separated list of values that is seemingly pretty clean. We can then split it up by using the =SPLIT() function into separate cells if we choose, or simply use it as is.

This is an ideal situation. But what if we encounter those spaces and non-printable characters?

Clean and Trim Functions

Here's a screenshot of the same table when imported into Google Sheets with =IMPORTHTML(). It pulls the data correctly, but you can see the extra spaces that were also brought into the sheet.

By using =CLEAN() on the ingredients cells, we can get rid of some non-printable carriage returns causing the line breaks.

By using =TRIM() on the cells, we can get rid of all the leading spaces.

And by nesting the two with =CLEAN(TRIM()), we can do both. The result is a list of values separated by dashes. Similarly to our resultant table in Excel where we were left with a comma-separated list, we can then go and =SPLIT() these values further if need be.

These functions work the same in Excel, but for illustrative purposes we used Google Sheets since it wasn't able to import the data as neatly there.

Sample Spreadsheet & Video Walkthrough

Here is a link to the sample Google Sheet that I made for this tutorial.

The first page is a table of the non-printable characters.

And the second page is the Zelda example we talked about. Feel free to make a copy of this spreadsheet if you'd like to mess around with it further (File -> Make a copy).

We'll be building a really cool project with some of this Zelda data soon...follow me on YouTube to keep an eye out for that.

Thanks

Thanks for reading, and I hope this has been useful for you. Come say hey 👋 on LinkedIn and YouTube, and I'll talk to you in the next article!

Originally published for freeCodeCamp

In this article I will show you how to format cells in Microsoft Excel. We'll be looking particularly at the Accounting format for cells with numbers.

At the end of the article I'll give you two bonuses: a short video walkthrough of the methods we go over, as well as a breakdown of the differences between the Accounting format and the Currency format.

We'll go over these three primary ways to format cells in Excel, and how to use each one to add the Accounting format to cells.

1. Point and click on Home Tab in Ribbon

2. Ctrl + 1 opens format cells window

3. Keyboard Combos

Easy Mode: Point and Click

As with most things in Excel, you can indeed simply select the cell(s) you'd like to apply the Accounting format to and click the appropriate selection.

Select the Home tab from the toolbar at the top. The formatting options are found in the Number section on the Ribbon.

The Accounting format actually has its own shortcut button marked by the dollar sign.

You may also select the drop-down menu to see the list of options:

How to Use the Format Cell Menu

The selections above included the most common number formats, but you can also open the full Format Cells window by clicking the arrow in the bottom right corner of the Number section on the Ribbon.

As with all good things in computer life, there is also a shortcut to open the Format cell menu.

Press CTRL + 1 to open the full menu.

From here you can again select the Accounting format and also adjust additional options like what type of money symbol and how many decimal places to use.

How to Use the Keyboard Combo

Excel includes keyboard combos for every imaginable action. In many cases this can save time spent searching for and clicking the buttons on the Ribbon.

Keyboard combos start by pressing the ALT key. As soon as you press it, you'll see a ton of letters pop up on the toolbar and Ribbon.

The Keyboard Combo for Accounting Format is ALT, H,AN:

And after you press those buttons (one after the other), you'll have selected the drop-down for Accounting format. The most commonly used currency symbols are displayed. ENTER will select the English dollar sign, or you can arrow down to another selection.

You can see from the screenshot above that you can also press the combo ALT,H,FM to open the full Format Cells window.

The keyboard combos offer the most nimble way to access operations and menus in Excel. Learning the ones you'll use most often can greatly improve your productivity.

As promised, here's an overview video walking through the topics I've discussed in this article:

Video Walkthrough

Accounting vs Currency Format

So, why use Accounting format? Isn't it just formatting the numbers with dollar signs?

That's a half truth. Yes, it adds a dollar sign, but so does the Currency format. If we open up the Format Cells window again by pressing CTRL + 1, we'll see that the main difference is one of alignment.

The Currency format is used for "general monetary values" and puts the dollar sign directly in front of the left-most number. The Accounting format, on the other hand, lines up both the dollar sign as well as the decimal in the column of numbers.

In terms of formatting, Currency will also give you options for how to display negative numbers. But in the Accounting format, the negative numbers will always be displayed within parenthesis.

Thanks for reading!

I hope this has been helpful for you.

Come find me on YouTube where I'm growing my coding and spreadsheet tutorial channel. And come follow and say hey over on LinkedIn. 👋

Have a great one!

Originally published for freeCodeCamp

In this article I will show you how to clear formatting from a cell in Excel. If you want the quick and dirty version, it's first up and will require you to simply click a couple times.

If you want to become a spreadsheet speedrunner, read this whole, brief article. I'll show you a couple keyboard combos and open the door for you to the WIDE world of Excel shortcuts.

How to Clear Formatting in Excel with Just a Click

This is easy mode. Highlight the cells you'd like to clear formatting on and click Clear -> Clear Formats from the Home menu in the Excel Ribbon:

If you don't see the ribbon at all, it will appear when you click any of the menu tabs (Home, for example). You can then click the arrow over in the bottom right corner. This will allow you to select which Show Ribbon option you'd prefer.

If you're using the web app version of Excel, this arrow will simply toggle the full Ribbon display on and off.

If you found this helpful, follow me over on LinkedIn and YouTube. But I hope you'll stick around a couple more minutes, because the real fun stuff is below! 👇

How to Use Excel Keyboard Shortcuts to Clear Formatting

Excel is a powerhouse.

You know this. Mostly, though, it simply rears its head and tramples us with its density. Those who have mastered it have done so only through mental grit and by using a peculiarly large set of obscure keyboard combinations in lieu of a mouse.

You too could be one of these keyboard shortcutting pioneers.

Think of the glory.

Most modern software has at least a few keyboard shortcuts to make life easier for their users. Who among us has not readily used CTRL + C and CTRL + V for the better part of our lives?

In Excel, though, there lies an ocean of possibility.

On the surface live the usual suspects of copying, pasting and undoing. Things we are used to seeing everywhere.

But as we go underneath the water a bit, we find that there's a universe of keyboard shortcuts. In fact, virtually every command is accessible through a combination of keystrokes in Excel.

Just Press ALT

Go ahead. Fire up Excel. Or go to excel.new in your browser.

Press ALT:

You should see letters appear next to all the menu tabs. Pressing the letter will open that menu tab.

Press H:

Neat, right? Pressing ALT opens up a gigantic array of keyboard combinations that avoid using the mouse altogether.

And for productivity's sake, this can be a huge time saver. How many seconds do you think you've spent hunting for a menu, clicking into it and then hunting for the next menu option? It doesn't take long, but a few keystrokes takes three, four, five times less time.

(And it's a lot more fun!!) 😆

You've still got the Home tab selected with the new list of letters, right?

Press E:

Press F:

This will clear the format of any cells you'd selected just like the point and click version. But with the swift ALT + H + E + F keyboard combination, it takes less than a second.

It's important to remember that unlike CTRL + C for copying, the ALT shortcuts are keyboard combos. So, you press the keys consecutively rather than all at once.

Can You Use These Shortcuts in Google Sheets?

If you're a Google Sheets purist, you may be wondering if this all works the same there.

And yes, it does.

First of all, there is a simple keyboard shortcut for the Clear Formatting in Google Sheets. Pressing CTRL + \ will clear the formatting.

If you want to enable the ALT keyboard combos, press CTRL + / to open the Keyboard Shortcuts menu in Google Sheets.

At the bottom, toggle on the Enable compatible spreadsheet shortcuts feature. Our clear formatting is available and it tells us the three keyboard shortcut and combo options to access it (just as they appear in Excel).

There is one difference between using the ALT combos in Google Sheets vs Excel. In order for Google Sheets to know that you're trying to use ALT combos, you have to press the first two keys at once.

Pressing ALT on its own does not bring up the letter options like Excel, and Google Sheets will not start listening for further keystrokes.

However, once you press ALT + H together, you'll see it registering the combo in the bottom left of the screen. After pressing those two together, you proceed to press each of the next keys consecutively like in Excel:

Conclusion

I hope this has been helpful for you! Keyboard shortcuts and combos have leveled up my productivity over the years, and I encourage you to continue expanding your own repertoire.

If you enjoyed this article, follow me on LinkedIn and YouTube for more content and videos like it.

Have a great one! 👋

I found it immensely helpful to create a spreadsheet outlining some of my goals this past year. I'll reference it throughout this article, and here's the link if you'd like to check out the View Only version.

This year has been both a joyful exercise in learning and content creation as well as an endurance test.

I began the year reenergized for my continued pathway into computer programming and content creation. I'd been consistently learning to code for a couple of years while working full-time, but I was not getting much clarity in terms of what direction I was headed in.

I've got some videos 📺 of some projects I've worked on this year toward the end of the article. Make sure you read all the way down! 👇

⚒Good Job

My job was (and is) great.

I was not unemployed or even looking hard for new employment. In many ways, this made things trickier than they would have otherwise been. Unlike others who may need the fastest route to employment in the field, most of my endeavors for the past several years have been for intrinsic gain.

Sure, I'd like to find some alternate revenue sources, though. And at the onset of the year, this was one of my expressed purposes.

✅Goals at the Start

I committed in January to do a few things pertaining to my continued education:

1. Continue learning to code by building real things.

2. Complete Quincy Larson's (freeCodeCamp) Become a Developer in 2022 challenge

3. Participate in the 100 Days of Code challenge

Within these general guidelines, were specific goals:

1. Complete the Relational Database Certification on freeCodeCamp

2. Configure my homepage's subdomain to my Hashnode blog and have written 3 blogs by the end of the 100 Days of Code

3. Become an author at freeCodeCamp

4. Make actual, sellable products on Gumroad

5. Podcast about my journey

6. Make videos along the course of my journey

This is a lot, but I had experience with many of the more daunting aspects already.

I am a seasoned writer; I enjoy the craft and have written many things for fun - including a novel - in the past.

I have been podcasting on and off since 2006.

I've made an assortment of videos over the past decade for fun.

And, of course, I have been learning to code already for a few years.

🧪Combine Goals With Progress

Just getting started is one of the biggest hurdles. Many times, I find myself not knowing how to start or what to do next.

One of my core weaknesses has been following rabbit trails. If you're at all familiar with the choose-your-own-adventure style of learning to code online, you've probably had your fair share of these alluring rabbit trails pop up in front of you.

One second you're learning the basics of flexbox 🤔 and the next thing you know you're watching a 20 hour tutorial on BigQuery. 😵

These things happen.

I know this about myself, and I wanted to fight against that.

A critical component to my success in leveling up my developer skills this year has been combining my many interests around thematic goals.

By repurposing content in multiple media, I was able to write, video and podcast about my learning journey and solidify the concepts I was learning along the way.

Now, overachievement can also lead to burnout, stress and the copious anxiety of seeking to produce content for its own sake - a burden I was eager to avoid. And as a result, not every piece of content was accompanied by every media outlet.

But when it made sense to write an article, record a video or podcast, I seized the moment.

Simply pressing record or typing the opening paragraph of an article is often all it takes to get over the insecurities of creation.

I've never regretted writing, recording or learning.

👊I Kept Going Anyway

Here's the tough truth: even knowing this, I spent the first several months of 2022 doing exactly the things that I was trying to guard against.

I veered off course by trying to learn multiple things at once.

I procrastinated learning the things I'd written down as goals in favor of checking a box on other certifications.

I didn't follow through daily with 100 Days of Code. Look through my spreadsheet of tweets.

The first one was on January 10th; the last one was on August 19th! That's six months, y'all! 😱

I launched a few products but then lost steam for several months.

I podcasted pretty regularly right up until I stopped for a while.

Here's the thing, though. I just kept going even when I missed a day or a week. And I didn't beat myself up when I didn't keep perfect track of all I was working on. Maybe I learned some cool stuff for work one day but didn't tweet it out. No big deal. Oftentimes perfection is the enemy.

And I never stopped. Momentum has been so important for me. Even as I've zigged and zagged I've kept forward momentum.

Even when I felt like throwing in the towel. Even when I felt like I was not making progress. Even when I felt like my learning and content was purposeless....I didn't stop.

I realize that it doesn't matter what I feel like. Results come after the crappy feelings...even when they take twice as long as you planned.🤣

💥Mission Accomplished

And you know what? By the end of those six months, I'd annihilated my original goals.

Not only had I completed every one of them, but I'd begun to learn:

• how to better organize my time by managing projects like a professional.

• how to combine my design interests with my technical writing and developer pathway

• how to quantify why I was doing this in the first place.

• how to write proficiently. I have published over 30 articles this year on Hashnode, freeCodeCamp and LinkedIn

• how to participate in a hackathon. I won $500 as one of the runner ups in Hashnode's Writeathon this fall!

• how to work with clients in a freelance capacity. By talking and writing about my progress, I was able to work with two clients who reached out to me for web development work.

• how to reach out to people I admire. I've met Quincy (founder of freeCodeCamp) twice this year to discuss his platform, my contributions to it, and opportunities for future growth

• how to release real products into the world on Gumroad.

Check out my first tweet in January:

By the end of the 100 tweets in August, after meandering through a myriad of topics, my final tweet was a milestone for me. I released a legit open-source animation library 💥:

That project alone rolled together project management, open-source infrastructure, version releases on GitHub, making proper documentation...not to mention coding the actual product.

Much of the year had me refining my project management as much as my raw coding skills.

🏃‍♂️Priorities

I've also learned where to pull back. One of the reasons my "100" Days of code challenge didn't go as planned was that we had our fourth child this spring.

I've had to learn where to pump the brakes, slow down and reprioritize.

Correct. I have a job, a wife and four children.

And on top of that, I love running. Not 5Ks either. I run ultra-marathons. That takes a ton of time.

So, rather than bemoan all the free time I no longer have that I was spoiled with in my twenties, I have had to learn how to prioritize things. How to give up things. How to focus on what's truly important.

Everyone has the same amount of time and I can do anything I want as long as I'm willing to sacrifice something else.

It may come as no surprise then that I don't watch a ton of TV or sports. That I don't go out on weekends. That I'm not doing end-game raids anymore.

Know what? Some of the simplest ways to consistently level up my coding and content creation cadences has been to:

1. Get good sleep

2. Wake up early

3. Eat healthily

4. Exercise regularly

5. Be in community with others

How bout that for boring and oversimplified general life advice?! 🤣

But it's so true. When I can prioritize these things, every other aspect of my life has benefited.

🙋‍♂️What is Important?

Computers are not important. ❌

Coding is not important. ❌

Writing is not important. ❌

Content is not important. ❌

Relationships are important. ✅

People are important. ✅

Family is important. ✅

Selflessness is important. ✅

My kids don't give a rip about what new framework has inspired me to watch a YouTube analysis.

My wife doesn't read any many of the articles I write.

What I've created matters far less than who it can help. After a year of diligently expanding my technical toolkit and writing repertoire, I am convinced that the best thing I've done has been to try and help others.

There will always be someone who can learn from what I've just done.

The thing is, learning for its own sake is also a ton of fun. I'd probably spend a significant portion of my life in college forever if I had infinite resources. So it can be easy to slide off into misaligned priorities that completely miss the point.

The point is that I'm learning and creating content to benefit others. By teaching, I get better and I help others get better.

I was beginning to understand this even at the start of the year when I thought I'd make a new product every month.

🧩Solving Specific Problems

Solving specific problems that I was experiencing gave birth to the 2022 Personal Finance Tracker, the Sacred Geometry collection, and the Infinite Memory web application.

These products couldn't be categorically further from one another, but they were all things I was deeply interested in as well as passionate about sharing with others.

The Finance Tracker was a polished version of a Google Sheets tool that my wife and I have been using for the past decade every year.

The Sacred Geometry collection was more an art project than anything. I combined my Adobe Illustrator hacks with my childhood interests in geometric drawings to create an iPhone wallpaper pack.

The Infinite Memory project was a tool I made for a men's bible study to help memorize scripture.

Making videos or writing articles about specific things I was struggling with or had figured out became my most popular content.

Helping others is the best way to increase exposure.

My personal YouTube channel is tiny because it contains a diverse amount of irregularly posted content. (I have a dedicated brand channel that will be launching in the coming weeks that will focus on spreadsheets and coding!)

But even with the minuscule amount of views I ordinarily garner from my personal channel's posts, I had one video amass 10,000+ views since publishing it in January.

And the coolest part: I made it on a whim after talking to my 5-year-old son about building a spreadsheet that kept track of the Teenage Mutant Turtles' favorite colors.

This was not a high-concept piece, it was simply something that I did for fun with my son, and which presented a curious, small, specific problem that I had to figure out.

The other two videos that gained multiple thousand views were answering very specific, and pretty basic questions about a point-of-sale software that my company uses.

People benefit most from answers to concise questions. I am still learning how to get better at keeping things simple in my content and in my learning path.

💩You Gotta Make Poop Before Pearls

Why the bit on YouTube? Why not give some Hashnode stats? First, I'm happy to share my meager Hashnode numbers below. This article will be the 30th I've published here, and of those, 5 were originally published on freeCodeCamp.

I have 169 videos on YouTube. Of those, only 10 have more than 100 views. 👀

For Hashnode, I have only been putting out content for a year, and my readership is not large. Here's a snapshot from the advanced analytics before publishing this article:

The most viewed article I have written was about embedding video in a Bootstrap 5 site.

The next two articles were about doing very specific things too: Animating SVGs for GitHub ReadMEs and Creating Lightbox Photo Galleries in a Bootstrap 5 site.

So, you've got to make crap first. Or at least I do.

It takes writing and recording and putting out a bunch of crap to refine my voice.

It takes fearlessly releasing things into the wild and persevering past negative (or even worse, zero) reactions to them.

It takes time to develop a skillset and the ability to craft content that is at once concise and helpful.

But it has been and will continue to be worth it.

I love helping and teaching others. I love creating content that can provide shortcuts to solutions I've discovered. I love platforms that connect developers and content creators around the world.

I love these things because I love people. Sure I love software and learning and challenges and puzzles and videos and writing and all that.

But at the end of the day, I love connecting with others. Creating content has helped me do more of that this year. I love that I can expand my technical toolkit by helping someone else expand theirs.

Conclusion

I could go on about the cool stuff I've learned and been able to write about this year. Mostly, though, it's given me further insight into the viability of being a professional creator. I love connecting with people through the content I make, and I look forward to an impactful year of doing more of exactly that in 2023!

I hope you found this recap helpful and inspiring! Come follow me on LinkedIn and YouTube! I'd love it if you said hey! 👋

Originally published for freeCodecamp

ROM stands for Rough Order of Magnitude. It is a project management guideline to determine the estimated range of costs for a project.

This article will explain:

1. Who should use a ROM

2. When to use a ROM

3. How to calculate a ROM

4. Simple example of a ROM

Who Should Use a ROM

Project Managers use rough orders of magnitude to determine initial cost ranges for upcoming projects. Many organizations and most software organizations use project managers to lead projects.

Their role involves leading their project team, defining the goals of the project, reporting on the progress to the company stakeholders, and seeing the project through to completion.

Who else can use a ROM? You! 👊 As you'll see, the concept of a ROM is very simple to grasp and can be useful in myriad circumstances.

When to Use a ROM

ROMs are extremely important for project managers in the early stages of a project's planning. They're used to decide whether or not a project is going to be feasible or not.

Rough Orders of Magnitude can be used to prepare a project business case (an analysis of the potential benefits of the project) before a project is committed to.

How to Calculate a ROM

Calculating a ROM is pretty straightforward. It is meant to provide a range of the possible cost of a project and you can find it using the following formulas:

Lower Bound = ROM Estimate x 0.75

Upper Bound = ROM Estimate x 1.75

During the planning phases of a project, the project manager can come up with an estimate of the costs involved. From here, using the above formulas, they can then calculate a lower boundary in case the project ends up being less expensive and an upper boundary in case it goes over budget.

Since it is helpful to have more room on the upper boundary to avoid running out of funding if it does go over budget, the rough order of magnitude's upper boundary is considerably higher.

ROM Example

You've probably calculated a ROM without knowing it. 💡

Say you're going to the movies with a friend. You figure there will be ticket costs plus refreshment costs. Maybe $20 a ticket since you're going to the latest Nolan IMAX film and then another $30 a person since popcorn is more expensive than steaks at the movies.

This puts you at $100 total for both of you.

The Lower Bound in a ROM calculation would be $100 x 0.75 = $75.

The Upper Bound would be $100 x 1.75 = $175.

You probably don't do this exact math in your head, but you likely have figured there could be extra expenses. You go into the date thinking you could spend as much as $150, for instance.

Conclusion

Rough Orders of Magnitude are extremely important in organizational projects. It is vital to decide at the onset whether or not the project is feasible. And the principals behind ROMs are both common sense and easy to calculate.

I hope this has been helpful to you!

You can find and follow me on YouTube & LinkedIn. I'd love it if you said hey! 👋

Originally published for freeCodeCamp

Spreadsheets are powerful and awesome. 💪

In this tutorial I will show you four ways to find the percentage difference between two numbers in Excel. I'll also show you how to use custom functions in Google Sheets. 👍

The four techniques (and one bonus) we'll use are:

1. Using a Formula (lvl 1️⃣ easy mode)

2. Using the LAMBDA FUNCTION + Name Manager (lvl 2️⃣ normal mode)

3. Using Visual Basic for Applications (VBA) (lvl 3️⃣ hard mode)

4. Using the Office JavaScript API (lvl 4️⃣ ultra-mode)

5. Using Custom Functions with Google Sheets (💥 bonus level)

Formula for Percentage Change Between Two Numbers in Excel

The formula is the first thing most people will reach for when making a calculation in Excel. It allows us to make explicit calculations using data in cells.

Suppose we have sales data for one year in cell B3 and sales data for the second year in cell C3. By typing the formula below we can calculate the percentage difference from the first year to the second:

=(C3-B3)/B3

Typing a custom formula has the advantage of being quick and straightforward, especially for simple calculations.

Additionally, formulas may be copied down and/or across cell ranges for quick reuse. And formulas are used in exactly the same fashion in Google Sheets as in Microsoft Excel.

However, when calculations become lengthy and/or complex, it can be helpful to know about some alternative methods.

How to Use a LAMBDA Function and Name Manger

Building on our first example, the LAMBDA function allows us to take a custom operation and codify it for reuse throughout our worksheet.

Using the same data as before (this time in cells B4 and C4) we write the LAMBDA Function like so:

=LAMBDA(year1,year2,(year2-year1)/year1)(B4,C4)

At first glance you might wonder why on earth we should type out this lengthy mess, but hang with me and you'll see it is arguably cleaner for reuse than simply defining a function.

Here's what's happening:

The first thing we're doing is defining the parameters of our function and separating them by commas. You can define as many of those as you need (well, up to 253 that is 🤣). We only have two: year1 and year2.

After listing the parameters, we write the formula we want Excel to calculate. This is the same thing we did in the first Formula section – only this time we're using our parameter names instead of the explicit cell names: (year1-year2)/year1.

Last, we close the parenthesis of the LAMBDA function and then call it by writing the actual cells being used: B4,C4. This is telling the function that it needs to use the value in cell B4 for the parameter year1 and the value in cell C4 for the parameter year2.

What a mess, right!? Yes, and technically, writing out the whole LAMBDA function here is simply good practice to make sure the thing works before we do the next step...

This is the cool part. Click the Formula tab in the Ribbon at the top and select Name Manager.

Select New.

Then enter the Name of your formula and write an optional description in the Comments. In the Refers to line, you'll copy in the LAMBDA Function.

You'll be able to use it in the same way you would use a built-in function by typing the following into a cell

=Percentage_Change(B5,C5)

Now we have all the ease of a regular built-in function at our disposal. Google Sheets has similar functionality, which we'll discuss at the end of this article.

How to Use Visual Basic for Applications

If you're using the desktop version of Excel, you have access to Visual Basic for Applications. This is an event-driven programming language by Microsoft and you can use it to do almost anything you can dream (and code) up.

If you wanted to find the percentage difference between two numbers using VBA, you would go to the Developer tab in the Ribbon (or press alt + F11).

If you don't see the Developer tab, you may need to enable it by selecting File -> Options. Then look for Customize Ribbon. From here you can select the box next to Developer.

Bonus: If ALT + F11 doesn't work, GeForce Experience may be interfering with the built-in shortcuts. Change the shortcut for whatever is using ALT + F11 in the settings. For me it was the Toggle comments on/off while broadcasting to Facebook setting.

Once you've opened the VBA window, select Insert -> Module from the menu. This will open up a blank window where we will write our program. Think of this like an IDE inside Excel. We'll program here and then utilize that program in our worksheet.

Here we can enter the same type of commands we used with the Named LAMBDA function above.

Function PERCENTFUNCTION(year1, year2)
    PERCENTFUNCTION = (year2 - year1) / year1
End Function

And voilà! We can now use PERCENTFUNCTION in our Excel Sheet in the same way we used the Percentage_Change named function.

VBA is useful for more complicated programs and would be overkill for our example. Incidentally, Google Sheets does not have VBA functionality.

How to Use the Office JavaScript API

Now the real good stuff! Did you know you can write JavaScript and TypeScript within Excel? Me either. But you can.

Script Lab is an Add-on by Microsoft that allows us to explore the JavaScript API within Office Apps as well as declare custom functions by writing them as scripts.

You can add it to Excel here. And read more about it here.

Unlike VBA, this is usable on the web version of Excel too.

Once it's installed, select it from the Ribbon and click Code.

This will bring up a legit code editor on the sidebar.

We can create a custom function using JavaScript by selecting a New Snippet from the Hamburger menu at the top left of the Scripts Lab window.

By typing the following function we can again define a percent difference function, but this time using JavaScript.

/** @CustomFunction */
function percent_change_javacscript(year1, year2) {
  return (year2 - year1) / year1;
}

In order to use this function, select Script Lab -> Functions from the Ribbon:

This will open another sidebar tab and because of the first line in the snippet: /** @CustomFunction */ it will register that custom function.

In the worksheet, you'll be able to use it just like we've been using custom defined functions. This time, though, when you start typing the title, you'll see it registered with a scriptlab prefix on the name. Select this, and it will return the percent change just like the other methods.

Once again, this is major overkill for a simple function, but quite handy to put in your toolbelt nonetheless! 👍

How to Use Custom Functions with Google Sheets

As promised, here's a bonus for how to create a Named Function in Google Sheets. This is very similar to using the Name Manager in Excel.

Select Data -> Named Functions in Google Sheets.

This will prompt you to name and describe your function as well as provide arguments, if applicable.

Last, you'll define the function's operation.

The next screen prompts you to add argument descriptions and examples if you'd like. This is optional, but will be included in the drop down help menu when you use the function in your sheet.

Then it's as easy as typing in your custom function and selecting the cells. You can see below how the help menu is displayed with the information you provided.

Conclusion

Yes, often you will opt for simplicity's sake to use a quick formula in Excel or Google Sheets. But now you know several other ways to find the percentage change between two numbers.

I hope you've found this useful, and good luck in your own spread-sheeting adventures!

You can find and follow me on YouTube & LinkedIn. I'd love it if you said hey! 👋

Originally published for freeCodeCamp

I needed to log in to AWS. But my main email address was rejected. I'd done this in the past and the account had been irreversibly deleted.

No reset option – just a message saying the account was permanently deleted:

There are about a million ways to get a new email address, but I wanted to set up one of the domains I own with email.

And I figured there would probably be a way to have that forwarded to my Gmail.

I was right!

In this quick guide, I'll walk you through:

• How to create an email alias

• Forwarding mail from the alias to a Gmail account

• Sending mail as the Email Alias

How to Create an Email Alias

I'm using Google products: Google Domains and Gmail. All these steps should apply generally to other Domain and Email services.

First, login to your domain provider and select the Email menu. You will be able to select "Add email alias" from the menu options.

How to Forward Email to Another Address

Note: if you add the asterisk (*) symbol, this will create a wildcard alias that forwards any email to the specified address. We'll be adding a specific alias in this tutorial.

Add whatever email you choose and enter where you'd like it to be forwarded to. I'll have hi@sieis.com forwarded to my main Gmail address.

If you are using Google Name servers, then Google Domains will automatically set up the correct mail records (MX).

Otherwise, you'll need to set up these MX records. The process is exactly like setting up name servers if you've ever done that to host your website somewhere different than where you purchased the domain.

Bonus: I've done this for a site hosted on Netlify, and it is very straightforward. From the Netlify dashboard, select Options, Go to DNS panel, and then enter the MX records:

👇

Google will send a one-time verification email here, but if you've previously done this verification it may not send another one.

Send yourself an email from a different address and check it out!

Email sent to Alias and forwarded to main Gmail

Note: sending from your main Gmail address doesn't show up as an unread message like it normally would when you email yourself. Send it from a different address at this point. After the rest of the steps, it will behave as normal when we complete the "send email as alias" part.

How to Send Email as the Alias

If you reply from your main Gmail currently, the recipient will see that address when you reply instead of the alias. That may not be a big deal depending on the use case, but we can certainly set it up so that sent mail acts like it's coming from the custom domain as well.

You'll need to go to your Google Account Security and click App passwords.

Select Mail for the app dropdown and Other for the device dropdown.

Enter the name of your domain and click Generate. It will give you a 16 digit password. Save this for use over in Gmail...

In Gmail, go to settings -> Accounts and Import and click Add another email address.

This will pop up a new small window where you will enter in the details of the alias. Enter the name you want recipients to view and the address of the alias. Make sure the "Treat as an alias" box is checked.

On the next screen, you'll need to change the SMTP server to smtp.gmail.com, the username to your Gmail username, and then paste in the 16-digit password you generated from Google Security in the steps above.

The port should be 587, and the TLS radial button should be checked.

Click Add Account.

This will prompt a verification code being sent to the email alias...which should in turn go to the Gmail account. Enter that in, and you'll now be good to go!

Back in our email thread in Gmail, you'll have the dropdown option when composing new messages to select which account you would like it to send from.

Now we can see from our full thread that our email forwards to and sends from our Gmail account using the email alias and display name we selected.

Thanks for reading!

This was enlightening for me, and I hope it's helpful for you too.

Come say hey on Twitter: https://twitter.com/EamonnCottrell

What's an SVG?

From Wikipedia: SVGs are scalable vector graphics. They are an XML-based vector image format for defining 2d graphics that supports interactivity and animation. They can be scaled in size without loss of quality.

So, SVGs are, in essence, a list of programatic instructions describing a shape or collection of shapes. The file itself is an XML document and when you open one up, it looks a lot like html at first glance. In fact, as we'll see shortly, you can add ids and classes to the different elements in order to manipulate them with CSS just like html elements!

Cool, right?! 😁

Use Case - GitHub README

I recently updated the README for one of my GitHub projects, unMove. This was what caused me to go down the .svg rabbit hole. I wanted an animation on there without having to resort to something on giphy.

This is what I used first, but it was pretty rough:

That's when I realized that I could "embed" the animation into an .svg and then just add that .svg straight to the README like any other image file.

Below is the graphic I created in Illustrator with the embedded code followed by the full .svg code block:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="b" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 322.01 322.01">
    <defs>
        <style>
            .e{
                fill:url(#d);
            }
            .rotate{
                transform-origin: center;
                animation: rotation 20s infinite linear;
            }
            @keyframes rotation{
                from{
                    transform: rotate(0deg);
                }
                to{
                    transform: rotate(359deg);
                }
            }
        </style>
        <radialGradient id="d" cx="161.01" cy="161.01" fx="161.01" fy="161.01" r="161.01" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="red"/>
            <stop offset=".22" stop-color="#ff0"/>
            <stop offset=".4" stop-color="#f7931e"/>
            <stop offset=".73" stop-color="#f0f"/>
            <stop offset="1" stop-color="#aca1c9"/>
        </radialGradient>
        </defs>
    <g id="c" class="rotate">
        <path class="e" d="M322.01,161c-88.92,0-161.01,72.09-161.01,161.01,0-88.92-72.08-161.01-161-161.01C88.92,161,161,88.92,161,0c0,88.92,72.09,161,161.01,161Z"/>
    </g>
</svg>

Pretty neat, eh? 😀

Let's build one of our own...

Get SVG from unDraw

You don't have to create a graphic from scratch, although that's a fun option too if you're so inclined!

One of my favorite places to get free, open-sourced illustrations in .svg or .png format is unDraw. We'll be using one of their illustrations for our example file.

When you select an image on unDraw, you'll be able to change it's color as well as select the download format.

I'm going to use the Blooming illustration.

If you search "flower", it should pop up easily for you. 👇

Edit the SVG

Once you've downloaded the SVG, open it up in your code editor of choice. I use VSCode, but any editor will do the trick.

Pro-tip: if you're so inclined, you can also open the .svg in a graphics program like Adobe Illustrator (not free) or GIMP (free) and make edits or additions graphically. Once you've done that, though, we'll want to end up looking at the actual code.

I've created a folder for our example

$mkdir svg-sample

And then I've placed the svg in the folder

$ls
# blooming.svg

This makes it simple to open in VSCode

$code .

Once in VSCode, though, you'll be confronted with an impenetrable wall of text when you open the .svg file.

Take heart! 💚

We'll just need to clean up the code a bit to make examination easier.

SVG Elements

As always, MDN is an incredible resource for information. The documentation on SVGs is immense, and I encourage you to dig deeper on your own.

As we examine our code, we can see that is made up of several elements: <svg>, <path>, <rect>, <polygon>, <circle>, and <g>

The first thing we'll do is get things a little more readable so we can decipher what's what and manipulate certain elements.

Clean Up

In VSCode, SHIFT + CMD + L will select all occurrences of the highlighted text, so I will select all the beginning of all the various elements, backspace to the start of them, and hit RETURN to get all of them at the start of a line:

Now we can begin to see what's going on a little easier.

Experimentation

In simple SVGs, you may have only one or two elements. This makes it simple to label and apply styling to. However, in our example, there are many elements and nothing to let us know what is what.

By poking around with some styling, we can figure out what is what. The shapes themselves will tell us a little, but by applying a fill color to different things, we can then label everything in our SVG code.

I'm using the Live Server extension in VSCode, so I'm able to see the effects of changes instantly by opening the file while I'm making the styling edits.

You can see in the screenshot below that the first path in the .svg is the path for the woman's right hand in the illustration.

SVG Elements

We start out with the <svg> element itself. This is a container element and sets up the coordinate system. Think of it as our canvas where the rest of the graphics will live.

<svg xmlns="http://www.w3.org/2000/svg" width="598.25299" 
height="581.49793" 
viewBox="0 0 598.25299 581.49793" 
xmlns:xlink="http://www.w3.org/1999/xlink">

Then, we go straight into the paths, polygons, rectangles and circles. All of the following code blocks are individual pieces of the illustration. I've made note of which piece is which in the comments:

<!-- right hand -->
<path id="uuid-207e1ec5-f316-41d7-bdda-8b0dd0a2bd60-198" 
d="M317.37575,441.36116c-8.89671,1.36364-15.40463,7.05944-14.53588,12.72122,.86876,5.66178,8.78434,9.14461,17.68405,7.7793,3.56255-.49662,6.95436-1.83918,9.89166-3.91538l37.62277-6.25382-2.511-14.87153-37.53792,5.31177c-3.42552-1.10114-7.06497-1.36572-10.61369-.77157Z" 
fill="#ffb6b6"/>

<!-- right sleeve -->
<polygon points="479.50058 395.00508 464.91227 425.96119 391.57489 450.64909 330.71947 453.89578 329.19546 439.2792 395.14843 425.48908 462.82463 393.50814 479.50058 395.00508" 
fill="#e6e6e6"/>

<!-- middle flower stem  -->
<rect  x="313.0222" 
y="330.24459" 
width="2.0005" 
height="173.77644" 
transform="translate(-9.1013 7.00975) rotate(-1.26066)"/>

<!-- flower center on middle flower -->
<circle class="flower" 
cx="314.6595" 
cy="306.0531" 
r="21.23894" 
fill="#3f3d56"/>

In this manner, you will be able to go through and label any part of the illustration that you need to use in your animations.

Full Example Animation

Now, look at the full example below. I've made the graphic quite lively to show how you can make an illustration come to life with some basic css.

All of this can be achieved by writing the css in a <style> section directly within the .svg file itself.

Writing the css into the .svg file itself was actually very important for our GitHub README use case. This is what allows us to have the animated .svg rendered in our markdown file on GitHub.

Piece by Piece

There is not a lot of complicated things going on here, tbh. The most difficult part in this example was simply going through each of the .svg elements to label all the parts.

From there, I built a spinning animation for the flower petals. One clockwise and one counterclockwise:

.spin{
    transform-box:fill-box;
    transform-origin:center;
    animation:spin 7s infinite linear;
}
.spin-counter{
    transform-box:fill-box;
    transform-origin:center;
    animation:spin-counter 7s infinite linear;
}
@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(359deg)}
}
@keyframes spin-counter{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(-359deg)}
}

Then I found the code for those petals and added class="spin". They were the most lengthy elements in this file.

Similarly, I animated the flower stems and leaves to flash and the center of the flowers to scale up and down while changing colors.

.flash{
    animation:flash .2s infinite steps(5,jump-none);
}
.flower{
    transform-box:fill-box;
    transform-origin:center;
    animation:flower 4s infinite ease-in-out;
}
@keyframes flash{
    0%{fill:yellow}
    20%{fill:pink}
    40%{fill:blue}
    60%{fill:orange}
    80%{fill:red}
    100%{fill:purple}
}
@keyframes flower{
    0%{
        transform:scale(1.0);
        fill:#3f3d56;
    }
    50%{
        transform:scale(1.3);
        fill: yellow;
    }
    100%{
        transform:scale(1.0);
        fill: #3f3d56;
    }
}

But, we're not limited to harsh, obvious animations. I tried to mimic a slight breeze through the woman's hair by adding a very slight rotation with ease-in-out to it:

.hair{
    transform-box:fill-box;
    transform-origin:top-left;
    animation:hair 3s infinite ease-in-out;
}
@keyframes hair{
    0%{transform:rotate(0deg)}
    50%{transform:rotate(-2deg)}
    100%{transform:rotate(0deg)}
}

And similarly, for her foot...a little tapping by doing this:

.tap{
    transform-box:fill-box;
    transform-origin:right;
    animation:tap 1.3s infinite cubic-bezier(.2,1.4,.7,2);
}
@keyframes tap{
    0%{transform:rotate(-2deg)}
    50%{transform:rotate(-5deg)}
    100%{transform:rotate(-2deg)}
}

The Full Code

There are other ways to put an .svg on a website. For instance, you can insert the element directly into the html and then move all your styling to a separate css file.

This makes things cleaner, but we focused on having everything together for our project today. This way, you can simply upload the .svg to your GitHub project and then throw it into your README like you would any other picture

![svg-animation](<path-to-svg>)

Here is the full code file with everything within the .svg:

<svg xmlns="http://www.w3.org/2000/svg" width="598.25299" height="581.49793" viewBox="0 0 598.25299 581.49793" xmlns:xlink="http://www.w3.org/1999/xlink">

<style>
    .flash{
        animation:flash .2s infinite steps(5,jump-none);
    }
    .spin{
        transform-box:fill-box;
        transform-origin:center;
        animation:spin 7s infinite linear;
    }
    .spin-counter{
        transform-box:fill-box;
        transform-origin:center;
        animation:spin-counter 7s infinite linear;
    }
    .flower{
        transform-box:fill-box;
        transform-origin:center;
        animation:flower 4s infinite ease-in-out;
    }
    .hair{
        transform-box:fill-box;
        transform-origin:top-left;
        animation:hair 3s infinite ease-in-out;
    }
    .tap{
        transform-box:fill-box;
        transform-origin:right;
        animation:tap 1.3s infinite cubic-bezier(.2,1.4,.7,2);
    }
    @keyframes flash{
        0%{fill:yellow}
        20%{fill:pink}
        40%{fill:blue}
        60%{fill:orange}
        80%{fill:red}
        100%{fill:purple}
    }
    @keyframes spin{
        0%{transform:rotate(0deg)}
        100%{transform:rotate(359deg)}
    }
    @keyframes spin-counter{
        0%{transform:rotate(0deg)}
        100%{transform:rotate(-359deg)}
    }
    @keyframes flower{
        0%{
            transform:scale(1.0);
            fill:#3f3d56;
        }
        50%{
            transform:scale(1.3);
            fill: yellow;
        }
        100%{
            transform:scale(1.0);
            fill: #3f3d56;
        }
    }
    @keyframes hair{
        0%{transform:rotate(0deg)}
        50%{transform:rotate(-2deg)}
        100%{transform:rotate(0deg)}
    }
    @keyframes tap{
        0%{transform:rotate(-2deg)}
        50%{transform:rotate(-5deg)}
        100%{transform:rotate(-2deg)}
    }
</style>

<!-- right hand -->
<path id="uuid-207e1ec5-f316-41d7-bdda-8b0dd0a2bd60-198" d="M317.37575,441.36116c-8.89671,1.36364-15.40463,7.05944-14.53588,12.72122,.86876,5.66178,8.78434,9.14461,17.68405,7.7793,3.56255-.49662,6.95436-1.83918,9.89166-3.91538l37.62277-6.25382-2.511-14.87153-37.53792,5.31177c-3.42552-1.10114-7.06497-1.36572-10.61369-.77157Z" fill="#ffb6b6"/>

<!-- right sleeve -->
<polygon points="479.50058 395.00508 464.91227 425.96119 391.57489 450.64909 330.71947 453.89578 329.19546 439.2792 395.14843 425.48908 462.82463 393.50814 479.50058 395.00508" fill="#e6e6e6"/>

<!-- middle flower -->
<g class="flash">

<!-- middle flower stem  -->
<rect  x="313.0222" y="330.24459" width="2.0005" height="173.77644" transform="translate(-9.1013 7.00975) rotate(-1.26066)"/>

<path  d="M313.1538,407.16797c-.18115-.61621-4.32715-15.26855,4.65088-29.6709l1.69727,1.05859c-8.48975,13.61816-4.47021,27.90723-4.42871,28.05078l-1.91943,.56152Z" />

<path d="M318.50651,378.60915s-2.72937-18.65506,22.41425-23.77492c5.23825-1.06664,10.16278-1.79561,14.67694-2.28132,5.32851-.57333,7.40701,6.72083,2.59337,9.0768-6.97123,3.41197-13.52893,7.71085-16.94694,12.80161-9.42681,14.04022-22.73764,4.17784-22.73764,4.17784Z"/>

<path d="M315.74023,461.11523l-1.91943-.56152c.0415-.14355,4.06104-14.43262-4.42871-28.05078l1.69727-1.05859c8.97803,14.40234,4.83203,29.05469,4.65088,29.6709Z"/>

<path d="M310.3877,432.55605s2.72937-18.65506-22.41425-23.77492c-5.23825-1.06664-10.16278-1.79561-14.67694-2.28132-5.32851-.57333-7.40701,6.72083-2.59337,9.0768,6.97123,3.41197,13.52893,7.71085,16.94694,12.80161,9.42681,14.04022,22.73764,4.17784,22.73764,4.17784Z"/>

<!-- flower petals on middle -->
<path class="spin" d="M345.38308,306.12152c5.06107-1.33443,9.79382-3.65962,9.63686-5.95984-.18646-2.73252-7.21292-4.56342-13.27465-4.84202,4.57215-3.57699,8.77317-8.52168,7.48846-10.75799-1.1811-2.05594-6.67554-1.25956-11.74486,.5512,2.99995-4.28898,5.10906-9.12193,3.50282-10.77588-2.00087-2.06027-9.10218,1.49577-13.9485,5.42651,.94344-6.1237,.46649-13.8534-2.2801-14.55274-2.29776-.58506-5.55432,3.91139-7.78706,8.80952-.98679-5.1402-2.98444-10.02026-5.29-10.02026-3.28439,0-5.9469,9.9025-5.9469,16.35398,0,.36468,.00967,.70797,.02632,1.03597-.32965-.38218-.70745-.78145-1.1383-1.19988-4.62815-4.49466-13.58691-9.48355-15.8751-7.12744-1.60625,1.65395,.50287,6.4869,3.50282,10.77588-5.06932-1.81075-10.56375-2.60714-11.74486-.5512-1.58701,2.76251,5.19664,9.65864,10.71068,13.00291-.33147-.03993-.67971-.07355-1.05033-.09883-6.4365-.43917-16.49728,1.54306-16.72087,4.81983-.15696,2.30022,4.57578,4.62541,9.63686,5.95984-5.03878,1.89411-9.74642,4.83707-9.31913,7.16931,.51858,2.8306,8.42853,3.82148,14.64789,3.24148-4.64633,4.4579-9.68446,12.44383-7.5819,14.78429,1.54078,1.71511,6.50608-.06012,10.98934-2.76114-2.15166,4.93429-3.32024,10.36176-1.34945,11.68009,2.60449,1.74223,9.74743-4.32147,13.51348-9.53904-.38374,6.38314,1.14359,15.15229,4.17408,15.49836,2.29068,.2616,4.82911-4.36033,6.39273-9.35537,1.66258,5.11982,4.38795,9.95671,6.73724,9.63613,3.05486-.41687,4.38668-9.40546,3.81684-15.79319,3.88469,5.00287,10.42248,10.35339,12.88884,8.70356,1.9708-1.31833,.80222-6.7458-1.34945-11.68009,4.48325,2.70102,9.44855,4.47625,10.98934,2.76114,2.10256-2.34046-2.93557-10.3264-7.5819-14.78429,6.21936,.58,14.12931-.41088,14.64789-3.24148,.42729-2.33224-4.28035-5.2752-9.31913-7.16931Zm-27.25118,18.05535c-1.30094,.17752-2.49049,.43103-3.39512,1.07838-.96104-.95404-2.3647-1.2446-3.92539-1.42282-1.74749-.19956-3.33551-.21882-4.54651,.78962-.44311-1.23164-1.53269-2.1066-2.80192-2.95564-1.09135-.73004-2.14972-1.3293-3.2561-1.44485-.08644-1.35139-.94416-2.4999-1.99392-3.66846-.66934-.7451-1.33902-1.41125-2.08213-1.85683,1.07214-1.3054,.94852-2.9553,.61679-4.76601-.2366-1.2915-.54407-2.46827-1.23197-3.34246,.90927-1.00353,1.13558-2.41899,1.24252-3.98616,.11675-1.7112,.06824-3.26269-.91948-4.41797,2.55254,.32468,3.78435-1.26552,4.92929-3.25854,.65405-1.13848,1.17989-2.23522,1.21986-3.3469,1.34239-.17824,2.42983-1.11217,3.52418-2.23903,.93486-.96262,1.73007-1.91578,2.02877-3.01283,1.0712,.90022,2.53281,1.03646,4.14527,1.03646,1.57083,0,2.99839-.12942,4.06148-.96827,.82534,.7458,1.97845,1.13265,3.25084,1.45663,1.21463,.30928,2.36117,.51612,3.4036,.30795,.38052,.86931,1.05707,1.65872,1.82981,2.4544,1.09435,1.12687,2.18179,2.06079,3.52418,2.23903,.03998,1.11167,.56582,2.20841,1.21986,3.3469,.76989,1.34014,1.57848,2.49889,2.80151,3.01589-.1428,.77844-.12753,1.63528-.06603,2.53672,.10695,1.56718,.33326,2.98266,1.24252,3.98616-.68791,.87419-.99537,2.05096-1.23197,3.34246-.33173,1.8107-.45535,3.46061,.61679,4.76601-.7431,.44557-1.41278,1.11173-2.08213,1.85683-1.04976,1.16856-1.90749,2.31707-1.99392,3.66846-1.10638,.11555-2.16475,.71482-3.2561,1.44485-1.49056,.99708-2.73218,2.03061-2.97065,3.63515-1.11854-.54256-2.45752-.47248-3.90393-.27513Z" fill="#ff6863"/>

<!-- flower center on middle flower -->
<circle class="flower" cx="314.6595" cy="306.0531" r="21.23894" fill="#3f3d56"/></g>

<!-- ground -->
<path d="M58.50921,563.59732c0,.66003,.53003,1.19,1.19006,1.19H581.98925c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H59.69927c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#3f3d56"/>

<!-- right leg skin -->
<polygon points="344.23894 512.546 331.14162 545.67451 314.19215 534.11806 324.20774 499.44869 344.23894 512.546" fill="#ffb6b6"/>

<!-- left leg skin -->
<polygon points="289.53838 500.21912 254.86901 533.34763 268.73676 547.9858 304.17655 520.25031 289.53838 500.21912" fill="#ffb6b6"/>

<!-- back of hair -->
<polygon points="485.99813 392.35886 485.61291 389.66236 476.75296 372.32767 447.47661 380.03198 452.86962 403.91532 485.99813 392.35886" fill="#ffb6b6"/>

<!-- skirt right leg-->
<path  d="M473.67124,507.92342l.90036,11.57162s3.72223,48.52195-26.32456,52.3741c-30.04679,3.85215-43.1441,7.7043-60.864-22.34248l-27.73549-49.30754-16.20027,19.27593-21.55082-16.96463s15.40861-60.09357,27.73549-62.40486c1.54086-.28891,3.08172-.43337,4.59851-.46497,10.20508-.21261,19.82492,4.77897,25.93085,12.95861l34.95723,46.82949,12.7121-5.77823,45.84061,14.25296Z" fill="#2f2e41"/>

<!-- right foot -->
<path d="M307.25828,544.13365l6.93387-13.09732,20.03119,13.86775s4.62258,16.94947-2.31129,19.26076c-6.93387,2.31129-26.19463-.77043-26.19463-.77043,0,0-35.4398,7.7043-36.21023,.77043s16.17904-8.47473,16.17904-8.47473l21.57205-11.55646Z" fill="#2f2e41"/>

<!-- skirt left leg -->
<path d="M382.76045,534.88849l-53.54491-33.73818-27.35028,24.49301-18.49033-21.57205s33.89894-50.07798,43.91453-52.38927,26.19463-3.85215,26.19463-3.85215l49.30754,45.45539-20.03119,41.60324Z" fill="#2f2e41"/>

<!-- left foot -->
<path class="tap" d="M254.09858,530.2659l17.7199,19.26076-2.33678,1.99887s-4.59709,20.02209-15.38312,13.24898c-10.78603-6.77311-11.55646-8.31398-11.55646-8.31398,0,0-30.81722,6.93387-33.89894-5.39301-3.08172-12.32689,5.39301-10.0156,5.39301-10.0156l7.6952,4.62258,32.36718-15.40861Z" fill="#2f2e41"/>

<!-- face -->
<circle  cx="456.72177" cy="363.85294" r="24.65377" fill="#ffb6b6"/>

<!-- chest -->
<path  d="M450.94354,398.90752l35.4398-10.78603s13.86775,32.35808,11.55646,46.99625c-2.31129,14.63818-23.3682,84.37729-23.3682,84.37729l-46.74096-25.82458s-.77043-15.40861-3.08172-22.34248-9.63038-28.12071,6.54866-45.84061c16.17904-17.7199,19.64597-26.57985,19.64597-26.57985Z" fill="#e6e6e6"/>

<!-- big flower -->
<g class="flash">

<rect x="107.34447" y="155.95049" width="1.99952" height="409.09901" transform="translate(-7.90461 2.47077) rotate(-1.26058)"/>

<path d="M107.59862,336.66016c-.10254-.34961-10.01758-35.3584,10.79932-68.75146l1.69727,1.05811c-20.34814,32.6416-10.67773,66.78906-10.57764,67.13086l-1.91895,.5625Z"/>

<path  d="M118.90075,269.80903s-6.42539-43.91713,52.76688-55.97014c12.33172-2.51104,23.92488-4.22717,34.55197-5.3706,12.54419-1.34971,17.43734,15.82195,6.10524,21.36829-16.41144,8.03236-31.84935,18.15263-39.89591,30.13712-22.19228,33.05303-53.52818,9.83533-53.52818,9.83533Z"/>

<path d="M111.08984,463.66016l-1.91895-.5625c.09961-.34082,9.75146-34.52051-10.57764-67.13086l1.69727-1.05859c20.81689,33.39355,10.90186,68.40234,10.79932,68.75195Z"/>

<path  d="M99.78771,396.80903s6.42539-43.91713-52.76688-55.97014c-12.33172-2.51104-23.92488-4.22717-34.55197-5.3706-12.54419-1.34971-17.43734,15.82195-6.10524,21.36829,16.41144,8.03236,31.84935,18.15263,39.89591,30.13712,22.19228,33.05303,53.52818,9.83533,53.52818,9.83533Z"/>

<!-- big flower petals -->
<path class="spin-counter" d="M182.17266,99.16107c11.91461-3.14148,23.05627-8.61536,22.68677-14.03046-.43896-6.4328-16.98041-10.74304-31.25073-11.39893,10.76361-8.42084,20.6535-20.06146,17.62909-25.32611-2.78052-4.84003-15.71533-2.96521-27.64935,1.29761,7.06238-10.09698,12.02759-21.47455,8.24622-25.36823-4.71039-4.85022-21.42804,3.5213-32.8371,12.7749,2.22101-14.4162,1.09821-32.61322-5.36774-34.25958-5.4093-1.37732-13.07581,9.20807-18.33203,20.73907-2.32306-12.10089-7.02588-23.58936-12.45355-23.58936-7.73199,0-14,23.31213-14,38.5,0,.85852,.02277,1.66669,.06195,2.43884-.77606-.89972-1.66547-1.83966-2.67975-2.82471-10.89545-10.58118-31.98584-22.32587-37.37262-16.77917-3.78137,3.89368,1.18384,15.27124,8.24622,25.36823-11.93402-4.26282-24.86884-6.13763-27.64935-1.29761-3.73608,6.50342,12.23376,22.73804,25.21472,30.61102-.78033-.09399-1.60016-.17316-2.47266-.23267-15.15259-1.03387-38.83734,3.63263-39.36371,11.34668-.36951,5.4151,10.77216,10.88898,22.68677,14.03046-11.86212,4.45905-22.9447,11.38727-21.93878,16.87775,1.22083,6.6637,19.84216,8.9964,34.48358,7.63098-10.93823,10.49463-22.79883,29.29486-17.84906,34.80469,3.62726,4.03766,15.31641-.14154,25.87073-6.50018-5.06537,11.61615-7.81641,24.39331-3.17682,27.49689,6.13141,4.1015,22.94708-10.17346,31.81299-22.45648-.90338,15.02698,2.6922,35.67102,9.82648,36.48572,5.39264,.61584,11.36853-10.26495,15.04956-22.02411,3.914,12.05292,10.32996,23.43976,15.8606,22.68506,7.19165-.98138,10.32697-22.14203,8.98547-37.17981,9.1452,11.77759,24.53625,24.3736,30.34247,20.48962,4.63959-3.10358,1.88855-15.88074-3.17682-27.49689,10.55432,6.35864,22.24347,10.53784,25.87073,6.50018,4.94977-5.50983-6.91083-24.31006-17.84906-34.80469,14.64142,1.36542,33.26276-.96729,34.48358-7.63098,1.00592-5.49048-10.07666-12.4187-21.93878-16.87775Zm-64.15381,42.50531c-3.06262,.41791-5.86304,1.01471-7.99268,2.5387-2.26245-2.24597-5.56689-2.92999-9.24103-3.34955-4.11389-.46979-7.85236-.51514-10.70325,1.85889-1.04315-2.89948-3.60822-4.95929-6.59619-6.95807-2.56921-1.71863-5.06079-3.12939-7.66541-3.40143-.20349-3.1814-2.22272-5.88519-4.69403-8.63617-1.57574-1.75409-3.15228-3.32233-4.90167-4.37128,2.52399-3.07312,2.23297-6.95728,1.45203-11.21997-.55701-3.04041-1.28082-5.81073-2.90027-7.86871,2.14056-2.36249,2.67334-5.6947,2.92511-9.38409,.27484-4.02844,.16064-7.68091-2.16461-10.40063,6.00909,.76434,8.909-2.97925,11.60437-7.67114,1.53973-2.68018,2.77765-5.26208,2.87177-7.87915,3.16022-.41962,5.72021-2.61823,8.29651-5.27106,2.20081-2.26617,4.07288-4.51007,4.77606-7.09271,2.52179,2.11926,5.96265,2.44,9.75867,2.44,3.698,0,7.05872-.30469,9.5614-2.27948,1.94299,1.75574,4.65759,2.66644,7.65302,3.42914,2.85944,.72809,5.55859,1.21503,8.01263,.72498,.89581,2.04651,2.48853,3.90491,4.30768,5.77808,2.57629,2.65283,5.13629,4.85144,8.29651,5.27106,.09412,2.61707,1.33203,5.19897,2.87177,7.87915,1.81244,3.15491,3.716,5.88281,6.59521,7.09991-.33618,1.83258-.30023,3.84973-.15546,5.97186,.25177,3.68939,.78455,7.02167,2.92511,9.38409-1.61945,2.05798-2.34326,4.82831-2.90027,7.86871-.78094,4.2627-1.07196,8.14685,1.45203,11.21997-1.74939,1.04895-3.32593,2.61719-4.90167,4.37128-2.47131,2.75098-4.49054,5.45477-4.69403,8.63617-2.60461,.27203-5.09619,1.6828-7.66541,3.40143-3.50903,2.34729-6.43201,4.7804-6.99341,8.55774-2.63324-1.27728-5.7854-1.1123-9.19049-.64771Z" fill="#ff6863"/>

<circle class="flower" cx="109.84423" cy="99" r="50" fill="#3f3d56"/></g>


<!-- small flower -->
<g class="flash">

<rect x="570.88768" y="466.26258" width="2.00002" height="97.74925" transform="translate(-11.19664 12.70857) rotate(-1.26084)"/>

<path d="M570.979,509.65527c-.104-.35449-2.48779-8.7793,2.66504-17.04492l1.69727,1.05859c-4.66504,7.48242-2.46533,15.34668-2.44287,15.4248l-1.91943,.56152Z"/>

<path d="M574.40991,493.46765s-1.53527-10.49347,12.60802-13.3734c2.94652-.59998,5.71656-1.01003,8.25578-1.28324,2.99728-.3225,4.16644,3.78047,1.45877,5.1057-3.92132,1.91924-7.61002,4.33735-9.53265,7.2009-5.30258,7.89763-12.78992,2.35003-12.78992,2.35003Z"/>

<path d="M573.27392,540l-1.91943-.56152c.02246-.07812,2.22217-7.94141-2.44287-15.42383l1.69727-1.05859c5.15283,8.26562,2.76904,16.68945,2.66504,17.04395Z"/>

<path d="M569.84308,523.81278s1.53527-10.49347-12.60802-13.3734c-2.94652-.59998-5.71656-1.01003-8.25578-1.28324-2.99728-.3225-4.16644,3.78047-1.45877,5.1057,3.92132,1.91924,7.61002,4.33735,9.53265,7.2009,5.30258,7.89763,12.78992,2.35003,12.78992,2.35003Z"/>

<path class="spin-counter" d="M589.52798,452.69335c2.84685-.75062,5.50902-2.05854,5.42073-3.35241-.10489-1.53704-4.05727-2.56692-7.46699-2.72364,2.57184-2.01206,4.93491-4.79345,4.21226-6.05137-.66437-1.15647-3.75499-.7085-6.60648,.31005,1.68747-2.41255,2.87385-5.13109,1.97033-6.06143-1.12549-1.1589-5.11997,.84137-7.84603,3.05241,.53068-3.44458,.2624-7.79254-1.28256-8.18592-1.29249-.32909-3.12431,2.20016-4.38022,4.95535-.55507-2.89136-1.67875-5.63639-2.97563-5.63639-1.84747,0-3.34513,5.57016-3.34513,9.19912,0,.20513,.00544,.39823,.0148,.58273-.18543-.21498-.39794-.43956-.64029-.67493-2.60334-2.52825-7.64263-5.3345-8.92974-4.00918-.90351,.93035,.28286,3.64888,1.97033,6.06143-2.85149-1.01855-5.94211-1.46651-6.60648-.31005-.89269,1.55391,2.92311,5.43298,6.02476,7.31414-.18645-.02246-.38234-.04137-.59081-.05559-3.62053-.24703-9.27972,.86797-9.40549,2.71115-.08829,1.29387,2.57388,2.60179,5.42073,3.35241-2.83431,1.06544-5.48236,2.72085-5.24201,4.03274,.2917,1.59221,4.74105,2.14958,8.23944,1.82333-2.61356,2.50757-5.44751,6.99966-4.26482,8.31616,.86669,.96475,3.65967-.03382,6.1815-1.55314-1.21031,2.77554-1.86764,5.82849-.75906,6.57005,1.46503,.98,5.48293-2.43083,7.60133-5.36571-.21585,3.59052,.64327,8.52316,2.34792,8.71783,1.28851,.14715,2.71637-2.45269,3.59591-5.2624,.9352,2.8799,2.46822,5.60065,3.7897,5.42032,1.71836-.23449,2.4675-5.29057,2.14697-8.88367,2.18514,2.81411,5.86264,5.82378,7.24997,4.89575,1.10857-.74156,.45125-3.79451-.75906-6.57005,2.52183,1.51932,5.31481,2.51789,6.1815,1.55314,1.18269-1.31651-1.65126-5.8086-4.26482-8.31616,3.49839,.32625,7.94774-.23112,8.23944-1.82333,.24035-1.31188-2.4077-2.9673-5.24201-4.03274Zm-15.32879,10.15614c-.73178,.09985-1.4009,.24245-1.90975,.60659-.54059-.53665-1.33014-.70009-2.20803-.80033-.98297-.11225-1.87623-.12309-2.55741,.44416-.24925-.69279-.86214-1.18496-1.57608-1.66255-.61388-.41065-1.20922-.74773-1.83156-.81273-.04862-.76016-.53109-1.4062-1.12158-2.06351-.37651-.41912-.7532-.79383-1.1712-1.04446,.60308-.73429,.53354-1.66236,.34694-2.68088-.13309-.72647-.30604-1.3884-.69298-1.88014,.51146-.56449,.63876-1.36068,.69892-2.24222,.06567-.96255,.03838-1.83526-.51721-2.48511,1.4358,.18263,2.1287-.71186,2.77273-1.83293,.3679-.6404,.66369-1.25731,.68617-1.88263,.7551-.10026,1.36678-.62559,1.98235-1.25946,.52586-.54148,.97317-1.07763,1.14118-1.69472,.60255,.50637,1.4247,.58301,2.33172,.58301,.88359,0,1.6866-.0728,2.28458-.54465,.46426,.41951,1.11288,.63711,1.8286,.81935,.68323,.17397,1.32816,.29032,1.91452,.17322,.21404,.48899,.5946,.93303,1.02927,1.3806,.61557,.63386,1.22726,1.15919,1.98235,1.25946,.02249,.62532,.31827,1.24223,.68617,1.88263,.43306,.75383,.88789,1.40563,1.57585,1.69644-.08033,.43787-.07174,.91985-.03714,1.42691,.06016,.88154,.18746,1.67774,.69892,2.24222-.38695,.49173-.55989,1.15367-.69298,1.88014-.1866,1.01852-.25613,1.94659,.34694,2.68088-.418,.25063-.79469,.62535-1.1712,1.04446-.59049,.65731-1.07296,1.30335-1.12158,2.06351-.62234,.065-1.21767,.40209-1.83156,.81273-.83844,.56086-1.53685,1.14222-1.67099,2.04477-.62918-.30519-1.38235-.26577-2.19596-.15476Z" fill="#ff6863"/>

<circle class="flower" cx="572.24597" cy="452.65487" r="11.9469" fill="#3f3d56"/></g>

<g>

<path id="uuid-fcc96ddd-8a9b-4008-9e3e-ba4d42e134c9-199" d="M372.9429,560.6837c-5.76763,6.90981-6.87749,15.48672-2.47944,19.15655,4.39805,3.66983,12.6373,1.04277,18.40606-5.87027,2.34226-2.72987,3.99672-5.98097,4.82492-9.48131l24.06795-29.58576-11.72388-9.48778-24.62774,28.82333c-3.29686,1.44132-6.20051,3.65139-8.46786,6.44523Z" fill="#ffb6b6"/>

<polygon  points="478.12744 414.451 486.50417 447.63127 445.50568 513.25891 403.65242 555.32266 390.08694 544.06849 432.29671 491.54901 464.29146 423.87933 478.12744 414.451" fill="#e6e6e6"/></g>


<!-- hair -->
<path class="hair" d="M433.99408,359.61557c6.32276-.01514,6.68173,.02699,7.7043,0,7.84218-.20681,9.89286-3.2921,13.86775-3.08172,7.09451,.37553-2.26916,35.94511-6.16344,52.38927-3.81924,16.12741,9.08811,30.5789,10.0156,31.58765,13.10117,14.24835,36.11364,16.85373,40.06238,10.78603,3.19618-4.91121-8.13109-12.37871-5.39301-23.11291,2.67657-10.49307,15.03562-9.3757,18.49033-19.26076,3.61798-10.35219-8.54038-15.57338-16.17904-40.83281-4.3869-14.50661-3.61083-17.20961-7.7043-26.19463-10.94177-24.01645-64.57358-13.7909-58.55271,8.47473,1.16467,4.307-1.93482,9.25899,3.85215,9.24516Z" fill="#2f2e41"/></svg>

Thanks for Reading! 🙏

I love tweaking illustrations like this and making them animated. A little animation goes a long way.

I hope this has been helpful and fun for you to learn about as well!

Come say hey 👋 and let me know if you add an animated .svg to your GitHub; you can find me on Twitter: https://twitter.com/EamonnCottrell

I set out building this to better learn good project management and the ins & outs of maintaining an open source project.

If you're interested in open source or project management...or just staying organized and on task amidst a never ending stream of ideas, this may be helpful for you!

I'll walk you through all the pieces of this project in the order that I built them. I've managed to put together a good boilerplate for a project, and look forward to continuing to contribute to its growth!

README 📖

Please create a readme file. 🙏

You probably know it, but don't forget to do this. It is the best place to showcase your project. And GitHub will automatically prompt you to initiate the repository with a readme, so there's no excuse to leave this out.

Check out readme.so by Katherine Peterson: she's made an incredibly easy to use browser-based tool. It lets you to create a clearly sectioned readme using a drag and drop template editor that you can then copy and paste into your repository.

If you don't have enough info at the beginning, make the readme anyway and come back later to fill it in.

Here's what mine looked like initially; it wasn't perfect, but it had some of the bones of what the project would become. I copied and pasted all of it from readme.so except for the gif. I actually designed that graphic and made it spin on giphy so I could have something animated quickly on the readme.

Bonus: In the current, updated readme I used an svg and edited the inline <style> to add the rotation animation. It made it a lot cleaner than the giphy version. 😊

License 🎓

Another easy addition. You'll be prompted for this too. MIT License is an easy way to make the project completely open sourced. Go here to check out how to choose a license for your repository.

I simply selected MIT for unMove's license and am good to go without any further edits:

Descriptions && Tags

Don't neglect the right sidebar. Here's where you should add a description for your project as well as tags. We'll come back later when we create a new release too 😊.

Issues && Projects

I've recently been using Trello for freelance project management, and it's been a great solution to keep me and my client on task.

For this project, though, we'll use the built in capabilities from GitHub. 🙌

GitHub projects allows you to create board or table-view task lists for your project.

Here's what they'll look like when you create some:

And you can convert them to Issues so they show up in your Issues Tab for assignment to team members 👇

Alternatively, you can create an issue from the Issues tab and then assign it to a Project 👇

Since this project consists of just me, I'm assigning everything to myself, but I'm also going through the small step of adding labels like enhancement, feature, good first issue, etc.

Even though these first small issues don't require much documentation, I want to get in the habit of creating well documented comments and reviewing the changes before merging into main.

You don't need to have grand plans or incredible features listed here. Simple things are fine. It's important to simply set good habits of documentation, assignments and code review.

Branches: Main vs Other

So I've known branches were a thing for a while, but I've never bothered using one in any of my personal projects.

Turns out they're a real good idea (shocker), and a real helpful tool even on small projects. I'll use development branches in this project any time I make changes to the codebase. This way I can check that everything is working without effecting the current (already working) main branch.

Simply click the branches tab and type the name of the branch you'd like to create.

Now once you clone the repo to work locally, you can $git checkout develop to switch to the develop branch. This will allow for changes to be tested without affecting the main branch.

This is a new habit for me, and I am happy to be leveling up my developing processes.

Pull Requests, Briefly

More often, though, after forking and cloning the repo, you'll want to make your own branch locally:

$git checkout -b <new-branch-name>

Then, when you push this <new-branch-name> to your forked repo, you'll have the option to open a pull request against the main branch.

Launch

I suppose we need to make something functional before launching. At the very least, I want this library to have a couple CSS animations available immediately. I've developed these in a develop branch to test out, and once satisfied, I merged those changes to the main branch.

$git checkout main
$git merge <new-branch-name>

Versioning && Git Tags

Here's another thing I've known about for a while, but only actually used once before. I want to launch with an actual version number. In this case, v0.1.0-alpha. In order to do this, we'll need two things:

1. Git Tag
2. GitHub Release Version

The release version won't work unless you have a git tag in your codebase, so we'll do that first.

Git Tags denote spots in your commit history where big things happen...like a version release!

This will show your commit history:

$git log --pretty=oneline

This will tag the spot you choose in your history. Replace the hashmarks with the first digits in the checksum from your commit history.

$git tag -a v0.1.0-alpha #####

Pushing this change works differently too. If you run $git status everything will look like it's up to date. Instead, run $git push origin v0.1.0-alpha and we're good to go!

Now, back in GitHub, we can make a version release by clicking Create a new release in the righthand side bar.

Website

Building a website is usually the second order of business...right in line with purchasing a sweet domain. I've focused first on building up a framework of good processes.

But the time has now come. We do indeed need a website. It doesn't have to be much, but it does have to be clean and concise.

Enter: Netlify. Or a host of other...hosts. 😁 Use whatever you're comfortable with, but I have been very impressed using Netlify especially for personal projects. It's allowed me to hone my git and GitHub skills and incorporate that into the development workflow.

I love how deployment works: push a change to my GitHub repository, and it deploys/updates automatically.

Bonus: Netlify has an open source plan if you meet certain criteria. Here's the link to that, and the basics are below:

1. Include open source compatible license ✅
2. Have a code of conduct
3. Link to Netlify ✅
4. Cannot be a commercial project ✅

As you can see, my site (https://unmove.netlify.app/) is currently a bare bones display of the first few animation classes available.

JSdelivr CDN

JSdelivr is, simply put, a free CDN for Open Source.

Content Delivery Networks (CDN) help deliver content fast by using globally distributed servers and help cache content at the network edge. 🚀

CDNs are widely used, and it will allow our users the option of using our stylesheet via a JSdelivr link rather than downloading it into their project.

And since our project is on GitHub, we can simply load any release, commit or branch by using this link template:

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file

I updated our README file's Quick Install Instructions to reflect these changes once I had the first working CSS distribution.

In our case, adding the following to the html page's <head> allows us to use unMove! 😃

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sieis/unmove@main/dist/unmove.css">
        <title>unmove demo</title>
    </head>
<body>

</body>
</html>

CSS

What's going on? 1300 words in and we're just now at the actual product. We were writing a CSS library after all, remember!?

Here's the thing: code is important, but getting a project and/or product organized can be just as cumbersome a process as writing the code. And if it's not done up front, if standards aren't set, it's liable to get real messy real quickly. 🤔

So, yes, here we are at the end...and just beginning to review the code.

But so much is in place now! And hopefully, you've picked up some knowledge that you can take into your own projects.

One of the reasons I picked a CSS animation library was precisely so it wouldn't be too heavily code-intensive. I wanted a quick way to get a working MVP into the world.

And we did exactly that.

Here is a link to the CSS from JSdelivr. Pull this up in another tab to examine the code and I'll walk through the classes below.

Spinning Animation

Here's a look at the Spinner Section from unMove's example page:

    <section class="text-center container border border-dark border-5 rounded-3 p-5 my-2">
      <h2>Spinner Animation</h2>
      <div class="p-2  text-center">
        <p>An infinite spin. Add the class <code>um-spin</code> to anything you want to spin
        </p>
        <div style="height:200px;width:200px"
          class="my-5 mx-auto spin border border-dark border-5 rounded-5 shadow-lg um-spin">
        </div>
      </div>
      <div class="p-2  text-center">
        <p>Crank up the speed. Add the class <code>um-spin-fast</code> to go twice as fast.
        </p>
        <div style="height:200px;width:200px"
          class="my-5 mx-auto border border-dark border-5 rounded-5 shadow-lg um-spin-fast">
        </div>
      </div>
      <div class="p-2  text-center">
        <p>Chill out. Add the class <code>um-spin-slow</code> to calm down and go real slow.
        </p>
        <div style="height:200px;width:200px"
          class="my-5 mx-auto border border-dark border-5 rounded-5 shadow-lg um-spin-slow">
        </div>
      </div>
    </section>

And the CSS:

/* Infinite Spinning Animation */
.um-spin {
    animation: spin 3s linear infinite;
}
.um-spin-fast {
    animation: spin 1.5s linear infinite;
}
.um-spin-slow {
    animation: spin 6s linear infinite;
}
@keyframes spin {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

This is fairly simple. We are using transform: rotate() to rotate the 200px square divs. All that the .um-spin classes do is apply the animation spin. One rotation will take either 1.5sec(.um-spin-slow), 3sec(.um-spin) or 6sec (.um-spin-fast). And then infinite simple tells it not to stop.

The keyframes are very simple. We go from 0 degrees to 360 degrees.

News Ticker Animation

Many of the solutions for the news ticker style animation involved writing JavaScript. I've got nothing against that, but I simply wanted a pure CSS version. After looking at a few CSS builds, I modeled unMove's off of a solution I found on Nolte here.

Here is the html from the example site:

        <div class="um-news-wrap">
          <div class="um-news-tick">
            <!-- free handdrawn vectors used from https://goodstuffnononsense.com/ -->
            <img src="./img/earth@4x.png" alt="" class="um-news-item">
            <img src="./img/saturn@4x.png" alt="" class="um-news-item">
            <img src="./img/mars@4x.png" alt="" class="um-news-item">
            <img src="./img/jupiter@4x.png" alt="" class="um-news-item">
            <img src="./img/venus@4x.png" alt="" class="um-news-item">
            <img src="./img/uranus@4x.png" alt="" class="um-news-item">
            <img src="./img/neptune@4x.png" alt="" class="um-news-item">

            <img src="./img/earth@4x.png" alt="" class="um-news-item">
            <img src="./img/saturn@4x.png" alt="" class="um-news-item">
            <img src="./img/mars@4x.png" alt="" class="um-news-item">
            <img src="./img/jupiter@4x.png" alt="" class="um-news-item">
            <img src="./img/venus@4x.png" alt="" class="um-news-item">
            <img src="./img/uranus@4x.png" alt="" class="um-news-item">
            <img src="./img/neptune@4x.png" alt="" class="um-news-item">
          </div>
        </div>

and the News Ticker CSS:

/* Scrolling News Ticker Animation */
.um-news-wrap {
    overflow: hidden;
}
.um-news-tick {
    display: flex;
    animation: news-ticker 6s linear infinite;
}
.um-news-tick:hover {
    animation-play-state: paused;
}
.um-news-tick-no-hover {
    display: flex;
    animation: news-ticker 6s linear infinite;
}
.um-news-tick-reverse {
    display: flex;
    justify-content: flex-end;
    animation: news-ticker-reverse 6s linear infinite
}
.um-news-tick-reverse-no-hover {
    display: flex;
    justify-content: flex-end;
    animation: news-ticker-reverse 6s linear infinite
}
.um-news-tick-reverse:hover {
    animation-play-state: paused;
}
.um-news-item {
    width: 16rem;
    /* min-width helps svgs behave properly in the scroll without having to manually set their height or width */
    min-width: 16rem;
    margin: 0 1rem;
}
@keyframes news-ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-126rem, 0, 0);
    }
}
@keyframes news-ticker-reverse {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(126rem, 0, 0);
    }

It is not as elegant as a JavaScript solution, but it works for our purposes. The first div with class=um-news-wrap sets 'overflow:hidden'. This hides everything outside the edges of the div.

The second div is what will move from side to side. This is the actual ticker. It's going to be twice as wide as the container because we're putting two copies of the items in it. This is so there's no stuttering in the animation.

As the first set of icons goes from right to left, the second set will then start scrolling across the viewable area. At the end of the animation duration, the first set will be ready to display immediately as the second set is scrolling off the viewable area.

Without the duplication, halfway through the animation duration, there would be nothing scrolling across and then at the start of the next iteration, the original strip of images would pop into place. Below is a side by side example. The seamless setup with duplicate images is on the left, and the non-duplicate version is on the right 👇

Setting that overflow to hidden lets us manipulate the div in a way that looks seamless.

You'll notice that .um-news-item sets width and margin for the items. This is the hacky part. We are hardcoding widths both here and in the keyframe transform in order for the scrolling to work as intended. This only works with 7 items in the example because that's how I've calculated the widths.

16rem * 7 items + 2rem * 7 items = 126rem total

So, yeah, JS would be simpler. But this is a CSS project, and we like hacky things! 😂

Contributions

Last but not least, the beauty and the joy of open-source is the community. I've written up a CONTRIBUTING guidelines file, and welcome your input on this project.

This was a big motivation for taking on this project - I want to see what it's like maintaining a public, open-source project.

So, please hop over to the repo, give it a star, make a fork, read the guidelines, check out the issues, and contribute away! 🙌

Thank You

I appreciate you reading through this, and hope that you learned something helpful! If you did, let me know!

You can find me on Twitter, and I'd love to say hey 👋 https://twitter.com/EamonnCottrell

Our mission is to provide a free, world‑class education for anyone, anywhere.

-Khan Academy

freeCodeCamp's mission is to help people learn to code for free.

-freeCodeCamp

Khan Academy

Khan Academy is an online learning platform offering practice exercises, videos and more. It is primarily for K-14 material as well as free tools for parents and instructors.

It's staggering to me the amount of material present on the platform, and the quality with which it's presented.

Khan Academy was founded by Sal Khan after he began tutoring family members online. He started posting his videos on YouTube in 2006, and incorporated as a non-profit in 2008.

The pre-funding early days of Khan Academy ran parallel to my return to college in the late 00's. Shortly after significant grant money began to bolster the platform, I began to use it extensively.

I took my first Calculus course in the spring of 2012, and it was a system-shock experience. I quickly realized I'd have to relearn substantial chunks of trigonometry in tandem with the Calculus work to keep up with our professor.

Dr. Shive, like many college professors at the time, recommended Khan Academy to any (all) of us who were struggling to keep pace with his instruction.

I spent many hours on Khan Academy relearning the trig and reinforcing the Calculus that semester.

And you know what happened?

1. I fell in love with both subjects
2. I fell in love with learning, in general
3. I realized the potential for educational content online

🏫 New School

I'd had some wonderful professors through the years. Having returned for my first degree at age 25, I was more receptive to subjects and instruction than before.

Profs. Bishop, Switzer, Kelly, Prenshaw, Fiser, Culpepper, Brister and Parakkal were a few standouts that had life-long impacts on my education and my career afterward.

Add Sal Khan to the list. Particularly because of his early instructional videos in mathematics and physics. I was so impressed with the quality of content he was producing even before the videos themselves became as polished as they are today.

As a result of my experiences that final semester during my business undergraduate degree, my love of learning was renewed. And my love for math and science was birthed.

I went back through two years of an engineering degree two years after graduating, and my love of web development and technology today stems from those formative years.

Khan Academy inspires me to

1. Continue learning
2. Help others in their journey
3. Leverage the power of the internet to do good

freeCodeCamp

Not long after my experiences with Khan Academy, freeCodeCamp was founded in 2014. This was right when I returned to college in an engineering program.

freeCodeCamp is a free online coding bootcamp with challenges, projects and verified certifications. In addition to the curriculum, there are hundreds of tutorials and videos available on their news blog and YouTube channel.

I dabbled in Python and Java over the course of two years. I found freeCodeCamp myself in 2016 after my first son was born and I chose to exit formal university in favor of self-study.

I also used Codecademy and edX a bit, but was always drawn to freeCodeCamp because of its crystal clear mission.

The for-profit market is very crowded, especially as bootcamps have become a mainstream, albeit expensive, route to learn many specific skills. They can be a useful tool, but I couldn't help but feel that the value proposition was skewed.

Through a combination of listening to Quincy's personal story and motivations for beginning freeCodeCamp and my own experience working through a bit of the curriculum, I could tell that it was a special platform.

The impetus for growth is placed on the individual. And all the certifications are project-based. I was able to go through the tutorial sections just like I have come to expect from any number of sites.

But rather than getting stuck in tutorial hell, the projects are just difficult enough to force you to go beyond the lessons into external documentation to solve.

Deeper Learning

Being pushed outside my comfort zone is a healthy thing. I've recently completed the Relational Database certification, and it was very challenging at times.

It is still in beta as of this writing (08/2022), and was available either as a VSCode + Docker experience or in a web-based course delivered via integration with CodeAlly.

This caused all kinds of problems.

But you know what?

It was incredibly impactful. The problems I encountered deepened my learning when I was able to set frustrations aside and come to grips with the fact that web development and computer programming is wrought with bugs and problem solving.

It was fantastic practice in finding solutions rather than having them handed to me.

This continues to be my experience with freeCodeCamp as a whole. It inspires me to

1. Not give up in the face of seemingly impossible problems
2. Pay it forward as a contributor to the news blog
3. Be mission-based in my online ventures

Online Education

It's no secret that it's easy to start an online course, and it's often even easier to quit one.

My own start-stop relationship with both of these platforms is testament to that. But, I've kept coming back.

I've "wanted to learn how to code" since about 2013 when I first wrote some custom Google Apps Scripts for a spreadsheet at work.

But it wasn't until about 2019 that I got really serious and began to make progress past the introduction-level.

Don't give up.

Even when you give up!

Here's a screenshot of my first GitHub commit. It was in December 2012. My next commit was in July of 2019!

That's right, years went by. I'm pretty sure I started Harvard's CS50 like 5 times.

I did some coding in there, sure, but I largely was focused on my career, my family and traditional education.

But I never shut the door. And I'm so glad I didn't. These resources were there waiting for me when I came back.

Services like Khan Academy and freeCodeCamp always have open doors to free learning for anyone, anywhere!

Seeing how two people leveraged their own unique skillsets through technology to make the world a better place and to help millions of learners continues to inspire me.

Future Hope

I hope that I can pass on what has been freely given to me. It's one of the reasons that I've begun writing about my journey as a developer this year. I want to be able to help others along this journey by sharing my own experiences.

And I hope, whatever my future holds, that I can contribute to and build impactful tools and resources that serve others well!

Thanks for reading.

Come say hey 👋 over on Twitter: https://twitter.com/EamonnCottrell

My first experiences with coding were in middle school. I didn't quite realize it at the time, but I was writing rudimentary programs on our graphing calculators and having a ball programing conditional statements in a choose-your-own-adventure fashion.

Nothing really stuck, though. I had a penchant for accounting and numbers came easily, but I didn't invest into my math and engineering interests until much later.

My first college major was piano. That didn't last long. I took a long sabbatical during the truly pretentious days of the early 00's coffee scene to work as a barista and fantasize about owning my cafe.

When the froth settled, I returned to college. This time taking an assortment of histories, creative writing, statistics and anything else that seemed halfway interesting. Naturally, this leads to one of two places: English teachers and business majors.

I chose the later and it was not until the final semester of my senior year that I began second guessing this seemingly logical and well-rounded pathway.

Derivatives and starting over

I'd put off Calculus until the absolute last semester, and once the class began, it became apparent that a) I was going to have to re-learn trigonometry, and b) I really liked math.

So, while my classmates complained about the rigor with which our professor held us to, I soaked up the integrals and the sounds of chalk-on-slate while supplementing his lessons with Khan Academy material to fill in all the trigonometric blanks in my head.

This taught me another two things:

1. I really missed the boat when picking business as my major
2. There was a world of free educational material on the internet

The real world

My business degree gave me access to a "real job" at the company I had worked at through college. After a couple years, though, I began to get curious about other options.

I took a Calculus II summer class. (like you do)

I talked to a friend about cyber security.

I took one of the first MOOC's over at edX: an intro to computer programming with Python from MITx.

I decided I was supposed to be an engineer.

School and kids 👶

Another degree seemed the logical step if I was going to hop careers into engineering. So I went back part time while working and took the first two years' worth of an engineering degree. You know: all the easy stuff...Cal III & IV, Physics, Chemistry, Differential Equations, Linear Algebra, Engineering Mechanics...oh, and a Java course that was absolutely dreadful.

I knew engineers designed and built stuff. And I knew they got paid well. I was loving learning, and began to try and figure out what branch of engineering I would go into.

I decided Civil. Then Computer. Then Electrical. Then Nuclear. Then Civil again...maybe Environmental. Then Software.

I really didn't have a clue, and I was continuing to manage the chain of cafes I had been employed at for years. My previous pipe dream of ownership seemed like a possible future. But did I want that any more?

My wife and I had our first child 👶 during the final semester of that two year pre-engineering degree in the spring of 2016, and I began to take a hard look at the options I had:

1. Continue in a state college engineering program-probably in Knoxville, TN as we were about to move.
2. Transfer into ASU's online program
3. Pivot into either software development or a hybrid path

I was pretty sold on a traditional degree being valuable to my situation. I enrolled in ASU, but at the same time got a promotion at work with some solid assurances for my family. I pulled out of ASU in order to move from Mississippi to Tennessee, and began to scout out programs at UT.

Over the course of all this time, I'd tinkered online with Codecademy, freeCodeCamp, Coursera and edX. I'd learned enough of HTML, CSS, and basic programming concepts with Python, Java and Javascript to understand the basics but I wasn't really sold on going the software route yet.

Opportunities continued to open up at my day job, and we had our second child 👶👶 after moving to Knoxville. I was unable to devote my full time to pursuing the last two years' of a degree, and I was unable to start over in a new career.

I felt pretty stuck: I really wanted to pivot, but it just didn't seem possible. I looked at a masters program in Data Analytics, but the timing and logistics didn't work out for it either.

Web Development

Every six months or so, I'd dabble back in freeCodeCamp or Udemy and get my creative juices flowing for web development. I stumbled across the Indie Hackers community. I began listening to entrepreneurial podcasts. I became intrigued with a new idea: web development as a pathway into engineering and/or entrepreneurship.

Maybe I wouldn't have to wait until timing permitted me to return to school.

When the 2020 pandemic hit, I dove back into freeCodeCamp with the expressed intent of honing my web development skills while I continued to manage my business. I began to hear many stories of people successfully learning on the side and eventually landing jobs or starting companies.

We had another baby 👶👶👶 in 2020 and were all-in on raising a family. My job was fully remote, and I had enough margin to study when and where I could on the side. My previous formal education pathway and traditional engineering school slipped further into the background.

I'd still love to go through a masters program some day, but it doesn't serve an explicit purpose right now.

I began to actually put together some small projects, I began to find ways to automate spreadsheets at work using code, I began to document some of my processes and progress.

I began to have a blast.

I really enjoyed the process of building things. I was fascinated by the stories of ordinary people building extraordinary things on the internet using little more than the skills I saw that were within my grasp.

Furthermore, I saw the opportunity to create digital products for a potential worldwide audience pool rather than relying on physical good in a fixed place and time.

Keep leaning forward 📈

I'm in a unique situation. I have a great job with benefits that would be hard to replace in an entry level position. Throughout the course of the last two years, I've worked at optimizing my role there by automating what I can and then using any free time to continue to learn and develop my technical skill set.

Certifications are certainly a slippery slope. It's easy to get caught in a pattern of hopping from one to another, but I have found value in pursing a few, and ultimately using them as guide rails to learn specific things I'm interested in through projects.

freeCodeCamp is great at this: all their programs use project based learning techniques where you learn enough to build a user-story-specified project at the end. I just wrapped up their Relational Database course and it was a wonderful learning experience in SQL and troubleshooting.

Google has several programs they've launched over the past couple years, and I completed their data analytics one to sharpen my skills earlier this year.

Hashnode's hackathons have been a great tool as well, giving opportunities to flex and stretch skills while competing. I built a very small project for my very first hackathon experience earlier this year.

In January of 2022, Quincy (founder of freeCodeCamp) posted a challenge which I've just finished up. It included blogging as part of the developer path he laid out, and I've found that writing has been a great tool to utilize in my learning process.

My 222 day version of #100DaysOfCode

After accepting the "Become a Dev" challenge, I did what all good students do: I built a new spreadsheet. 😂

Here's my track record for the last 222 days' worth of that journey. And it's a testament to how long I can take to complete 100 days of coding!

To be fair, we had our fourth (and final? 👶👶👶👶) child in May, so I knew that I was going to likely be having forced breaks in my coding streak.

Even so, I managed to stick with it. And I think I've been able to maintain a healthy balance of work + family + exercise + learning.

Not plowing through to the point of exhaustion has actually been a critical lesson learned from these last 222 days. It's important to keep margin in my life. I need healthy relationships in and outside my family. I need to be reading books (fiction, not coding), listening to music, running, ect.

Those extra-curricular activities kept me from coding every single day, but they also kept me more sane and healthy than I would have otherwise been.

Next

I don't know what's next, career-wise. But I know I'm going to be coding along the way.

I don't know if I'll truly seek another job or keep doing this on the side. But the more I code, the more intrigued I am with roles outside of just a "programmer".

Developer relations, product management, startup founder, data scientist and more all interest me.

I know this: I'm going to keep leaning forward and learning.

I'm currently writing on Hashnode and freeCodeCamp.

I've just released the v0.1.0-alpha of unMove, a css animation library that I'm building to learn a few things:

1. Proper use of GitHub, PR's and codebases
2. Maintaining an open source project
3. Structured project management
4. Collaboration with others

As disparate as my journey to code has been so far, I'm truly excited to see where it takes me next, and I look forward to the doors that open...especially the ones I didn't realize were there to begin with!

Come say hey on Twitter. You can find me here: https://twitter.com/EamonnCottrell

Originally published on freeCodeCamp.

Images make many things better. And Google Sheets is one of those things.

The easiest way to add an image to Google Sheets is to simply insert one into your sheet.

But if you have added many images this way, you'll quickly tire of the multiple clicks it takes to do so. Especially if you have to add images often, or if you have to add the same images to multiple sheets.

In this article, you'll learn how to add many images from their URLs that you can dynamically toggle between in a dropdown list. We'll cover:

• Data Validation for creating a dropdown list
• Named Ranges to make formula references easier and cleaner
• The VLOOKUP function to display the right image from the dropdown list
• The REGEXEXTRACT function to extract a string from a URL (don't worry, it'll make sense 😉)
• The IMAGE function to display the image from a URL address
• We'll use the ampersand (&) operator as well as regular expressions (Regex)
• We'll also make our sheet look good by removing gridlines, changing the font, adding borders, colors, and a drop shadow effect behind tables

How to Setup the Project 📐

You can follow along with the sheet I'm using for everything we'll discuss:

https://docs.google.com/spreadsheets/d/1rFU2gPy6rU8IKFDmsxKHYCf0KGVHkcumQ5O5QCf156M/edit?usp=sharing

Make a copy if you want to edit it yourself.

All cell and range references below will be from this sheet so you can easily look and see what I'm talking about.

I've also made a folder of images here that is publicly shared so all this works. You don't have to make a copy of this unless you just want to 😀.

How to Use Named Ranges in Google Sheets 📛

Named ranges make life easier.

You don't have to use them, but it makes references in functions easier since you'll be writing the name of something instead of a sterile cell reference.

We'll use three of them:

1. B4 = itemSelect This is the cell where our dropdown list will live.
2. B8:G13 = pictureMatch This is the range for our VLOOKUP function. It contains the names of the pictures we'll display followed by their respective URLs.
3. B8:B16 = pictureName This is the first column of the pictureMatch range for referencing just the names in our data validation cell.

To create a named range, simply highlight the range, select Data -> Named ranges from the toolbar, and name it.

How to Perform Data Validation 📃

We'll use data validation to create a dropdown list in B4. Same deal here – just highlight the cell (or range) and select Data -> Data validation from the toolbar:

Select List from a range, and then =pictureName (because we named that range) for the range. Alternatively, you can declare the range explicitly.

There are additional options to configure if you want to change anything:

If you select reject input, you can have a custom message pop up whenever an invalid choice is entered:

You might want to make your message more helpful than this one.

How to Use VLOOKUP 📊

VLOOKUP is an incredibly useful function. It takes four arguments:

=VLOOKUP(search_key, range, index, [is_sorted])

=VLOOKUP(itemSelect,pictureMatch,3,0)

We'll use itemSelect for our search_key and pictureMatch for the range because we want to find itemSelect in that range. Then the 3 for index gets the value in the third column in that range.

(It's 3 in our example because we merged the cells in columns B & C for our formatting, but VLOOKUP still counts both of them).

Finally, the zero sets is_sorted to FALSE. Our data is not sorted, and we want an exact match.

How to Use REGEXEXTRACT 💾

It happened: I found a real world use for Regular Expressions. 😳

This section of freeCodeCamp's Javascript certification was particularly confusing for me, and it was good to revisit a small portion of it here in the wild.

Because Google Drive is quirky, and we're sort of hacking a free option here, we need to alter the URLs to our images in order for the IMAGE function to work properly.

This Stack Overflow answer was helpful for me.

We need to build a URL by taking this:

https://drive.google.com/uc?export=download&id=###

and replacing the ### part at the end with the ID we extract with the REGEXEXTRACT function.

Looking at the URLs we copied over, we can see a pattern. Everything after the /d/ and then before the next / is the ID.

Here's an example of one of our image URLs: https://drive.google.com/file/d/1IaO08gj3GWIUQDAnzKEob62Gcl87ufuN/view?usp=sharing

You can see this at work by itself in B26 of the example spreadsheet as the function grabs everything between those two markers:

=REGEXEXTRACT(D9,".*/d/(.*)/")

This extracts everything between the /d/ and the /

How to Use the IMAGE Function 📷

Okay. We've got the disparate pieces figured out. I know the pieces fit. 🎵

Let's put them together.

All of our work was to get one cell ( B4 ) to provide data to the IMAGE function.

Image takes one argument and three other optional ones:

IMAGE(url, [mode], [height], [width])

We build the URL by combining the required beginning of the URL which I've got in J17 using the ampersand (&) operator with our REGEXEXTRACT function. And within our REGEXEXTRACT function we use our VLOOKUP function to get the URL of whatever image we've selected in the itemSelect cell.

Whew.

But, cool, right!?

If you feel lost in a recursive nightmare, I encourage you to pull up the example spreadsheet and examine the parts of the function in F4 piece by piece. 👍

How to Format Your Sheet FTW 💯

These few details can turn up the volume 📣 on an otherwise mundane spreadsheet.

This is likely the only place you'll find a NIN gif in an article about spreadsheets today.

I love a hard drop shadow, and we can achieve this by manipulating the row and column sizes around a particular cell or range, using the merge cell option for our main range, and then using a fill color around the right side and bottom.

Click the lines between the column headers to drag and adjust the widths and heights of the columns and rows.

Cells are the main appeal of spreadsheets, but in some cases hiding the gridlines can make your sheet standout. I opted for this approach in this project.

Select View->Show->Gridlines.

As much as I appreciate Arial, I will typically opt out of the default font immediately.

Click the Font Dropdown in the Toolbar. It's usually smack dab in the middle:

And just choose whatever font you'd like.

There you have it!

Thanks for Reading! 🙏

Follow me on Twitter to see more content like this: https://twitter.com/EamonnCottrell

Thanks!

In JavaScript, null is a primitive type intentionally containing the value of null. Undefined is a primitive type and represents a variable you declare without initiating a value.

So, null is nothing and undefined is just missing something. 🤣

Not super helpful, I know. Let's dive deeper.

How to Define Null and Undefined Values

An example will help. Below we declare two variables. Let's keep it simple and use null and undefined to compare outcomes since they are sometimes confused because of their similarities.

//declaring two variables: one null and one undefined.

let leviticus = null;
// leviticus is null

let dune;
// dune is undefined

leviticus is intentionally without an object value (null). Whereas dune is declared, yet it's unintentionally missing a value (undefined).

How to Check for Null with typeof()

You can check for null with the typeof() operator in JavaScript.

// typeof() will return 'object' when called on a null variable

console.log(typeof(leviticus))
// object

console.log(typeof(dune))
// undefined

Curiously, if you check with typeof(), a null variable will return object. This is because of a historic bug in JavaScript.

How to Check for Null with Equality Operators

Another curiosity is that when you loosely check for equality using double equals ==, null and undefined will return true.

console.log(leviticus == dune)
// true

console.log(leviticus === dune)
// false

console.log(leviticus == null)
// true (but not as good a habit to use as strict equality shown in next example)

But when you strictly check for equality using triple equals ===, null and undefined will return false.

This is because null and undefined are both falsy in JavaScript. Falsy means that a value is considered false when encountered in a Boolean (true or false) context.

JavaScript uses coercion to coerce values from one type to another in order to be able to use them in a Boolean context.

But by strictly checking for equality, you can see that they are in fact not equal.

##How to to Check for Null with Strict Equality

The best way to check for null is to use strict and explicit equality:

console.log(leviticus === null)
// true

console.log(dune === null)
// false

How to Check for Null with the Object.is() Method

An equally foolproof way to check for null is to use the built-in Object.is() method:

console.log(Object.is(leviticus, null)
// true

console.log(Object.is(dune, null)
// false

Summary

• null is a primitive type of a variable which evaluates falsy, has a typeof() of object, and is typically intentionally declared as null
• undefined is a primitive type of a variable which evaluates falsy, has a typeof() of undefined, and represents a variable that is declared but missing an initial value.
• null == undefined evaluates as true because they are loosely equal.
• null === undefined evaluates as false because they are not, in fact, equal.
• <null_variable> === null is the best way to strictly check for null.
• Object.is(<null_variable>,null) is an equally reliable way to check for null.

Take heart! As you've probably gathered, there are a plethora of brain teasers in the JavaScript ecosystem like this. But when you break it down, you can confidently understand them.

Thanks for Reading!

I hope this was a helpful breakdown for you. Keep coding, and keep leaning forward!

Come say hey to me over on Twitter: https://twitter.com/EamonnCottrell

Have a great one 👋.

This article originally appeared on freeCodeCamp here.

Dates are a pretty fundamental concept. We use them all the time. And computers use them all the time. But parsing dates using JavaScript can be a little...well, interesting.

In this article, we'll:

1. Discuss date formatting
2. Turn a wee ol' string into a proper date object using JavaScript.
3. Parse a date object into a number
4. Show an alternative way to use arguments instead of strings to create a date object.

Dates are tricky, but they're also incredibly helpful to use. And once you spend a little time going over the basics, your confidence will grow.

What is the Date Format in JavaScript?

ISO 8601, of course! This is the name of the international standard for communicating date and time data. We need to be using this format when dealing with dates in JavaScript

Here's what this format looks like. You're familiar with it already – it just combines a date and time into one big piece of info that JavaScript can get cozy with.

// YYYY-MM-DDTHH:mm:ss.sssZ
// A date string in ISO 8601 Date Format

How to Use the new Date() Constructor in JavaScript

new Date() is the constructor to create a new date in JavaScript. Shocker! 😂

shocker If you don't pass anything into the new date constructor, it will give you a date object of whatever the current date and time is.

new Date()
// Thu Jun 23 2022 20:35:51 GMT-0400 (Eastern Daylight Time)

A new date created without any arguments returns the current date and time. Note that a date object can, and often should, contain a time down to the millisecond in addition to the month, day, and year.

How to Create a New Date With a String

You may pass a date string into new Date() to create a date object.

You don't have to specify a time when creating a date object.

new Date('2022-06-13') is perfectly valid. However, when you console log this new date, you'll see that a time will be automatically assigned even though we didn't declare one.

let aDate = new Date('2022-06-13')
// Sun Jun 12 2022 20:00:00 GMT-0400 (Eastern Daylight Time)

A string date without a declared time will still be assigned one.

This can create schisms in the matrix, and it is best to include a full date. For instance, since the local system time is used to interpret the date, depending upon where in the world your computer is, you could get different results from the same non-specific date.

So, when passing a string into new Date(), use a full date with hours:minutes.milliseconds.

A capital T separates the day component from the time component as shown below:

new Date('2022-05-14T07:06:05.123')
// Sat May 14 2022 07:06:05 GMT-0400 (Eastern Daylight Time)

Use the full day and time when possible

How to Create a New Date With a Number

You can also pass a number into a new Date() constructor. More on what the numbers represent below – but new Date(1656033105000), for instance, will return a legitimate date:

console.log(Date(1656033105000))
// Thu Jun 2022 21:12:06 GMT-0400 (Eastern Daylight Time)

Giant numbers represent dates too

How to Create a New Date With Arguments

More on this below too...You many pass up to seven arguments into new Date() as well, creating a simpler way to represent a date and time to the Date constructor.

new Date(2022,03,14,07,33,245)
// Thu Apr 14 2022 07:37:05 GMT-0400 (Eastern Daylight Time)

A descending list of arguments starting with the year and ending with milliseconds

What is Date.parse()?

So, an interesting thing happens if you were to use the parse method on a date object. It spits out a huge number.

Date.parse() tells us the number of milliseconds that have elapsed since January 1, 1970. This is helpful when comparing multiple dates. It's easier to compare and measure differences in dates when they are converted to numbers rather than strings.

let anotherDate = new Date(2012,07,12,12,00,234)
Date.parse(anotherDate)
// 1344787434000

Date.parse returns the number of milliseconds since January 1, 1970

Which is Better – Dates Made With Arguments or Strings?

When dating, learn to argue well for long term success. When using dates in JavaScript, use arguments over strings for long term success.

new Date(2022, 00, 12, 8, 01, 33, 456)

This can be a bit easier than creating a date using a string. The arguments are simply entered in descending order starting with the year, and ending with the milliseconds.

Only tricky part here: the month is zero indexed. So, January is 00.

new Date(2022,00,12,8,01,33,456)
// Wed Jan 12 2022 08:01:33 GMT-0500 (Eastern Standard Time)

Don't forget that the month is zero indexed when using arguments for date construction

How to Go Deeper With Javascript Dates

This only scratches the surface of the Date object. Check out MDN for a deep dive. As with all things, there is a treasure trove of information there.

You've got the basics now, though. Go put it into practice. You now know how to create a date object in JavaScript with new Date(). You can grab the current date and time by not passing anything into the constructor, or you can pass in a string, a number or arguments.

Thanks for Reading Thanks for reading! I write about design and development here: https://blog.eamonncottrell.com/

And you can find me on Twitter and LinkedIn.

Have a great one!

We're creating more bash files to do some of the heavy lifting and querying for us. Here are a list of commands used in Learn SQL by Building a Student Database: Part 2. They'll be useful to (definitely) my future self and (hopefully) you! 😁👊

Conditions ❔

There are all sorts of ways to ...sort 😊 and specify query results

1. LIKE && NOT LIKE: use this to query a table and find matches to certain criteria. SELECT * FROM courses WHERE course LIKE '_lgorithms'; will match any row with a word that has exactly one letter before the 'lgorithms' part.
2. ...LIKE '%lgorithms' will not constrain it to one letter in front of the 'lgorithms' part. So % lets anything come before.
3. ILIKE will ignore case. So you don't need to specify capital or lower case.
4. AND and OR conditions will enable you to combine query criteria. e.g. SELECT * FROM courses WHERE course LIKE '% %' AND course NOT ILIKE '%b%';. This will select rows with a space in it and without a capital or lowercase 'b' in it.
5. echo -e: this lets you use the escape character like '\n' to create a newline.
6. IS NULL: let's you query fields that are blank or empty. e.g. SELECT <column_name> FROM <table> WHERE <column> IS NULL.
7. IS NOT NULL: let's you query fields that are not blank or empty.
8. ORDER BY <column_name>: specifies the order in which results are displayed. Defaults to ascending (ASC) order. add DESC (descending) to the end of the query to reverse that displayed order. e.g. SELECT * FROM <table> ORDER BY <column> DESC.
9. To order by multiple columns, add those columns separated by commas at the end of the ORDER BY query. e.g. ...ORDER BY <column_name1>,<column_name2>. Now, if there are matching values from ordering by column1, they will order by column2. if you specify DESC while using multiple ordering columns, you will do that immediately following each column name in the query. ORDER BY <column_name1> DESC, <column_name2> DESC.
10. LIMIT: limits the returned number of rows from a query. The order of keywords matters in the query, too: You cannot put LIMIT before ORDER BY or either of them before WHERE.

Mathematics ➗

1. MIN && MAX: two of many mathematic functions. MIN & MAX find the lowest or highest values, respectively, in a column. e.g. SELECT MIN(<column_name>) FROM <table>
2. SUM: sums the values of a column.
3. AVG: averages the values in a column.
4. CEIL && FLOOR: rounds results to the nearest whole number. CEIL rounds up, FLOOR rounds down.
5. ROUND simply rounds to the nearest whole number. Add a comma and a number to round to a specified number of decimal places. e.g. SELECT ROUND(AVG(major_id),5)
6. COUNT: how many entries in a table for the column. e.g. SELECT COUNT(*) FROM majors counts total rows and SELECT COUNT(gpa) FROM students counts only those rows with non-null values in the gpa column.
7. DISTINCT: shows only the unique values from a query. e.g. SELECT DISTINCT(<column_name>) FROM <table>.
8. GROUP BY: works similarly to DISTINCT. e.g. SELECT <column_name> FROM <table> GROUP BY <column_name>. The advantage of using GROUP BY is that it allows you to add any of the aggregate functions like MIN, MAX, and COUNT to get more info from your results. SELECT COUNT(*) FROM <table> GROUP BY <column_name> will count the number of distinct column values in that query.
9. HAVING: use at the end of a query where condition must be an aggregate function with a test. e.g. HAVING COUNT(*) > 0
10. AS: rename a column. e.g. SELECT <column> AS <new_column_name>

JOINS

We tackled only FULL JOINS (and only those briefly) in my initial list of commands here. As you might imagine, there's plenty more to do with JOINS.

1. LEFT JOIN: gets all the rows from the left table (the table mentioned first (furthest to the left on the line) in the query). e.g. SELECT * FROM students LEFT JOIN majors ON students.major_id = majors.major_id
2. RIGHT JOIN: same thing only returns rows from right table.
3. INNER JOIN: combines the two above. Will return rows from LEFT table if they have a RIGHT table counterpart and visa versa.
4. USING: keyword you can use in the event that the foreign key has the same name in each table. e.g. SELECT * FROM <table_1> FULL JOIN <table_2> USING(<column>)

This article appeared first on freeCodeCamp's news publication.

I built a spreadsheet and wanted to display some of the data in a small table which would update based on the day of the week.

After some digging, querying seemed the best option to pull this off.

In this article, you'll learn several things about Google Sheets tables, functions, queries, data validation and formatting including:

1. Creating a clean, usable data table.
2. Creating a data validation drop down list
3. Naming ranges for easier use and cleaner data management
4. Querying basics including SELECT, WHERE and the TEXT() and TODAY() functions
5. The funky syntax to reference cells within Google Sheet queries
6. Where to go in the official docs for further information.

Google Sheets is Similar to SQL

Google Sheets indeed has a built in "Google Visualization API Query Language". Check out the docs here.

Some of the syntax is the same and much of the functionality is similar to SQL, so you should pick it up quickly if you are familiar with SQL at all.

I know but a little when it comes to SQL, but I was able to parse my way through some basic queries with little trouble.

In fact, the thing that gave me the most trouble was cell referencing syntax. And I hope this post can save you some head scratching that I went through today.

Setup Your Table

First things first: get all the data in a well organized table. This is sometimes the hardest part of any data analysis: simply getting the data in an orderly, usable format.

I used data validation for the days of the week to ensure I didn't have a typo in there since our query will depend on those days.

Create a Named Range

Select the entire table to create a named range. This will make things cleaner and easier in the next step. It's good practice to keep data as tidy as possible.

Confirm and name the range to save it.

How to Write the Query

Now, let's make another sheet to put our query into. I only need two columns for our data: one for the person and one for the task. Make room for more if your data requires it.

The first step requires a little trick to make the current day display when the sheet is loaded and for this to be used in our query.

There is a built-in =Today() function, but using it alone is not enough even when you change the formatting. They query won't recognize it as matching the days of the week text in our table.

Instead, wrap the Today() function inside the Text() function as shown below. The Text() function accepts a number and a format as arguments. When we pass it Today(), it can convert that date number into text using the format "dddd". Neat, right? 😊

In Google Sheets, =QUERY is also a built in function. As you type it in the cell (B22 in my example) you can click the drop down arrow in the top right to get more information on the parameters accepted.

We'll select our data. Type the name of the range you created and it will automatically select that table.

You can manually select the range for the table to query if you choose. But you want to be as awesome as possible, so use that named range! 🙌

We want to select and return the first two columns (the names and tasks) in our data sheet based on the fourth column (the day of the week).

The query reads =QUERY(heat,"select B,C where D='"&B21&"'",1).

And yes, that nastiness with the single quotes, double quotes and ampersands is necessary for the conditional statement we are creating.

We're telling the query to match the D column in our data sheet with the value in B21 which is now text thanks to our previous formula manipulating the day of the week.

The syntax to match the text in the cell is gross, but it's just how you have to do it.

That last parameter 1) is letting the query know that there is one row of headers to display (name, task).

And, voilà! We've got ourselves an automatically updating task list based on the current day of the week. All that's left is cleaning up the final result! 🎁

##Official Examples

I referenced this article from the QUERY function page on Google Support to learn, and it has a Google Sheet you can copy with a bunch of examples in it. Super helpful.

My Example Spreadsheet

Here is the sheet I built for this article. You are free to make a copy of it and use yourself.

Thanks for Reading!

I write about web design and development from a solopreneur's perspective at https://blog.eamonncottrell.com/ and you can find me on Twitter: https://twitter.com/EamonnCottrell

Have a great one! 🎉

I'm glad to be back in SQL for this course. Bash was great, but let's make some more databases!

If you, like me, need a cheat sheet for some of the PostgreSQL commands from the first course, check out my previous article in this series, A List of PostgreSQL Commands for Beginners. I'm pulling it up in a second tab now.

This course has us making a four table student database using data in two .csv files. One has a bunch of student data and the other a bunch of course data:

The first 30% of the course is a rehash of setting up the tables and beginning to insert data into them.

Then we combine what we learned in the bash course to create a script file.

New Commands

• cat <filename>: prints the contents of a file...can also be used to pipe the contents into a loop to do stuff to each line! 😃
  • for instance, this will read the major and course values on each row and then echo the majors

cat courses.csv | while IFS="," read MAJOR COURSE
do
    echo $MAJOR
done

• IFS: Internal Field Separator. Used to determine word boundaries, and defaults to spaces. So if we want to echo more than the first word of a major, we need to add this to our loop:

cat courses.csv | while IFS="," read MAJOR COURSE
do
    echo $MAJOR
done

• psql command can be used to run a single command and exit
• TRUNCATE <table_name>: delete all the data in a table. You can do this for multiple tables at once by separating with commas i.e. TRUNCATE <table_one>,<table_two>.

For me, the most difficult part in this course has been getting used to the syntax of writing in bash and not making silly mistakes that the CodeAlly tester doesn't like. It continues to be very particular that everything is written precisely as intended.

Finish Line & One Issue

By the end of this course, we've successfully programmed a bash file to loop through .csv files and add the items therein into a PostgreSQL database.

There is a part two that promises to get a little more advanced by combining information from multiple tables with join commands.

On the whole, this was a good exercise in a more practical example of building a database as most data will need to come from somewhere like a .csv file in the real world.

I have encountered a nagging issue that is addressed in the freeCodeCamp forums here. I've been unable to get a checkmark for completion back on my freeCodeCamp page after finishing the project.

There are several steps to take to remedy this, and it's happened I believe on every project in this certification. However, this is the first time that I've gone through all the steps a few times to no avail. Not a huge deal as it's not measured in the formal certification, but I hate not getting those progress checkmarks! ✔

Thanks for Reading!

Come say hey 👋 on Twitter, I'd love to meet you and get your feedback: twitter.com/EamonnCottrell