DEV Community: Shannon Crabill

focused breathing - A CSS animation to help with meditation and focused breathing exercises

Shannon Crabill — Mon, 11 Jan 2021 02:35:08 +0000

What I built

My Digital Ocean / DEV hackathon submission is focused breathing a CSS animation to help with meditation and focused breathing exercises.

Category Submission

Program for the People

App Link

focused-breathing-ogh7t.ondigitalocean.app/ or shannoncrabill.com/focused-breathing which redirects to the app hosted on Digital Ocean.

Screenshots

Screenshot of focused breathing in its default state.

The timing of the animation (expanding, holding, and contracting) is set to 8 seconds by default. The timing can be changed using the input field.

Here's a gif of the app in action.

Description

focused breathing includes a circle div that expands for 2 seconds, holds it's shape for 2 seconds, then contracts to its original size for 4 seconds. The breathing exercise involves inhaling through the nose as the circle expands. Holding the breath. Then exhaling through the mouth as the circle contracts.

Link to Source Code

scrabill / focused-breathing

A CSS Animation to help with focused breathing exercises

Permissive License

MIT

Background

I recently learned about focused breathing exercises as part of a meditation or calming routine. I kept forgetting the timing of how long to inhale, hold long do I hold, etc. So, I decided to make a little app to help me with the pacing.

I've been having fun experimenting with CSS animations and thought this would be an excellent opportunity to learn about the animation property, transitions, and @keyframes.

How I built it

I built *focused breathing* in two parts. The first version was an experiment with CSS animations and @keyframes. I wanted to see if I could achieve the transitions and cadence I wanted with only HTML and CSS. It was possible! No Javascript was needed for the original version, which can be found on CodePen.

For the second part, I wanted to see if I change the duration of the animation (which is in the CSS file) based on input from the user. I know I could get input values from the HTML file with Javascript, but could I pass those updated variables back to the CSS and render it to the page. It turns out this was possible too!

Here's how I approached building parts one and two and what I learned along the way.

Part One - HTML & CSS

Before I started coding, I was helpful for me to write down high-level steps of the focused breathing technique I had been taught.

It goes like this.

Inhale through the nose
Hold the breath
Exhale through the mouth for 4 seconds

The amount of time to inhale of hold the breath may not matter, but to make it easier from a coding perspective, 2 seconds to inhale and 2 seconds to hold a breath seemed reasonable.

Visually, there would be a small to medium-sized circle that would expand, cueing you inhale and contract when it was time to exhale.

Visualizing the Animation

Using @keyframes was the best want to handle the expanding and contracting of the circle so that I control the timing and pacing of each step. With @keyframes the stops or offsets range between 0% and 100%. The beginning or start of the animation would be 0% stop and the end would be 100%. Or, any number in between.

I've worked with @keyframes on other projects and had a difficult time visualizing what code I needed to write to achieve what I visualized in my mind.

It makes sense to map out what I wanted to happen like a timeline. A line segment with two endpoints could represent the timeline of the animation. The left endpoint would be the beginning of the animation cycle and the right, the end.

Some quick labels, notes and visuals and I have a timeline that looks like this.

https://i1.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/12/step3.png?resize=640%2C86&ssl=1

Translating the Timeline to `@keyframes`

Looking at the timeline above, it may look like we need 8 or 4 steps in the animation, but this is not the case. Each offset point in a @keyframe animation is a point where properties can be changed from their original values.

The circle starts small, then it’s changed to be larger than it was originally, then it holds that size, then it shrinks down to the size it was originally and the animation starts over. The @keyframe only needs 2 offset points (at the 25% and 50% marks) and the original styling of the circle handles the starting (and ending) visuals.

Similar to grouping other CSS attributes, multiple properties and offsets can be set at one time within the @keyframe declaration.



@keyframes breath {
 25%, 50% {
    background-color: lightpink;
    width: 200px;
    height: 200px;
    border-radius: 100px;
 }   
}

And, to make it a bit easier on ourselves, let’s divide the line into 8 even parts (1 part for each second of the animation).

The timing of the changes and width and height of the circle meant that I couldn't

The expanding and contracting of the circle can be handled with @keyframes.

Part 2 - Javascript

For the second part of this project, I wanted to add some customization. To start, I wanted to see if I could change the duration of the animation—which was 8s to start—to another value. Building an input field was straight forward, but how could that value get updated in the animation property?

In doing some Googling, I was reminded that CSS variables could be accessed and updated with Javascript using getComputedStyle and getPropertyValue. I was already using CSS variables for colors and sizes, so created a new one for timing.



:root {
    --timing: 8s;
}

And updated my animation property to include that variable (var(--timing)) instead of the hardcoded value (8s)



div {
   animation: breath var(--timing) ease infinite none running
}

Visually, nothing changed, which meant it worked! I could double-check the value of --timing by running the following in the Console.



getComputedStyle(document.documentElement).getPropertyValue('--timing') // 8s

And I could change it with the following and see the animation speed up dramatically.



document.documentElement.style.setProperty('--timing', '1s');

Then, by adding an input field onto the page, I could grab the value of that input, pass it into .setProperty and update the CSS.

Wrap Up

Overall, I learned a lot about @keyframes with this project! Drawing out what I had in mind made coding go smoother with less trial and error.

Looking back at this project, I tried for the first time, or became more comfortable with:

CSS Grid (centering things, amiright?)
CSS Animations (the animation and @keyframes property)
Manipulating CSS variables with Javascript ( getComputedStyle and getPropertyValue)
Continuous deployment (yikes to manually copy and pasting files like I usually do)

For future enhancements, some thoughts are:

The ability to change other variables (hold time is longer, shorter, etc)
The ability to start and stop (or, incorporate a timer for 5 mins of focused breathing, etc)
Sounds or music so accompany to indicate when you breathe in, breath out, etc.
A detailed tutorial on how to build your own focused breathing animation/app from scratch

Additional Resources/Info

Automatically Open the Current Directory in VS Code From Terminal

Shannon Crabill — Mon, 28 Dec 2020 21:45:48 +0000

Last year, I was blown away by some Terminal commands that I learned. My favorite one is open . to open a Finder window for whichever directory you are currently in.

At one point I had a similar command to instantly open a folder in VS Code (Visual Studio Code), but deleted it after I switched from VS Code to Atom. I’ve since switched back to VS Code and after begrudgingly dragging folders into VS Code to open them, I decided to figure out how to enable that command.

Luckily, it takes a few steps to activate.

With VS Code running, enter Command + Shift + P to open the Command Palette (or View > Command Palette from the menu bar)

A search bar will open up. Search for “Shell” or “Shell Command” and you should see one named Shell Command: install "code" command in PATH.

Select it and a confirmation Shell command "code" successfully installed in PATH. should pop up (for me the pop up appeared in the lower, righthand corner).

If you already have a Terminal session running, quit or restart it.
When you are in the directory with the files you want to open in VS Code, type code . (that is the word “code” followed by a space, then a period) and the folder will automatically open in VS Code.

The post Automatically Open the Current Directory in VS Code From Terminal appeared first on Shannon Crabill — Front End Software Engineer.

Orphan Branches in Git

Shannon Crabill — Mon, 14 Dec 2020 03:34:04 +0000

You may run into a situation where a branch of a project doesn’t need to share history with the main branch. I had this happen when I wanted to create a temporary landing page for a project I was working on deploying. The landing page would be a “coming soon” page with a short blurb, hosted on the domain the project will eventually live on. I had been working on this project for months, including building React for the frontend and Ruby on Rails for the backend. That’s a lot of files and git history for a temporary, static landing page.

I did some Googling and learned that git supports orphan branches. An orphan branch, not surprisingly, has no parents (meaning, git history) when it is created. The history of the orphan branch is separate from other branches in the repository, including the main or root branch it was created from.

Here’s a quick example of how to create an orphan branch and use cases.

Creating an Orphan Branch

In your project repository, an orphan branch can be created with the following Terminal command.

git checkout --orphan BRANCH-NAME

In my case, I want my new branch to be named landing-page. With the git checkout --orphan landing-page command, a landing-page branch is created and checked out.

Your terminal will print out something like this:

On branch main
nothing to commit, working tree clean
(base) mycomputer:orphan-branches myname$ git checkout --orphan landing-page
Switched to a new branch 'landing-page'

At first, nothing will look different than if we created a branch without the --orphan flag.

While on your orphan branch, running git log will return your current branch 'landing-page' does not have any commits yet.

(base) mycomputer:orphan-branches myname$ git log
fatal: your current branch 'landing-page' does not have any commits yet

Whereas git log on your main brain will return a list of all previous commits and commit messages.

(base) mycomputer:orphan-branches myname$ git checkout main
Switched to branch 'main'
(base) mycomputer:orphan-branches myname$ git log
commit 123.........................abc (HEAD -> main)
Author: myname <myname@email.com>
Date:   Mon Dec 28 16:08:50 2020

    initial commit of files to git repo
(base) mycomputer:orphan-branches myname$

In a use case like mine where your orphan branch does not need the files from the previous branch, type git rm -rf . to remove all content from that branch.

Note that this will also delete your .gitignore file so you’ll to have create a new one, if it’s needed.

You can then commit that change (removing all previous files) and start working in your empty, orphan branch.

Use Cases

What I liked about creating an orphan branch for the landing page, was that it made for one less repository or set of files to keep track of. I can still commit changes on the landing-page branch and push them to a remote server just like my main or primary branch.

Another plus is that apps like continuous deployment solutions like Digital Ocean or Netlify allow you to select which branch in your git repository it should deploy. Later, when I’ve finished my app on the main branch, I can make that the branch it listens to without having to do any additional configuration.

Resources

https://git-scm.com/docs/git-checkout

The post Orphan Branches in Git appeared first on Shannon Crabill — Front End Software Engineer.

Doing the `.split()` with Javascript

Shannon Crabill — Sat, 05 Dec 2020 23:57:45 +0000

I recently learned that the .split() method in Javascript can take in an optional second argument that is the number of times it’ll split a given string. It’ll ignore everything after the string has been split that number of times, even if there are additional matches.

In this post, I will explain how split() works, the arguments it takes in, and some example use cases.

Understanding `.split()`

If you are unfamiliar with .split() in Javascript, it is a built-in method for breaking up a string into multiple parts, based on the character(s) that you define. This is the format for .split() is as follows:

"string to split".split("character[s]_to_split_by", numTimesToSplit)

The parts that make up a valid .split() method are:

The string, or variable that references a string to be split. Required.
A character or string to use as the point of reference on where to split the string. Required.
A positive integer of the number of splits to make, after which .split() will stop evaluating the string. Optional.

Using the format above, if I wanted to split the string "I love tacos!" so that each word is its own string, I can do the following.

"I love tacos!".split(" ")

Which would return ['I', 'love', 'tacos!']. The original string is split on each empty space " ".

Assigning "I love tacos!" to a variable string, returns the same result.

let string = "I love tacos!"
string.split(" ")

Using the Optional `limit` Argument

Where I found using the optional limit argument helpful was if I wanted to split a string into separate variables, but didn’t need all of the string I was calling the function on.

Let’s say I had copy and pasted some HTML colors names, to use in an app I’m building. Each row contains the named color, it’s hex and rgb values. Picking a few samples, and putting each row as it’s own array item, we have something that looks like this.

const data = [
    "Gold #FFD700 rgb(255, 215, 0)",
    "Indigo #4B0082 rgb(75, 0, 130)",
    "Chartreuse #7FFF00 rgb(127, 255, 0)",
    "WhiteSmoke #F5F5F5 rgb(245, 245, 245)"
]

Splitting each array item on each word break (" "), returns this.

['Gold', '#FFD700', 'rgb(255,', '215,', '0)']
['Indigo', '#4B0082', 'rgb(75,', '0,', '130)']
['Chartreuse', '#7FFF00', 'rgb(127,', '255,', '0)']
['WhiteSmoke', '#F5F5F5', 'rgb(245,', '245,', '245)']

This works. But it’s a little messy if we don’t care about the RGB values.

If we pass in 2 as the second argument .split() will ignore everything after it’s made two split groups. If we call .split(" ", 2) on each array item, the return looks like this instead.

['Gold', '#FFD700']
['Indigo', '#4B0082']
['Chartreuse', '#7FFF00']
['WhiteSmoke', '#F5F5F5']

Use Cases

Here’s another example where using the limit argument with .split() is useful.

Let’s say we have a bunch of phone numbers as strings and we want to assign the area code to its own variable. If our phone numbers are formatted like "555-867-5309", we can split on each hyphen.

let phone = "555-867-5309"
let areaCode = phone.split("-")

It works, but now areaCode returns ['555', '867', '5309']. With one small change to the above code, we can cleanly assign the area code to it’s own variable and ignore the rest of the phone number.

let phone = "555-867-5309"
let areaCode = phone.split("-", 1)

After we’ve made 1 split on the first hyphen, the .split() operation stops. areaCode now returns ['555'].

Additional Information

.split() can break strings into smaller parts, but here are some additional things to keep in mind.

You can split by more than one character
The character[s] to split by are case sensitive
Using .split() does not modify the original string
.split() can be used together with other built-in methods like .join()

Resources

The post Doing the .split() with Javascript appeared first on Shannon Crabill — Front End Software Engineer.

How to Base64 Encode a String in Terminal

Shannon Crabill — Sat, 28 Nov 2020 05:09:15 +0000

While browsing some API documentation, I saw references to Base64 for passing credentials to the API. I had seen Base64 referenced a few times, but had no idea how to convert text into Base64.

So, I did some digging.

This post will outline how to encode (and decode) text into Base64 using the MacOS Terminal.

What is Base64?

I should share a little bit about what Base64 is. The MDN documentation explains the overarching concept of Base64 as.

Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.

You can think of Base64 is another way to represent binary or text data.

The conversion process is somewhat detailed, and I encourage you to check out the resources at the bottom of this article if you are curious about the benefits and technical details of Base64.

Converting Text into Base64

While reading those API docs, I had no idea how to create a Base64 string.

There are converters a few Google searches away. But, did you know there’s a Base64 command built into the MacOS?

To turn a string into Base64, open a new Terminal window, and use this format.

base64 <<< string

That would be base64 followed by a space, three less-than signs (<), another space, then whatever string you want to encode in Base64.

Here’s an example:

If I wanted to convert the string I love cheeseburgers into Base64, I would enter this:

base64 <<< "I love cheeseburgers"

Which would print out SSBsb3ZlIGNoZWVzZWJ1cmdlcnMK as a result.

Note: You only need quote marks around the string you would like to convert if it has space it in.

The following does not need quote marks, for example:

base64 <<< ilovecheeseburgers

If you're curious, base64 <<< ilovecheeseburgers returns aWxvdmVjaGVlc2VidXJnZXJzCg== which is very different from what base64 <<< "I love cheeseburgers" returns.

Decoding Base64

With a similar command, you can decode Base64 back into human, readable text.

Let’s say a friend of ours sent us the following code:

SSBsb3ZlIHlvdSBtb3JlCg==

To decode Base64, we add a -D flag before the three arrows and after base64.

Like this:

base64 -D <<< SSBsb3ZlIHlvdSBtb3JlCg==

Which returns I love you more. How sweet!

Base64 is Not Unique

While a Base64 string like SSBsb3ZlIGNoZWVzZWJ1cmdlcnMk looks random, it is not.

Each time I run base64 <<< "I love cheeseburgers" it’ll return the same result. If you run the same code, you’ll get the same result. And since a Base64 string can be decoded, it’s not appropriate for hashing passwords, storing API keys, etc.

Resources

The post Base64 Encoding appeared first on Shannon Crabill — Front End Software Engineer.

Open Graph for Personal Projects

Shannon Crabill — Sun, 08 Nov 2020 23:47:24 +0000

A way to make your posts stand out on social media is to include images. According to Buffer, Tweets with images can get up to 150% more retweets. So it makes sense to include some kind of visual element instead of dropping a link and calling it a day.

For a long time, I wondered how some links I would share would automatically get nicely formatted images, headlines and links. Was it possible to implement something like that on my projects so that I automate and improve the link-sharing experience?

Yes!

This functionality can be implemented using The Open Graph protocol.

I’ll walk through how I step it up on one of my projects.

Implementing Open Graph

The introduction says it well. In describing the Open Graph protocol, it says:

The Open Graph protocol enables any web page to become a rich object in a social graph.

The graph it refers to is an object that is created by including basic metadata tags in your webpage.

Your website probably has metadata tags like <meta charset="UTF-8"> or <meta name="viewport" content="width=device-width, initial-scale=1.0">.

The Open Graph tags use the same, self-closing <meta /> tag structure with some additions. Each Open Graph meta tag has property and content attributes. The property attribute, describes or categorizes the value in the content attribute.

For Open Graph to work, there are 4 required properties for each webpage.

Those properties are:

og:title
og:type
og:image
og:url

Detailed descriptions of these tags can be found in the Basic Metadata section of the documentation. But, they make up the core elements of those media-rich posts that we see on our Twitter and Facebook feeds.

Using my Halloweenti.me project as an example, my 4 meta tags look something like this.

<meta property="og:title" content="How Many Days Until Halloween?" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://halloweenti.me/" />
<meta property="og:image" content="https://halloweenti.me/my-image.jpg" />

Once my HTML file is pushed live, sharing the link to halloweenti.me automatically renders the image that I specified along with a title and URL to the website.

Looking Nice

Prior to adding Open Graph, sharing the https://halloweenti.me/ link in Discord looked like this.

An example of what the URL looks like without The Open Graph protocols

I mean, I think this site it awesome, but it’s probably not grabbing anyone else’s attention.

This is how it looks now.

How the URL looks after including an image that I specified, title and description.

Wow! That is easier to see and gives more context to a user who is just scrolling by. You can also see how the 4 required properties show up in the social media preview.

Conclusion

What I like about The Open Graph Protocol is that it’s relatively easy to implement and there are additional meta tags that can be added for richer content examples. I included a description for my project, but there are tags that are relevent for dated content like blog posts are articles.

I reccomend giving The Open Graph protocol a try so that your projects can better stand out on social media.

Resources

The post Open Graph for Personal Projects appeared first on Shannon Crabill — Front End Software Engineer.

A Beginner’s Guide to Managing React State with Hooks

Shannon Crabill — Sun, 25 Oct 2020 20:39:13 +0000

Managing state can be one of the more complex aspects of working with React as beginner.

What data should be managed by state versus props, which components need to access state and where state should live are all questions I ask myself when planning a new React project.

Redux is an alternative for managing state it may be a lot to add for a small or simple project.

While building an app that queries the Spotify API for an artist, based on the user input, it made since to store that input in state. That input value could be passed to the API, referenced in the UI (“Showing results for: adele”) or elsewhere in the app.

I learned to set up state as an object (state = { key: value}) but did not know this only works in class components! And mine were set up as functional.

Yikes.

I did not want to make the conversion right away, so I did a quick Google search for an alternative. I landed on the useState React Hook and had to give it a try.

Implementation

Hooks are a somewhat mysterious aspect of React. I had not used one until now. Similar to other features in React like componentDidMount, Hooks are built-in, modular functions of React. That’s it!

To get started using the useState Hook, it needs to be imported into your React file.

import React, { useState } from 'react';

Define State

Once useState had been imported into your file, you can create and set state values. For my app, I want to store the input from a text field in state.

Here’s what setting that up looks like:

import React, { useState } from "react";

function App() {
  const [input, setInput] = useState("");
}

What useState does is it sets up a state variable and a function that will update that variable. In my case, the variable is named input and the function that updates input is called setInput. The empty string ("") within useState is the default value for input.

From my understanding of the Using the State Hook docs, the state variable and it’s update function can be named anything. But, it makes sense to name them what they are/what they do, especially if there are multiple state variables.

Now, we’re ready to access and manipulate state within our app!

Reference State

Since state has been set up outside of a class, we do not need this.state to reference within our app. In the return() statement for App(), input is referenced as {input}.

Given the following example:

import React, { useState } from "react";

function App() {

  const [input, setInput] = useState("")

  // TODO: Write handleOnChange function

  return (
    <main className="App">
        <h1>Search for an artist</h1>

        <form>
            <input type="text" name="input" id="input" onChange={(e) => handleOnChange(e)} />
        </form>

        <h2>Showing results for: "{input}"</h2>

    </main>
  );

}

If the current value of the input was “adele”, the h2 tag would render Showing results for: "adele" to the page.

Update State

To update the input variable in state, we’ll use the setState variable we set up earlier.

In the code sample above, you see that the text input field has an onChange event. Each time the value of the text field changes (the user types in the field) a handleOnChange function is fired. This function will house the update function.

setInput could be used inline, but in my case it made more since to separate it into a handleOnChange function, since that function would perform additional operations.

To update state, we call setInput() and pass in the new value that will replace the current state.

Here’s what handleOnChange looks like in my example:

 function handleOnChange(e) {

    e.preventDefault();
    setInput(e.target.value)
    // TODO: Perform other operations
}

That’s it. The value of input has been updated.

Recap

To recap everything we’ve done:

We imported useState into our functional component.
Declared state variables and a function to update that variable with useState.
Referenced the value of our state variable input in our and rendered on to the page.
Updated input using our setInput function with the new value as the argument

And here’s what our App.js file looks like now:

import React, { useState } from "react";

function App() {

  const [input, setInput] = useState("")

   function handleOnChange(e) {

    e.preventDefault();
    setInput(e.target.value)

    // TODO: Query the Spotify API with the value of "input"
    }

  return (
    <main className="App">
        <h1>Search for an artist</h1>

        <form>
            <input type="text" name="input" id="input" onChange={(e) => handleOnChange(e)} />
        </form>

        <h2>Showing results for: "{input}"</h2>

        // TODO: Render results of API call to the page

    </main>
  );

}

This is the very beginning of what React Hooks can do. There are some limitations, rules and take some getting used to. I highly reccomend reading through their docs on Using the State Hook to see how useState compares to setting state in a class component.

Resources

The post A Beginner’s Guide to Managing React State with Hooks appeared first on Shannon Crabill — Front End Software Engineer.

You Don’t Have to Participate in Hacktoberfest

Shannon Crabill — Thu, 01 Oct 2020 17:48:57 +0000

The first of October. The official start of spooky season. And, if you follow the tech community, the beginning of Hacktoberfest.

Hacktoberfest is an annual event that encourages participation and contribution to open source projects. Sign up during the month of October, make at least 4 valid pull requests in public repos on Github and you can receive stickers and limited edition t-shirt.

I’ve participated in Hacktoberfest for the past 3 years and it can be a lot of fun.

It can also be a lot of work.

This is especially true if you maintain a project. Tag issues with hacktoberfest for visibility and your project will gain traffic and pull requests. Most of them may be considered “spammy”.

Each year, in September (or Preptember) the “get ready for Hacktoberfest”, “who’s looking for contributors” and “101 open source projects for beginners” posts go live, the emails to sign up come in. And it can all be a little overwhelming.

Especially with everything going on in the world right now.

This is why I’ll step in as your internet friend by telling you it is ok not to participate in Hacktoberfest.

Here are two reasons why.

Spare Time is a Luxury

I have a lot of feelings about personal projects and coding outside of work. On one hand, personal projects are good for learning a new skill, or as a side hustle. Any reason that you want to code outside of your 9-5 is valid.

But. Not everyone has the privilege of spare time.

Family commitments, second jobs, whatever. Extra time at a computer isn’t realistic for everyone. And that is ok. There can be pressure, even if it’s from ourselves, to try and do all-of-the-things. But it’s not always possible.

Please be realistic about what is important to you, your career, your family, etc. Be realistic about how much time exists in a day, week, month, etc and what time you can commit to.

Which brings me to my next point.

Self-care > Coding

Coding is a big part of my life. I love it. I do it as part of my job. I code in my spare time and yet…I find myself needing and wanting to spend more time away from the computer.

Perhaps you feel the same way.

As the days get shorter and the longest year of our lives comes to an end…reflect on how you are feeling. If you feel as tired and exhausted as I do. It may be time to focus on self-care, recharging, and coming back refreshed.

Self-care is whatever you need to do to recharge. As developers, I feel like there’s pressure to always be working on something, work/life balance tends to slip and, if you aren’t careful, burnout will set in.

Trust me, time away from a computer will allow you to come back with fresh eyes, a fresh perspective, and ready to pick up where you left off.

Please Take Care of Yourself

The main point I am trying to make here is that you do not have to participate in Hacktoberfest. You are no less of a developer if you sit out this year (or next year, or never participate). Do what you feels right to you and you will not be disappointed.

Photo by Mathew Schwartz on Unsplash

The post You Don’t Have to Participate in Hacktoberfest appeared first on Shannon Crabill — Front End Software Engineer.

Queer Eye Text Effect in HTML & CSS

Shannon Crabill — Sun, 20 Sep 2020 01:32:28 +0000

There’s never enough episodes of Queer Eye.

😭

To hold me over until the next season airs, I wanted to revisit the logo and see if I could recreate it in HTML and CSS.

The Logo

The logo effect has a couple of different elements that I need to figure out.

Matching the font
Picking the colors
Offsetting the colors

Fonts

The font used is likely, a custom, sans-serif font. What makes it interesting is that the e is stylistically a lowercase e and the Q is uppercase. Yet, visually have the same weight, stroke thickness, etc. Finding a free font that matches that may be difficult, so for now, I’ll focus on finding a typeface that has the same vibe.

Kumbh Sans in Google Fonts has the modern look that I’m going for, so we’ll roll with it and fix the e later if I can. With our “QE” in an <h1> tag, our CSS will look something like this.

h1 {
     font-family: 'Kumbh Sans', sans-serif;
     font-weight: 300;
}

Which renders something like this.

Colors

Looking at the logo above, it seems to be made of blue, pink, yellow and black, with the yellow and blue having some transparency to make a bright green.

Let’s set up our colors as CSS variables.

 :root {
     --blue: rgb(0, 191, 255);
     --pink: rgb(255, 20, 147);
     --yellow: rgb(255, 255, 0);
     --black: rgb(0,0,0);
 }

With color variables, we can reference them like this color: --var(yellow).

Offsetting The Colors

The fun part!

Each of the colors is offset a little from the main text, but only to the left and right. We can get this effect by using a text-shadow.

Let’s do the first color.

h1 {
     ...
     text-shadow: 5vw 0 var(--pink);
}

Now, for the other colors.

You can specify multiple text-shadow effects at once, by separating them with a comma.

Let’s add the rest of our colors and see how it looks.

h1 {
     ...
     text-shadow: 
          5vw 0 var(--pink), 
          10vw 0 var(--blue), 
          15vw 0 var(--yellow);
}

Trippy.

Not quite the effect we are going for, but it’s getting close. I’ll make some adjustments to the text-shadow arguments, so that they shift to the left and right of the black text, without straying so far away.

By default, the first value, the X-coordinate, denotes how far to the right the text-shadow starts. A negative value can be used so that the shadow starts to the left.

And since most of our colors overlap, rearranging the order of the text-shadow properties, allows all the colors to be seen.

h1 {
     ...
     text-shadow: 
          2vw 0 var(--pink),
          -2vw 0 var(--blue),
          -5vw 0 var(--yellow);
}

Nice!

At this point, we’re only missing some green, created by a semi-transparent blue and yellow blending together. The opacity may take some tweaking, so I’ll add that as another CSS variable that I can then reference in the --blue variable.

:root {
    --opacity: .75;
    --blue: rgb(0, 191, 255, var(--opacity));
    --pink: rgb(255, 20, 147);
    --yellow: rgb(255, 255, 0);
    --black: rgb(0,0,0);
}

Putting it all Together

And our end result looks like this.

default-tab

Yasss!

Antoni, Tan, Karamo, Bobby, and Johathan would be proud.

Resources

The post Queer Eye Text Effect in HTML & CSS appeared first on Shannon Crabill — Front End Software Engineer.

Drab to Fab: Makeover Your Project README In 3 Steps

Shannon Crabill — Sat, 29 Aug 2020 21:44:39 +0000

Oh yeah! We’re giving your README a makeover!

The README will be one of the first things someone sees when they view your project. Think of it as the subject line to your email, or the elevator pitch to your presentation. The README is the opportunity to get someone interested in your open source project, or to convince them that you’re an awesome developer or simply to show off the cool project you’ve been working on in your spare time.

Yet, sometimes the README is forgotten. I get it, the code just needs to work sometimes. But, I highly encourage you to take a look at your project’s READMEs and iterate on them.

Here are 3 areas to focus on when updating or creating your project READMEs.

Describe Your Project

I know, this probably sounds obvious, but you would be surprised. Dig deep enough into my Github profile and you’ll find a few repos with the default, outdated content, or—gasp—no READMEs at all. Writing about your work is a whole, big topic I’ll go into detail on another time. But, for your README, it can be straightforward.

Some questions to ask yourself when writing your project description include:

What technologies does this project use?
How can someone else use it?
Why was it created? Or, what problem does it solve?
Is this repo part of a bigger project or does it exist on its own?

Overall, a few lines explaining what your project is, what you used to build, and why, may be all you need to include. Think of the description as a concise, one-paragraph summary to your project to entice someone to know more.

Installation Instructions

Raise your hand if you’ve come across a README that had vague installation instructions!

To help save someone else from experiencing this, with my projects, I like to take a literal step by step approach to getting it up and running locally. I’ll start by doing a fresh clone of my repo on my Desktop or anywhere other than where I usually work on the project locally.

Then, write down exactly the next step is to getting it up and running. Include if there are any packages to include or API keys to fill in or if a certain command needs to be run in a specific directory. I like including the exact terminal commands in tick marks, for example git clone https://github.com/scrabill/cactus-buddy, for easy copy and pasting from the README.

Link To a Live Version

This may not apply to all projects, but it’s something to think about. If the goal of creating personal projects is to have something to show potential employers, you cannot always expect someone to be able to—or have the time to—clone it to their machine, get it up and running and then navigate the codebase.

In my bootcamp experience, a stretch task was to have the portfolio project built deployed online so that they can be used/viewed in the browser. Not only does this make a project easier to look at, experience, evaluate by others, but it also shows additional skills at being able to use cloud applications like Netlify, Heroku or Amazon Web Services.

Summary

If you can, I encourage you to take a critical eye at your own READMEs and do an audit. Put yourself in the shoes of someone who is coming across your project for the first time, with no context on what it’s about.

Some things to think about:

Does your README accurately explain what your project is?
What about how you built it?
If the project is open to contributions, does the README clearly state that?
Are the installation instructions missing any gaps or not work as expected?

Consider getting a friend, technical or non-technical, to take a look at your README and offer their initial thoughts. Other developers will likely be seeing your project, but so may potential hiring managers and recruiters. They may only have a few seconds to look at your project’s README to evaluate if you have the technical and communication skills they are looking for in an individual contributor.

What updates will you make to your README today?

Cover image by me!

The post Drab to Fab: Makeover Your Project README In 3 Steps appeared first on Shannon Crabill — Front End Software Engineer.

Amending Git Commits

Shannon Crabill — Sat, 15 Aug 2020 05:31:57 +0000

A best practice when using version control like git, is that commits should be small and relate to one aspect of your codebase. For example, a commit should include a correction for one function, in one part of your app, and not and update to a function, a new fetch request, and documentation changes. Think about it this way. If you had to revert or correct a change in a commit that touched many files or many aspects of a project, it would take more work and increase the likelihood of errors.

Similar to writing functions with a single responsibility, your commits and commit messages should equally concise.

While making some updates to a project of mine, I made the mistake of lumping two groups of code changes into one commit. Since this is a personal project, that likely I will only work on, it’s not the end of the world. However, I try to follow best practices whenever I can. Previously, if I lumped to much code into one commit. I’d make a new commit, reverting the changes (or, what changes I could remember 😬). Then, make a new commit, with part one of the changes I made the first time. Then another commit with part two of the changes.

This is messy and again, creates room for error.

Fortunately, there is an easier way.

git commit –amend

With the command git commit –amend you can do two things.

Update the message associated with the most recent commit
Update the content associated with the most recent commit

I’ll walk through how to do the latter, although the steps are similar.

Note. Your terminal set up or exact commands may looks different, depending on your computer set up. I use a Mac OS, Bash Terminal and either Atom or Visual Studio Code for editing files.

Oops! Too much code.

In my scenario, I was making some updates to the CSS of my personal website. I replaced any hardcoded hex values with CSS variables and adding some smooth scrolling behavior. Here’s a simplified version of my “oops” commit with too many code changes.

root {
     --primary-color: #981ceb;
     --secondary-color: #111111;}

html { 
     scroll-behavior: smooth;
}

a, a:visited, a:hover, a:active { 
     border-bottom: 1px solid var(--primary-color);
     color: var(--primary-color);
     text-decoration: none;
}
...

That scroll-behavior attribute shouldn’t be there! But it’s ok, we can amend this commit, get rid of that extra code and keep our commit history nice and clean.

Updating the Commit

First, in the same branch as the “oops” commit, make your changes. In my case, I’ll remove the scroll-behavior line. My CSS file now looks like this.

root {
     --primary-color: #981ceb;
     --secondary-color: #111111;}

a, a:visited, a:hover, a:active { 
     border-bottom: 1px solid var(--primary-color);
     color: var(--primary-color);
     text-decoration: none;
}
...

Note. At this step, you can also add code (or files) that you forgot to add to the previous commit.

Next, in your terminal, run git commit --amend which will drop you into the commit editor. If you haven’t seen it before, there can be a lot going on. Mine looked something like this.

Oops - This commit has too much code in it. 

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date: Sat Aug 15 00:02:16 2020 -0400
#
# On branch master
# Changes to be committed:
# modified: styles.css#

If you want to keep the commit message the same, hit esc then type :wq to exit the editor and go back to your terminal.

That’s it!

If you type git log you will see your commits, with the most recent one—the one you just corrected—on top.

No One Gets Time Travel Right

This is the very top of the iceberg of what rewriting history in git can look like. Always proceed with caution, especially in a larger project that other developers may be working on, forking, etc.

Resources

The post Amending Git Commits appeared first on Shannon Crabill — Front End Software Engineer.

Approaching Problems like a Software Engineer

Shannon Crabill — Sat, 08 Aug 2020 23:15:28 +0000

During a recent, mock technical interview, I was given the following problem to solve.

Write a function that takes in two inputs, an array, and a number. Remove the first item in the array. Then, move it to the last place in the array. Repeat this the number of times as given in the second argument and return the array.

For example, if the given array is [1,2,3], and the number of times it should shuffle is 1, the function should return [2,3,1].

Break Down the Problem

Given the problem, I thought about the main components (or problems) I would need to make things work.

Remove the first item in the area (the item at place array[0])
Take the removed item and place is at the end of the array (it becomes the item at place array[array.length -1].
Repeat the above for each time the second argument specified
Return the shuffled array

Knowing that the act of removing an item and placing it into the array would have to happen x numbers of times, a for loop seemed like a good place to start. Within that loop I could remove the first item in the array with .shift() then add it back onto the end of the array with .push().

Putting that together into a function, our solution could look like this:

function moveToEnd(array, number) {

    for ( let i = 0; i < number; i++ ) {
        let itemToMove = array.shift()
        array.push(itemToMove)
    }

    return array    
}

Given the following inputs:

moveToEnd([1,2,3], 1)
moveToEnd([1,2,3], 2)
moveToEnd([1,2,3], 3)

We get the following outputs:

[2,3,1]
[3,1,2]
[1,2,3]

It works!

While this solution does work, it may not be the best way to approach the problem. Let’s think about some possible edge cases that we have not accounted for.

Run Time

In the sample code, I have three simple examples of what the inputs and outputs could look like. The array is relatively small, so have been the number of times the for loop needs to run.

In Javascript, an array can be any size. Shuffling through an array of 1000 items would take longer than shuffling through an array of 3 items. An array of 1,000,000 items would take even longer. Alternatively, if a 3 item array needed to be shuffled 1,000,000 times, it would take longer than removing an item from the front and placing it on the end 3 times.

Time complexity, runtime, and Big O notation are some of the concepts in computer science surrounding the idea of how fast, slow, or performant a program or function is. These concepts are too complex to cover in this blog post, however, we can keep the idea of runtime in mind as we refactor the moveToEnd function.

Noticing Patterns

Focusing on one aspect of the function, the user inputs, we can improve our solution a little bit.

Going back to our earlier examples, let’s shuffle the [1,2,3] array a few more times.

moveToEnd([1,2,3], 1) // expected return [2,3,1]
moveToEnd([1,2,3], 2) // expected return [3,1,2]
moveToEnd([1,2,3], 3) // expected return [1,2,3]
moveToEnd([1,2,3], 4) // expected return [2,3,1]
moveToEnd([1,2,3], 5) // expected return [3,1,2]
moveToEnd([1,2,3], 6) // expected return [1,2,3]

You may see a pattern here.

If the array is shuffled 1 time or 4 times, the resulting array ([2,3,1]) is the same. Each time number is incremented by 1, the resulting array is the same as every 3rd instance. Another interesting thing is that when the array is shuffled 3 times (or a multiple of 3 with 0 as a remainder) the resulting array is the same as the original array.

This is interesting to think about.

If the return of a function is the same when we shuffle the array 1 time, 3 times or 6,000,000 times, do we really need our for loop to run 6,000,000 times?

No.

We can make our code a little more performant by simplifying our number to be as small as possible in comparison to the array then running the for loop that many times.

Here are some scenarios to think about:

If number is less than then the length of the array run the for loop
If number is greater than length of the array, divide it by the length of the array, then use the remainder to run the for loop

There are a few ways to tackle this, but for the purpose of this example, I’ll use an if statement to evaluate the value of the number argument.

    if (number > array.length) {
        number = number % array.length
    }

On the second line, we use the modulus operator to return the remainder and assign it to the number variable, that is then used in the for loop.

Our updated function now looks like this.

function moveToEnd(array, number) {

    if (number > array.length) {
        number = number % array.length
    }   

    for ( let i = 0; i < number; i++ ) {

        let itemToMove = array.shift()
        array.push(itemToMove)

    }

        return (array)

}

With this addition, our for loop will run a relatively small number of times compared to what the number argument could be.

What else?

The moveToEnd problem is relatively easy to solve on purpose. Solving problems as an engineer is part of getting to a solution that works. And part getting to a solution that scales, accounts for edge cases or has minimal trade-offs or side effects.

In technical interviews, you may not have all the answers to what inputs could look like, what outputs should be, or other factors to consider. But, that’s on purpose. It’s on you, as the developer, to ask clarifying questions to help guide you to an optimal solution.

For example, when I was posed with this problem, I asked if it was ok to mutate the original array, or if I should return a new, shuffled array, leaving the original intact. If I was approaching this problem now, I may think about if my solution works with a nested array. Or, to account for if the number argument is not an integer or less is less than 0. Going a little deeper, I may revisit the for loop to see if there is a better option.

Conclusion

Again, moving items in an array may not be a scenario you will encounter in the real world. But, thinking about making your code efficient is something you will encounter. Challenge yourself to revisit code you have written and refactor it to account for less-than-ideal user inputs, time complexity any other edge cases you can think of.

Resources

Photo by Olav Ahrens Røtne

The post Approaching Problems like a Software Engineer appeared first on Shannon Crabill — Software Engineer && Email Developer.

DEV Community: Shannon Crabill

focused breathing - A CSS animation to help with meditation and focused breathing exercises

What I built

Category Submission

App Link

Screenshots

Description

Link to Source Code

scrabill / focused-breathing

A CSS Animation to help with focused breathing exercises

Permissive License

Background

How I built it

Part One - HTML & CSS

Visualizing the Animation

Translating the Timeline to @keyframes

Part 2 - Javascript

Wrap Up

Additional Resources/Info

Automatically Open the Current Directory in VS Code From Terminal

Orphan Branches in Git

Creating an Orphan Branch

Use Cases

Resources

Doing the `.split()` with Javascript

Understanding .split()

Using the Optional limit Argument

Use Cases

Additional Information

Resources

How to Base64 Encode a String in Terminal

What is Base64?

Converting Text into Base64

Here’s an example:

Decoding Base64

Base64 is Not Unique

Resources

Open Graph for Personal Projects

Implementing Open Graph

Looking Nice

Conclusion

Resources

A Beginner’s Guide to Managing React State with Hooks

Implementation

Define State

Reference State

Update State

Recap

Resources

You Don’t Have to Participate in Hacktoberfest

Spare Time is a Luxury

Self-care > Coding

Please Take Care of Yourself

Queer Eye Text Effect in HTML & CSS

The Logo

Fonts

Colors

Offsetting The Colors

Putting it all Together

Resources

Drab to Fab: Makeover Your Project README In 3 Steps

Describe Your Project

Installation Instructions

Link To a Live Version

Summary

Amending Git Commits

git commit –amend

Oops! Too much code.

Updating the Commit

No One Gets Time Travel Right

Resources

Approaching Problems like a Software Engineer

Break Down the Problem

Run Time

Noticing Patterns

What else?

Conclusion

Resources

Translating the Timeline to `@keyframes`

Understanding `.split()`

Using the Optional `limit` Argument