Forem: Sandrico Provo

Up Your Editor Game With VSCode Workspaces

Sandrico Provo — Fri, 14 Aug 2020 20:08:56 +0000

Why Workspaces Will Up Your Efficiency Game

Do you ever find yourself working on a project and having to open multiple folders in vscode manually? Well, VSCode Workspaces can do this for you by opening several folders in the same window with one click.

Workspaces are a .code-workspaces file that save our project folder configuration. Once configured, instead of opening multiple folders manually the .code-workspaces file opens them for you. This is much faster and easier then writing a shell script or setting up a custom command because one set up it can be as easy as one click.

Now, let's check out how to make a workspace!

A Step by Step Guide to Making a Workspace

Step 1 - Pick Your Folders

Before we do anything we need to know which folders we want in our workspace. The great part about workspaces is that these folders and files can be anywhere on your computer!

Step 2 - Add Your Folders

Now that we have our folders selected, you can add them to your workspace. In vscode, go to File > Add Folder to Workspace

Once you've added them in, this is what your vscode file explorer will look like. Notice the round circle to the left of each folders name.

Step 3 - Save Your New Workspace

With our workspace set up, the last thing we have to do is save it so we don't have to make it again. In vscode, go to File > Save Workspace As

Once you save your new workspace, it should show up as a [NAME].code-workspace file wherever you saved it. Now you can open it whenever you want to work in those folders together!

When you open your new workspace, you should see its name in the file explorer.

Hot Tip 🔥

If you use a Mac and have Alfred, you can make this even better by setting up a workflow to open your .code-workspaces in vscode via a command. This can mean typing one keyword versus opening vscode and searching your computer files each time.

Happy Learning 😄👋🏾

What’s Your Current Setup?

Sandrico Provo — Sat, 08 Aug 2020 23:29:30 +0000

Desk setups are where we spend a ton of our time, and they’re very much our spaces. Sometimes though, you’re on the hunt for that cool new piece to add! Well, to help each other out let’s share our favourite part(s) of our current set up in the comments 💪🏾

An Intro To Regex's In Under 5 Minutes

Sandrico Provo — Fri, 07 Aug 2020 20:18:13 +0000

Regex stands for regular expression, and in JavaScript regex's give us the ability to match a string against a pattern that we've created. Some use cases for regex's would be making sure that user's enter a valid email on the front end, or making sure that some user input only contains letters instead of numbers. Regex's can be very useful in our JavaScript code, but how do we make them? Well, here is an example of a simple regex.

let myProfession = "Web Developer";
let professionRegex = /Web Developer/g;

if (professionRegex.test(myProfession)) console.log(true);
// console logs true

The example above is a regex that tests whether or not the myProfession variable matches the professionRegex regex. This testing is done by the .test() method. This is a simple example, but with some imagination we can see how handy regex's can be. With that said, let's look at what goes into a regex and some different ways to make them!

Making A Regex

Basic Anatomy & Patterns

When you're writing a simple regex the basic parts of it are usually straight forward. Let's dissect our earlier example to see what goes into a regex.

let professionRegex = /Web Developer/g;

Piece	Description
/	This forward slash is the start of a regex, but you need to add the ending forward slash for JavaScript to know it's a regex.
Web Developer	This is the regex content. You can add text or numbers here, but more commonly you add a pattern.
/	This is the ending forward slash of the regex.
g	This is a flag at the end of the regex. It can modify how our regex's complete their search.

More Parts of a Regex

Now that we've seen a some basic regex anatomy, here are some common pieces that you could come across.

Symbol	Description	Example
^	This symbol tells the regex to search from the beginning of a string.	/^Web Developer/g
\$	This symbol tells the regex to search from the end of a string.	/^Web Developer/g
.	This is like a wildcard, meaning it can match to any single character.	/./g
\w	This indicates any word. A capital W indicated any non-word character.	/\w/g
\d	This indicates any digit. A capital D indicated any non-digit character.	/\d/g
[ ]	Square brackets indicates a range.	/[aA-zZ]/g
( )	Round brackets indicate a capture group. This means anything inside the brackets should be found together.	/([aA-zZ]\
{ }	This checks if something is repeated a number of times.	/s{2}/g

Note: A vertical bar/pipe ( | ) indicates an or. An example for this would be: /\w|\d/g. This is here because markdown tables use | to indicate a new line and it couldn't be escaped properly.

Regex Literal Method

The regex literal method is the method we used to create our regex in the introduction example. It's created by using two forward slashes with a pattern in the middle. There are a ton of different patterns, but here are some basic examples to wet our feet with:

Using a pattern that checks for strings only we can test to see if our earlier example only contains strings.

let myProfession = "Web Developer";
let professionRegex = /[aA-zZ]/g;

if (professionRegex.test(myProfession)) console.log(true);
else console.log(false);
// console logs true

Using a pattern that checks for numbers only we can test to see if our earlier example only contains numbers.

let myProfession = "Web Developer";
let professionRegex = /[0-9]/g;

if (professionRegex.test(myProfession)) console.log(true);
else console.log(false);
// console logs false

Regex Constructor Method

To create a regex using the constructor method we need to initialize using the new keyword. This method is still a regex, but it has the advantage of letting us create dynamic regex's. Here is an example of what I mean.

let myProfession = "Web Developer";
let userInput = 29;
let professionRegex = new RegExp(`${userInput}`);

if (professionRegex.test(myProfession)) console.log(true);
else console.log(false);
// console logs false

Thanks to the constructor method, we can combine template literals with regex's to make our tests more dynamic. An example use case for this combination could be when a variable you use for testing might be different depending on some user input or other code, and you would like this dynamic nature instead of hard coding for multiple scenarios.

Two Useful Methods to Know

Whenever we create a regex in JavaScript we also get default methods that we can use. These methods come from the JavaScript String Prototype, and they help us test our variables and inputs against our regex. There are more, but here are two methods I think are particular useful to know.

.test() Method

This method allows us to check whether or not the variable we are testing matches the regex we are testing it against. We've seen this method used in our code already, but let's look at it again to refresh our memories.

let myProfession = "Web Developer";
let professionRegex = /Web Developer/g;

if (professionRegex.test(myProfession)) console.log(true);
// console logs true

.test() tells us if a variable matches our regex by returning true or false based on the test.

.match() Method

.match() is really cool! When used, it returns an array of whatever in the string matches the regex. Let's change our last example slightly to see .match() in action.

let myProfession = "Web Developer";
let professionRegex = /Web/g;

console.log(myProfession.match(professionRegex));
// console logs ["Web"]

Using .match() gives us an array with the string "Web" inside because that is the part of the string that matches the regex. This could be quite useful when you are expecting a certain type of input from the user and you need to extract a piece from that input. Also, you may not have noticed but there is another difference when using .match(). When you are calling this method, you actually call it on the string instead of the regex! I've spent my fair share of time debugging that one so I hope this helps you save your time 😄.

Regex's Are Cool 😎

I hope that if you weren't already into regex's that now you can see how useful they can be when programming. We now know how to use a regex and can utilize the .test() and .match() methods, so hopefully you'll find a use for them in your next project!

Happy Learning 😄👋🏾

CSS Logical Properties Explained

Sandrico Provo — Fri, 31 Jul 2020 20:27:08 +0000

Writing CSS is an important skill for every frontend developer. CSS stands for Cascading Style Sheets, and it allows us to style our web pages to our liking. There are a ton of CSS rules that we can set giving us a lot of flexibility. When we're looking at creating our styles, the properties we have in our CSS tool belt can thought of in a certain way. For example margin helps us add more space outside of our item and padding lets us add more space inside, both giving our content more or less room to breath.

A new way of thinking about CSS layout is called CSS Logical Properties. Logical properties allow us to change the layout of our CSS in a more logical way. Throughout this post we're going to look at logical properties by using margin, padding and border.

CSS Logical Properties define properties and values for us to work in block & inline dimensions. The main goal of logical properties is to help developers effectively write layouts for different writing views such as right to left and vertical languages. Like mentioned earlier, we're going to be using margin, padding and border properties to learn about logical properties. For anyone who doesn't know/needs a quick refresher on the CSS Box Model it might be helpful to go over that first.

CSS Box Model

The CSS box model is an important aspect of CSS because it's how we understand the sizing of our content. When we're writing our HTML, you can think of each element you write as a box. Each one of these boxes has four parts to it that are important to know.

Name	Description
Content	This is the actual content of the HTML.
Padding	Padding is a transparent space around the inside of the content border.
Border	Border is a space the wrap around the content and its padding.
Margin	Margin is a transparent space around the outside of the content border.

For you folks out there who love a good visual, here is a picture representation of the box model.

With the box model cleared up, let's get into those logical properties!

Thinking Physically vs Logically

When you're thinking about CSS in a physical way we base our thinking in setting properties by how they size and shape our content. For example, when I am setting a margin on an h1 tag my first thought is about how the margin will affect the sizing of the content. In contrast to this, when we're thinking logically we base our thinking off of the current flow of the content. When setting logical property like max-block-size (determines the max size of the content oppose the writing mode), we first need to think about the writing mode.

In this sense, you can think of the two paradigms as what you consider first. Physical properties first consider the size of the content, where logical properties first consider the flow of content. Logical properties try to help developers by giving us an easy way to control the flow of content, and that ability to control the content flow means we have to consider orientation when assigning logical rules. To control the content flow, we need to look at block vs inline and writing modes.

Block vs Inline & Writing Modes

In CSS logical properties, the terms block and inline allow us to determine the direction/flow our properties should follow. Here is how you can define these.

Block	Inline
The opposite direction of the current writing mode.	The parallel direction of the current writing mode.

Block & inline can be straight forward, but for them to make complete sense we need to understand what writing modes are.

Writing modes in CSS allow us to dictate which direction our content flows by setting a direction property. These help us accommodate languages that don't read left to right like English. Examples of these would be how Arabic is written right to left (<). Below is a code example that describes the writing modes and available directions. Just to note, the default direction is left to right.

html {
    direction: ltr;
}
/* Flows horizontally left to right & vertically top to bottom */
h1 { 
    writing-mode: horizontal-tb;
}

/* Flows vertically top to bottom & horizontally right to left */
p { 
    writing-mode: vertical-rl;
}

/* Flows vertically top to bottom & horizontally left to right */
span { 
    writing-mode: vertical-lr;
}

/* Less Supported Values*/

/* Flows vertically bottom to top */
.sidways-1 { 
    writing-mode: sideways-rl;
}

/* Flows vertically top to bottom */
.sidways-2 { 
    writing-mode: sideways-lr;
}

Now that we've gone through block vs inline and what writing modes are, lets look at some visual examples.

CSS Logical Properties vs Physical Properties

Now that we have a good understanding off CSS Logical Properties and how they work, let's look at some code comparing how to do things physically and logically. For these examples we're going to take a look at common CSS properties including width & height, padding, border & margin. Also, a good thing to remember while reading through these examples is that because we can change the writing-mode, the logical properties effect is determined by the mode we set.

Logical Properties Syntax

Width & Height

Type	Shorthand	Longhand
Physical	width height
Logical	block-size inline-size

Physical Properties

.greeting1 {
    width: 300px;
    height: 300px;
}

Logical Properties

.greeting2 {
    writing-mode: horizontal-tb;
    block-size: 300px; /* Acts as height*/
    inline-size: 300px; /* Acts as width*/
}

.greeting3 {
    writing-mode: vertical-lr;
    block-size: 300px; /* Acts as width*/
    inline-size: 300px; /* Acts as height*/
}

.greeting4 {
    writing-mode: vertical-rl;
    block-size: 300px; /* Acts as width*/
    inline-size: 300px; /* Acts as height*/
}

Padding

As a refresher from our box model, padding allows us to define a size of space on the insider of our contents border.

Type	Shorthand	Longhand
Physical	padding	padding-top/right/bottom/left
Logical	padding-block padding-inline	padding-block-start/end padding-inline-start/end

Physical Properties

.greeting1 {
    padding: 24px; /* Sets all four sides equally */
}

Logical Properties

.greeting2 {
    writing-mode: horizontal-tb;
    padding-block: 24px; /* Sets top/start & bottom/end padding */
    padding-inline: 24px; /* Sets left/start & right/end padding */
}

.greeting3 {
    writing-mode: vertical-lr;
    padding-block: 24px; /* Sets left/start & right/end padding */
    padding-inline: 24px; /* Sets top/start & bottom/end padding */
}

.greeting4 {
    writing-mode: vertical-rl;
    padding-block: 24px; /* Sets right/start & end/end padding */
    padding-inline: 24px; /* Sets top/start & bottom/end padding */
}

Border

As a refresher from our box model, the border is a line around our content that defines the edges/ending of the content.

Type	Shorthand	Longhand
Physical	border	border-width border-style border-color
Logical	border-block border-inline	border-block-start/end inline-block-start/end border-block-color/style/width

Note: Each of the long hand physical border properties can be individually set using top, right, bottom and left for further control.

Physical Properties

.greeting1 {
    border: 2px solid black; /* Sets four sides of our border equally */
}

Logical Properties

.greeting2 {
    writing-mode: horizontal-tb;
    border-block: 2px solid black; /* Sets top/start & bottom/end border */
  border-inline: 2px solid black; /* Sets left/start & right/end border */
}

.greeting3 {
    writing-mode: vertical-lr;
    border-block: 2px solid black; /* Sets left/start & right/end border */
  border-inline: 2px solid black; /* Sets top/start & bottom/end border */
}

.greeting4 {
    writing-mode: vertical-rl;
    border-block: 2px solid black; /* Sets right/start & left/end border */
  border-inline: 2px solid black; /* Sets top/start & bottom/end border */
}

Margin

As a refresher from our box model, margin allows us to define a size of space on the outside of our contents border.

Type	Shorthand	Longhand
Physical	margin	margin-top/right/bottom/left
Logical	margin-block margin-inline	margin-block-start/end margin-inline-start/end

Physical Properties

.greeting1 {
    margin: 16px;
}

Logical Properties

.greeting2 {
    writing-mode: horizontal-tb;
    margin-block: 16px; /* Sets top/start & bottom/end margin */
    margin-inline: 16px; /* Sets left/start & right/end margin */
}

.greeting3 {
    writing-mode: vertical-lr;
    margin-block: 16px; /* Sets left/start & right/end margin */
    margin-inline: 16px; /* Sets top/start & bottom/end margin */
}

.greeting4 {
    writing-mode: vertical-rl;
    margin-block: 16px; /* Sets right/start & left/end margin */
    margin-inline: 16px; /* Sets top/start & bottom/end margin */
}

Some Extra Info

CSS logical properties are a cool addition, and with all cool additions in code there are some things to remember before we start using them in our projects.

Browser Support

When new features come to a coding language it takes time for all of the different browsers support them. Whenever you're curious about which features are supported in what browsers, you can check a handy website called Can I Use. Here is the can I use page for CSS logical properties.

can I use screen shot here

If you want to check out the actual page here is the link: Can I Use CSS Logical Properties.

Diving Deeper

In addition to size, padding, margin & border, some other logical properties you can set values with are:

floating
positioning

If you want more info, here is the CSS Logical Properties MDN Page.

Well That Was Fun 😄

Whew! Size, padding, border and margin are super common CSS properties to use, and now we know how to change them via CSS logical properties. I hope that you find CSS Logical Properties as cool as I do, and that this post helped you learn lots about them.

Happy Learning 😄👋🏾!

4 Static Object Methods I Wish I Knew About Sooner

Sandrico Provo — Fri, 24 Jul 2020 20:13:12 +0000

When it comes to writing code in JavaScript, objects are a massively important and useful part of the language. If you haven't learned about objects yet that's okay! You can think of an object as a way for us to create a collection of key-value pairs. For example, I have a first and last name, and a city I live in. These would be the keys of key-value pairs. The values would be the pieces of information with first name being Sandrico, last name being Provo, and city being Halifax. Here is what that would look like inside an object.

let myInfo = {
  firstName: "Sandrico",
  lastName: "Provo",
  city: "Halifax"
}

Objects have sooooo many use cases in JavaScript, and the example above is just one scenario where you might use them. Another cool thing about objects is that whenever we make one it has a collection of methods attached to it called static methods. What are static methods you might ask 😃? Well, Static methods are pre-defined methods we have access to on every object. There is a master object class that every object inherits these methods from, somewhat like a blueprint. Another metaphor would be a car. Every car you buy these days has certain base features like a seat belt and steering wheel, and static methods are the same idea! When I started learning about objects I didn't learn about static methods until later. The static methods we are about to go through would have helped me a ton if I knew about them sooner, but now I hope they save you some time when coding 😄.

TLDR

Name	Description
JavaScript Object	A JS class that lets us define an object data type. It lets us create a collection of key-value pairs.
Object Static Methods	Methods that are pre-defined and called on the object class.
Object Instance Methods	Methods that are pre-defined and called on a single object instance.
Object.keys()	Returns an array of the objects keys.
Object.assign()	Copies a source objects properties to a target object.
Object.entries()	Returns an array of all the objects key-value pairs.
Object.fromEntries()	The opposite of .entries(), this turns a key-value pair list into an object.
Object.prototype.hasOwnProperties()	Returns true or false based on whether the object has the given key.

The Static Methods

Let's set up an example for us to work with.

let countryCanada = {
    countryName: "Canada",
    capital: "Ottawa",
    region: "North America",
    population: 37590000,
    neighbour: "United States"
}

Object.keys()

Sometimes when you're working with an object you might want to list all of its keys. Object.keys() is the method that lets us do this! When you use Object.keys() you get back an array that contains all of that objects' keys. Fun fact: the array that you get back should be in the same order as the object that the keys are in. Here's what this would look like in code.

let propertiesArray = Object.keys(countryCanada);
// Output: ['countryName', 'capital', 'region', 'population', 'neighbour']

Object.assign()

Sometimes you might want to make a copy of an object and its key-value pairs. Object.assign() lets us do this by copying key-value pairs from a source object to a target object. The target object can be empty or an object with its own properties already. If the target object has its own properties, you do need to be careful because if the source and target have a matching property the sources value will overwrite the targets value. Another tip is that you can also have multiple sources! Let's check out an example.

// Make a copy using Object.assign()
let copiedCountry = Object.assign({}, countryCanada);
console.log(copiedCountry);
// Output: copiedCountry { countryName: "Canada", capital: "Ottawa", region: "North America", population: 37,590,000, neighbour: "United States" }

Object.entries()

This static method allows you to convert your objects into arrays. If we did this with our example object, here is what the output would look like.

let convertedCountryArray = Object.entries(countryCanada);
// Output: [["countryName", "Canada"], ["capital", "Ottawa"], ["region", "North America"], ["population", 37590000], ["neighbour", "United States"]]

As you can see, the output array is a 2D array (an array with arrays nested inside of it). One benefit of working with this object as an array is that you could use the vast array (🙊😅) of array methods to manipulate it. Now, you've converted this object into an array, but what if you want to convert it back into an object? Well, there is a method for that as well!

Object.fromEntries()

You can think of this method as doing the reverse of Object.entries(). It takes an array and converts it into an object. If we used this on our counvertedCountryArray from our Object.entries() example, we would be back to our original object like so.

let reconvertedCountryArray = Object.fromEntries(convertedCountryArray);
console.log(reconvertedCountryArray);

// Output: countryCanada = { countryName: "Canada", capital: "Ottawa", region: "North America", population: 37590000, neighbour: "United States" }

An example of what this could allow us to do is manipulate this object using array methods. Let say we want a new object that only has the capital city in it. In combination with Object.entries(), we could use this method to achieve this. Here is an example of what I mean.

let manipulatedObject = Object.fromEntries(
  Object.entries(countryCanada).filter(([key, value]) => { 
    if (value === "Ottawa") return [key, value];
  }
));
// Output: { capital: "Ottawa" }

Bonus: Object.prototype.hasOwnProperty() Instance Method

Here are a two terms that'll help explain our bonus example.

Name	Description
Prototype	The prototype is what JS objects use to inherit methods/functions and other features from one another.
Instance Method	Instance methods are methods built onto objects that run on the particular instance of an object instead of the object class.

Object.prototype.hasOwnProperty() is a useful method because it allows us to check whether or not the object we are working with has a particular property in it. An important fact to remember is that this method checks if the object owns the property we're looking for as oppose to inheriting it. Here is an example.

let isPropertyOwned = countryCanada.hasOwnProperty("capital");
console.log(isPropertyOwned);
// Output: true

Like many things in coding there are multiple ways you could do a check like this, but it's nice to have a built-in function to help you out 👍🏾.

Well That Was Fun 😄

There we are. We've looked at Object.keys(), .assign(), .entries(), .fromEntries() and .hasOwnProperty(). These methods could have saved me time when I was starting out, so hopefully they help you save some time in your journey.

Happy Learning 😄👋🏾!

How to Write Cleaner If Statements In JavaScript

Sandrico Provo — Fri, 17 Jul 2020 20:38:23 +0000

One of the major abilities we have when writing code is to write so things happen conditionally. When talking about conditional code, often we are talking about good ol' if else statements 👍🏾. If you haven't come across if else statements yet that's totally okay! You can think of them as a way to make different things happen depending on whether something is true or false. In JavaScript, if statements look something like this:



let isCold = true;
if (isCold === true) {
    console.log("Turn up the heat 🥶!");
} else {
    console.log("It's nice and hot ☀️😎.");
}

In the example above, you can see that something different will get logged to the console depending on the variable isCold being true or false. Now, imagine if you need if you needed to check more complex conditions. Once you do, your if statements could get longer and nested like this one:



let isMilkSmelly = false;
let isMilkExpired = false;
let isHavingCereal = true;

if (isMilkSmelly === true) {
    console.log("Ewww 😷");
    if (isMilkExpired === true) {
        console.log("Time for the trash 🗑");
    }
} else if (isHavingCereal === true) {
    console.log("Yay for not smelly milk!");
} else {
    console.log("I just wanted waffles.");
}

You might find the above example not that bad, but you can imagine all of the micro-decisions we make when making bigger decisions. One example could be imagining the if else statements you'd need to evaluate a poker hand.

With that in mind, there are many ways to make your if statements look cleaner and we're going to look at some now!

TLDR

Guard Clauses: Guard Clauses are a way to write if statements that allow us to guard the flow of logic depending on whether a condition is met. Usually this is done by returning after a statement so the function stops when a condition is met. It's beneficial because it allows us to avoid nested if statements.


 javascript 
function getTemperature() {
    return 25;
}

function getBlanket() {
    if (getTemperature() <= 20) return true;
    if (getTemperature() > 20) return false;
}

console.log(getBlanket()) // false

Ternary Operator: The ternary operator is like a shorthand for writing if statements! It has three parts, part one is the condition followed by a question mark, part two is what should happen if the condition is true follow by a colon, and part three is what should happen if the condition is false. Here is an example:



function getTemperature() {
    return 25;
}

function getBlanket() {
    return (getTemperature() <= 20) ? true : false
}

console.log(getBlanket()) // false

Syntax Tips: There are some cleaner ways that JavaScript gives us out of the box to write if statements. Here are some examples:


 javascript
let isMilkSmelly = false;
let isMilkExpired = false;
let isHavingCereal = true;

// If statements in one line
if (isMilkSmelly === false) { console.log("Yes, it stinks 😷!") }

// With no keyword the if statement will check if the value is true
if (isHavingCereal) { console.log("Yes, let's have some cereal!") }

// If statement without curly brackets
if (isHavingCereal) console.log("Yes, let's have some cereal!");

// Check if condition is not true without false keyword
if (!isMilkSmelly) console.log("Yes, it stinks 😷!");

// Check If else & else-if in one line without curly brackets.
if (isMilkSmelly) console.log("Yes, it stinks 😷!")
else if (isMilkExpired) console.log("No, it's gone bad!")
else console.log("Yes, let's have some cereal!");

Making Your If Statements Cleaner

Guard Clauses

In JavaScript we use the return keyword to send data out of our functions, kind of like hitting the eject button. If we combine that functionality with if statements we can get a pattern called Guard Clauses. These guard clauses allow us to write more concise if else statements, which makes our code cleaner and easier to read. They help us clean up our if else statements by allowing us to avoid nested if statements. There is nothing inherently wrong with nested if statements; I've used them tons! However, once I learned about guard clauses I figured why not have my if statements be a little cleaner 🧼 where I can. To make this a little clearer, why don't we look at an example.



    // Without Guard Clause - 9 Lines
    function getBlanket() {
        let isCold;
        if (getTemperature() <= 20) {
            isCold = true;
        } else {
            isCold = false
        }
        return isCold;
    }

    // With Guard Clause - 4 Lines
        function getBlanket() {
            if (getTemperature() <= 20) return true;
            if (getTemperature() >= 20) return false;
        }

Isn't that super cool! When I discovered guard clauses the idea blew my mind for a minute 🤯. Code can get really complex when it comes to conditions, and guard clauses are just one way to make things easier on ourselves.

Ternary Operator

I promise the hardest thing about the ternary operator is saying the word ternary 😄 (tur-nr-ee according to Google 🤔; always gives me trouble 😅). The tur-nr-ee operator allows us to write if else statements in a single line. Let's look at an example.


 javascript
    let isCold = true;

    // Valid Ternary Operator - check is true
    isCold ? console.log("🥶🧊") : console.log("🥵🌞");

Here is a visual example that labels the different parts!

With the anatomy in mind, another cool fact about ternary operators is that you can chain them like if else-if statements! Let's take a look:


 javascript
    let isMilkSmelly = false;
    let isMilkExpired = false;
    let isHavingCereal = true;

    isMilkSmelly ? console.log("Yes, it stinks 😷!")
    : isMilkExpired ? console.log("No, it's gone bad!")
    : isHavingCereal ? console.log("Yes, let's have some cereal !") 
    : console.log("Let's have pancakes!");

These chained ternary operators work like if else-if blocks, but since you can write each condition as it's own line it can make your code cleaner and easier to parse.

I think the ternary operator is a great tool to have in your programmer tool belt. They give us a quick and clean way to write our if else statements. However, with its coolness there are some things to keep in mind. For instance, you can't do something like this:


 javascript
let isHavingCereal = true;
isHavingCereal ? return console.log("I want cereal!") : return console.log("I want waffles!");

If you're asking why you can't do this, don't worry because I thought the same thing. The reason you can't do this is because anything after the first return in this statement would be considered unreachable code. If you ran this code you'd get an error saying "Uncaught SyntaxError: Unexpected token 'return'".

Syntax Tips

Along with the two methods we've talked about so far, there are some general syntax tips we can keep in mind to make our if statements cleaner. We've already seen some of these in our previous examples but let's look at them here to be explicit.



 javascript

let isMilkSmelly = false;

let isMilkExpired = false;

let isHavingCereal = true;

// If statements in one line

if (isMilkSmelly === false) { console.log("Yes, it stinks 😷!") }

// With no keyword the if statement will check if the value is true

if (isHavingCereal) { console.log("Yes, let's have some cereal!") }

// If statement without curly brackets

if (isHavingCereal) console.log("Yes, let's have some cereal!");

// Check if condition is not true without false keyword

if (!isMilkSmelly) console.log("Yes, it stinks 😷!");

// Check If else & else-if in one line without curly brackets.

if (isMilkSmelly) console.log("Yes, it stinks 😷!")

else if (isMilkExpired) console.log("No, it's gone bad!")

else console.log("Yes, let's have some cereal!");

Well That Was Fun 😄

There we have it! Guard Clauses, the Ternary Operator and some quick syntax tips. Hopefully you find these useful (and cool 😎) on your journey.

Happy Learning 😄👋🏾!

Console Coolness: 6 Useful Console Methods

Sandrico Provo — Fri, 10 Jul 2020 23:12:06 +0000

As people who code, the console is well used tool in our treasure chest. If you're new to programming, the Console API gives us methods which allow us to send messages to the console area within web browsers. Being able to interact with the console gives us helpful and easy ways to do things like check the outputs of our code, show things like objects more neatly, and debug. With that said, let's log some time learning five cool console methods in JavaScript!

TLDR

6 Cool Console Methods

A Quick Primer on Log Levels

With each console message comes something called a logging level. These levels tell allow us to distinguish these methods from each other. A good example of this is the difference between a warning and an error.

Now to the methods!

6 Console API Methods

1. console.log()

What do I do?

The console.log() method is probably the most popular method due to its many use cases. A common use case for would be sending messages to the console when debugging functions. This can help us know if a function is being run, and/or if it's returning the expected output.

Let's See An Example!

2. console.group() & console.groupEnd()

What do I do?

Console.group() and console.groupEnd() are a duo. Together, these two allow us to group messages together, helping us better organize ourselves if we're using a lot of messages. As the naming might suggest, you would use .group() to start a group and .groupEnd() the end a grouping. Bonus: you can use .groupCollasped() to make sure the group logs to the console collapsed initially 👍🏾.

Let's See An Example!

3. console.table()

What do I do?
Console.table() lets you take an array of objects, and then print those objects to the console as a table. Think of this as a way to print an array of objects in a console version of an Excel sheet. This gives you a cleaner way to check the values of many objects in an array.

Let's See An Example!

4. console.warn()

What do I do?
Console.warn() allows us to log a warning message to the console. If you've worked in the console before, warning messages are the yellow messages that appear with a stack trace.

Let's See An Example!

5. console.error()

What do I do?
Console.error() is very similar to console.warn(). You still get a message within the console but errors show up with a red background, meaning you should really look into these 😅.

Let's See An Example!

6. console.dir()

What do I do?
Last but not last, we have console.dir(). This method allows us to view an object in a JSON format. Very handy if you're working with larger objects. Bonus tip: if you've ever needed to see a list of methods and properties on something like the document window or body, console.dir() is a quick way to see view them.

Let's See An Example!

Well Here We Are 🌅

There we have it! 6 neat console methods! If you want to find more cool methods, one place you can look is Googles Developer Console API Reference.

Happy Learning 😄👋🏾!

My goal with writing is to make enjoyable content that helps you learn. If you liked what you read, wanted to ask a question or say hi 👋🏾, you can find & follow me on Twitter.

5 Tips for Self-Learning Developers

Sandrico Provo — Sat, 27 Jun 2020 17:10:41 +0000

When it comes to learning web development, there are a lot of us out there who are learning on our own. With so much to learn, it can be very intimidating. I've done a lot of self-learning throughout my coding journey, and looking back now I wish I could give my past self these tips. However, since I can't magically create a time machine to talk to past me, I want to share these tips to help you learn better on your own 😄.

The Tips

Looking back on what I was like when I started learning, I spent a lot of my time unorganized, in tutorial hell, and spinning my tires. For a long time I didn't really make much progress, and I had no idea why. After implementing the tips I'm about to share (and others) I got myself organized and out of tutorial hell. I firmly believe that no one needs formal education to learn web development, but it is also not the easiest to learn on your own. With that said, it's my hope that these tips can help you on your journey 💪🏾.

1. Make A Routine

When you have a routine, it gives you less opportunity to brush things off. Coding is hard, and if you don't set aside time to learn then it can be really tempting to continue to tell yourself "you'll get to it later". Life happens, and sometimes you just don't have the time, but routines are awesome because it gives you dedicated time for an activity. For me, I got up at 5am Monday-Friday before I went to work. For you, it might be you stay up an hour later before bed. No matter how you do it, having a routine time to learn helps to hold you more accountable to yourself, while also making sure you've got the time to learn.

Bonus Tip: Add this time to your calendar so you don't forget!

2. Try to Spread Out The Learning

When you're trying to learn something new, it's better to learn things in small frequent chunks as oppose to large infrequent chunks. If you only practice every Saturday morning for example, there is a lot more room to lose the things you've learned. By practicing everyday, even if for short periods, you're better reinforcing what you're learning. Essentially, cramming won't help you as much as spreading things out. This idea was one I learned from experience, but later found out is a well researched learning method called Spaced Repetition.

3. Make a Path For Yourself

With so many things to learn in web development, having a path to follow can be invaluable in helping you avoid the feeling of getting lost on your journey. Even more so, once your path is made you're going to be more organized in your learning while also having a better understanding of everything that's out there to learn. Here is a link to a FreeCodeCamp article that can help you build your path: The 2019 Web Developer Roadmap. One thing I will say is please don't feel pressured to know everything, because no one can know everything.

Bonus Tip: If you want a place to narrow down and organize yourself, check out Notion 👍🏾.

4. Track Your Wins

This is soooo important. No matter what you do, learning to code is hard. Especially when you're going into it alone. Imposter Syndrome (when you feel like you're getting nowhere even though the progress is there) will set in, and if you do your best to track your wins you'll always have a place to view your accomplishments when you're feeling like you won't make it (but you'll make it 😄💪🏾). Being able to go back and look at all of the stuff you've accomplished shows you how much you've grown, and gives you the needed confidence boost in the moment 🏋🏾‍♂️.

5. Find & Share with a Community

There is a saying that I've read a lot that reads "If you don't share it, it doesn't exist". Obviously everything you make exists, but no matter how much of a beginner you are you shouldn't be afraid to share your work. If you really don't feel comfortable, share the things you build with your friends/family and get their feedback. Sometimes we can't see the errors in the things we build, or someone else has a different perspective that's helpful. Once you're ready to branch out, there are communities you can share things with. Twitter has communities like CodeNewies, DevCommunity & FreeCodeCamp where you can use hashtags so other people could see your work. Don't be afraid to get out of your comfort zone, even if just a little 😄.

Well Here We Are 🌅

Those are my tips! I am by no means an expert in self-education, but I've done a lot of self-learning and I wanted to share the tips that helped me on my journey in hopes they help you on yours. If you did find these tips helpful, or if you wanted to ask a question or say hi👋🏾, you can follow me on Twitter.

Happy Learning Folks 😄👋🏾.

An Introduction to JavaScript Functions

Sandrico Provo — Sun, 07 Jun 2020 15:34:07 +0000

Functions are a powerful tool and super important in JavaScript land. They can be described as a block of statements that let you perform a task. One of the best things about functions is that once you define a function, you can reuse it throughout your code.

What is a JavaScript Function?

Why don't we start looking at functions via an example. Let's say you want to add five to a number. Here's a way to do it without functions.

let firstNumber = 1 + 5; // Answer: 6

Now, lets see an example using a function

// This is a function below
function addFive(number) {
    return number + 5;
}

let firstNumber = addFive(1); // Answer = 6

Looking at these two examples above your first thought might be that the function required more code to get the same result. That would be a fair thing to say when you only need to do something once, but what if you needed to add five to more numbers? In that case, we can see how a function might be cleaner.

function addFive(number) {
    return number + 5;
}

let firstNumber = addFive(1); // Answer = 6
let secondNumber = addFive(2); // Answer = 7
let thirdNumber = addFive(3); // Answer = 8
let fourthNumber = addFive(4); // Answer = 9
let fifthNumber = addFive(5); // Answer = 10

In the example above we can see how awesome it is to be able to write something once and reuse it. Functions help you reduce, reuse and recycle your code 🕺🏾. With the above example in mind, let's check out the anatomy of functions.

How to Call a Function

When you are finished defining your function you can call it by writing its name + parenthesis. Here is an example:

function greeting() {
    console.log("Hey There");
}

greeting();

The Anatomy of Functions

In the above examples we saw the awesomeness of functions and what they can do, but now why don't we look at how to make them.

Here is our above example again for reference:

// This is a function below
function addFive(number) {
    return number + 5;
}

And here is a nice illustration of what's going on here.

*Function Keyword: this keyword tells JavaScript that we are trying to define a function.
Function Name: this is name of the function and what we use to call the function.
Function Parameters: this is the list of variables that you want to use with the function. You can think of it like passing things into the function.
Return Keyword: the return keyword is how we pass things back out of our function.

A Declaration vs An Expression

The above example is what you would call a function declaration. It's a declaration because it's declared using the function keyword. The other major way to define a function is through a function expression. This is when you declare a function like a variable. Here is the same function written as an expression:

const addFive = (number) => {
    return number + 5;
}

So, what's the biggest difference? The biggest difference between the two would be in their hoisting. Function declarations are hoisted, but expressions are not. There's more to hoisting, and here is the MDN page for reference: JavaScript Hoisting.

Parameters vs Arguments

In the picture above we can see our parameters list. This is the list of things that we want the function to expect. However, when you are using a function and passing those items in, they are called arguments. This concept broke my brain when I was first learning 😂. Now I think about it like this: parameters are empty placeholders to be expected, arguments are full items to be used. Here is a code example:

let numberFive = 5;

// Parameters
function addFive(number) {
    return number + 5;
}

// Arguments
let result = addFive(numberFive);

Arrow Functions

Arrow functions are a popular way to define functions. The below example shows us what an arrow function looks like in javaScript. They are characterized by the arrow in the syntax.

const greeting = () => {
    console.log("Hello World");
}

Parameters & Arguments in Arrow Functions

When using arrow functions, if you only have one parameter or argument you don't have to wrap them in parenthesis. The two examples below give the same result.

let greetText = "Hello Text";

const greeting = (greetText) => {
    return console.log(greetText);
} // Answer = "Hello Text"

const greeting = greetText => {
    return console.log(greetText);
} // Answer = "Hello Text"

Implicit vs Explicit Return in Arrow Functions

With arrow functions, there are two ways to return: implicit and explicit.

Explicit Return: This method of returning uses the return keyword to return the result from the function.

const greetingExplicit = () => {
    return "Hello World";
}

// greetingExplicit returns "Hello World";

Implicit Return: This method of returning doesn't use the return keyword, and returns the function result for you when you are working with a one line function body.

const greetingImplicit = () => "Hello World";

// greetingImplicit returns "Hello World";

That's All Folks

As we can see, functions are a powerful tool inn JavaScript 💪🏾. They let us reduce, reuse and recycle our code which makes it easier and cleaner for us as coders! There is still more you can learn about functions, so here is the MDN page if you want to read more in depth about them.
JavaScript Functions MDN Page.

If this article helped you learn more about functions, you want to find more of my content, or if you want to talk to me about my article you can find me on Twitter.

Happy Learning Folks 👋🏾

Destructuring Your Confusion about JavaScript Destructuring

Sandrico Provo — Fri, 15 May 2020 18:33:04 +0000

What if I told you that the below syntax’s log the same values?

// Without Destructuring
const myInfo = { name: "Sandrico Provo", age: 26 };
const myName = myInfo.name;
const myAge = myInfo.age;
// With Destructuring
const { name, age } = myInfo;

You can probably guess what destructuring does by looking at the syntax, but if you want to learn more keep reading 👇🏾.

Curly brackets to the left, the left

Yes that is Beyoncés voice you heard when you finished reading that header (this is a play on one of her iconic hooks from the song Irreplaceable), but you’re here to read about destructuring assignment in JavaScript.

The destructuring syntax will works with arrays and objects and essentially what’s happening is you are assigning multiple variables in one-line. Let’s bring back our beginning example and dissect the line where we use destructuring.

const { name, age } = { name: "Sandrico Provo", age: 26 };

This first line shows us the actual syntax of destructuring on the left side of the assignment, and on the right we have the object we’re working with. When destructuring objects, on the left side of the assignment you enclose the object keys in { }, and this will assign them to variables for you. With that in mind, it makes sense why we can then console.log the object values without using dot notation. As its name implies, we’re just breaking down complex structures into simpler ones.

Why is this useful??

Imagine a more complex object like the one below, and how you’d access its nested properties.

const detailsObject = { 
    name: "Sandrico Provo", 
    age: 26,
    aboutMe: {
        country: "Canada"
        province: "Nova Scotia",
        city: "Halfiax"
        hobbies: [ "sports", "code", "video games"]
    }
 };

Now, let’s compare assigning two new variables from this object with and without destructuring.

// without destructuring
const personalHobbies = detailsObject.details.city; 
const personalHobbies = detailsObject.details.city; 
const personalHobbies = detailsObject.details.hobbies; 
// with destructuring
const { name, aboutMe: { city, hobbies } } = detailsObject;

Both of these methods give you the same output! This shows us that destructuring really shines when you want to create multiple variables from multiple object properties.

Using Arrays? Destructuring Has Your Back 💪🏾

Destructuring can also be used with arrays, however there are some key differences.

In stead of using curly brackets you have to use square brackets.
Since arrays aren’t key-value pairs like objects, your variables are assigned in order of the array with variable names you create.

Let’s see an example to clarify.

const provincialCapitals = ["Halifax", "Toronto", "Victoria"];
const [novaScotiaCapital, ontarioCapital, britishColumbiaCapital] = provincialCapitals;

These three values are assigned in order of the array, so novaScotiaCapital would contain ”Halifax”, and so on. If we did this:

const provincialCapitals = ["Toronto", "Halifax", "Victoria"];
const [novaScotiaCapital, ontarioCapital, britishColumbiaCapital] = provincialCapitals;

Then novaScotiaCapital would contain “Toronto”.

Just to visualize its usefulness with arrays lets compare how we’d do this with and without destructuring.

// without destructuring
const novaScotiaCapital = provincialCapitals[0];
const ontarioCapital = provincialCapitals[1];
const britishColumbiaCapital = provincialCapitals[2];
// with destructuring
const [novaScotiaCapital, ontarioCapital, britishColumbiaCapital] = provincialCapitals;

I’d say three lines worth of code for the price of one line is a great deal 👍🏾 😄.

What About Variable Renaming With Objects?

Say you’ve pulled in some JSON data and are working with the object(s). You have the data you need but you don’t like the property names when destructuring. Well, thankfully you can change the names of destructured variables! Here’s how with objects.

const { name: sandricoName, age: sandricoAge } = { name: "Sandrico Provo", age: 26 };
console.log(sandricoName); // Sandrico Provo
console.log(sandricoAge); // 26

Voila! All it takes is adding a colon 👍🏾.

That’s All Folks

Well, here we are. We’ve destructured the basics of destructuring in JavaScript 👏🏾. I hope you found this post fun and useful. If you’re in search of more about destructuring, here is MDN’s page on it: Destructuring assignment - JavaScript | MDN.

Happy Learning 😄👋🏾.