Forem: Zahra Khan

The Most Commonly Used HTML Tags

Zahra Khan — Sat, 09 Apr 2022 17:40:35 +0000

Let's go back to the basics. A lot of beginners spending months trying to memorize HTML. Truth be told, you can google the HTML document structure, elements, tags and attributes. I often find myself googling the simplest tags and the HTML boilerplate. because it's damn impossible to remember everything and it's not necessary to memorize ALL the HTML elements. You probably only need to know like 10 elements that you'll use throughout your career.

I'll be going over some of the most commonly used HTML tags and attributes, what they mean and when they're used. I've also created a little cheatsheet—which I'll include in the end—that I hope would be useful. 🤓

What is HTML?

HTML stands for Hyper*Text **Markup **L*anguage. It is THE skeleton of a web page. Web developers use HTML to represent the structure and content on a webpage. It allows the content to appear in a certain way using enclosing tags and elements. If you want to learn more in detail, MDN is a great resource to learn more.

HTML Document Structure

HTML has a document structure that you will ALWAYS need in order for your web page to work. The HTML:5 boilerplate looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Boilerplate</title>
</head>
<body>

</body>
</html>

When you are using VSCode, a shortcut for this boilerplate is to simply type ! and VSCode will take care of it for you. However, it is good practice to learn to write it on your own.

Now let's get to some of the tags inserting between the <body></body> tag and using throughout your web development journey!

Common HTML Tags

<!DOCTYPE html>

All HTML documents start with <!DOCTYPE html>, which is a declaration that let's the browser know that you are using HTML:5. This one isn't an HTML tag but you do have to begin your document with this.

<html lang="en">

I recently learned about <html lang="en"> and it describes the language your document is written in. For example, "en" stands for English, but there are other codes for other languages.

<head></head>

The <head> is the part of an HTML document that is not displayed in the web browser or to the user. You would put information in there that only the document needs to process, such as a CSS file or a google font, links to favicons and other metadata you'd need for SEO purposes.

<title></title>

The <title> tag goes in the <head> tag and it defines the documents title that's shown in the web browser. The "tab" of a browser, such as the screenshot below:

<body></body>

The <body> tag is where all of your content lives that's displayed in the web browser and to the user. You can only have one <body> element in an HTML document.

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

These tags are used to define the HTML headings. <h1> defines the most important heading on a web page. It's best practice to have only one <h1> on a webpage. The <h2> heading is the second most important and you can have many <h2> tags. The <h6> is the least important.

<p></p>

The <p> tag represents a paragraph element that contains paragraph content on a web page.

<ul>
<li></li>
<li></li>
<li></li>
</ul>

<ol>
<li><li>
<li></li>
<li></li>
</ol>

The <ul> element represents an "unordered" list. The <li> is necessary for the <ul> tag to render a list. This is rendered as a bullet pointed list.

Meanwhile, the <ol> element represents an "ordered" list. Which means that the list is rendered numerically. This element also requires an <li> tag.

images are from MDN

<img />

<img src="URL_TO_IMG.png" />

The <img /> tag is a self-closing tag that is used to embeg an image on a webpage. You would write the tag as: <img src="URL TO IMG" /> for the image to render on your website. src is an attribute that is specifies the image it should display on the screen. It is required to be used with the <img/> tag.

<a></a>

<a href="URL_TO_LINK">TEXT TO DISPLAY AS LINK</a>

The <a></a> tag defines a hyperlink, which is used to link one page to another. It is required to use the attribute href with an <a> tag because this indicates where you want your link to go. The <a> is useless without an href.

<strong></strong>

The <strong></strong> tag is an HTML:5 element which is used to bold text on a webpage.

<em></em>

The <em></em> tag is also an HTML:5 element which is used to define emphasized text on a webpage. Which means, if you want to italicize text, you will use this element.

<hr>

The <hr> element is used to insert a horizontal line to divide up a page or content on a page.

<br>

The <br> element is used to produce a link break. Let's say I want to keep a few sentences in one <p></p> tag, but I want to add space to separate them—the <br> tag will allow me to do this.

Final Thoughts

There's absolutely no need to memorize all the tags. The ones you'll use regularly are the ones I've described above. With repetition and practice, you'll end up memorizing them anyway, but know that you can just google them too 😊

Here is a cheatsheet I've created for you, hope it helps!

How to Create Aliases on macOS with Terminal

Zahra Khan — Mon, 27 Dec 2021 20:57:05 +0000

Aliases are those badass secret identities and mysteries that developers type into their terminal to perform a task faster and make their workflow simpler. For the longest time, I procrastinated creating aliases because the thought of learning how to do it seemed really hard. But actually, it's extremely easy. And its made my life SO MUCH better, so I wanted to share how to do it.

Creating Aliases for Zsh Shell

Go to your terminal
Type in the command

cd ~

To make sure you are at your root directory,

Then type in

open .zshrc

to open up your .zshrc folder. You should see a screen like this:

Scroll down to where it says something like # alias ohmyzsh="mate ~/.oh-my-zsh"
After the hashes, type in your own alias, i.e.:

alias cmsg="git commit -m"

Every time I want to run git commit -m, I can now use cmsg to do that task.

Next Cmd + S to Save. Close the window.
THEN for the changes to take affect, you will have to enter the following in your terminal:

source .zshrc

Example Aliases

Alias names can often be hard to come up with for beginners—I know it was for me until I saw a senior engineer using some of them—so some examples would be:

alias project:start="yarn"
alias project:build="yarn project build"
alias project:test="yarn test"

alias project:start="yarn && yarn project build"
alias project="/application/documents/project/project-file"

Voilà You can now use your alias to perform the task you want faster.

If you have any questions, feel free to DM me on Twitter !

JavaScript Type Conversion & Coercion Explained

Zahra Khan — Sun, 19 Dec 2021 19:21:41 +0000

To properly write JavaScript, we need to be able to understand what's going on under the hood. Since JavaScript is a dynamically typed language, it has many weird parts. You don't have to specify the type of some value before you use it. It allows you to change the types as you write your code.

Let's say you declare a variable and assign it to a string. Later on, you can decide to change it to a number. As I discussed in my post about null vs. undefined, you can leave a variable empty and initialize it later without specifying it's type. This could create a lot of buggy behavior in JavaScript (aren't we thankful TypeScript exists? 😜)

Type Coercion vs. Conversion is one of the topics that can be hard to understand because the language behaves in strange ways. When comparing the string '28' to the number 28, you'd think that they're the same. When you compare them loosely, '28' == 28 you get that they're the same. But they're not. JavaScript does implicit coercion under the hood which converts '28' == 28 to 28 == 28 which obviously becomes true.

Introduction

To understand Type Coercion, we need to remember that JavaScript generally has two types: Primitives and Objects.

There are 7 primitive data types: string, number, boolean, symbol, bigint, undefined, and null. These are not objects and they don't have built-in methods.

Objects are everything else.

Type Conversion happens in two different ways:

Implicit Coercion

Implicit coercion happens automatically by JavaScript. The compiler goes behind your back and converts a value without you explicitly telling it to. It's completely hidden from you. For example, if you add a string to a number or vice versa, JavaScript will automatically concatenate it to a string. Or if you apply non-numbers to mathematical expressions, they will be converted to numbers. This is called Type Conversion.

Let's look at some code:

const currentYear = 2021
const age = '28'
console.log(currentYear + age) // '202128'

JavaScript converted the number 2021 to a string by concatenating the string '28' giving you a result of 202128 instead of doing an actual calculation.

Another example, WITH subtraction:

let age = '28'
let currentYear = '2021'
console.log(currentYear - age) // the strings are implicitly coerced to 1993 here

This performed a mathematical calculation and implicitly converted the strings into a number.

Explicit Coercion

Explicit coercion happens when you convert the data type of a value stored in a variable ON PURPOSE (explicitly) with a built-in method. You can visually see it happening in your code. JavaScript has three explicit type conversions:

Number()
String()
Boolean()

You cannot convert a variable to null or undefined. I will only be explaining a high-level overview of the three methods. If you'd like to dive deeper, please read YDKJS as the book goes into a rabbit hole of explaining every bit.

Number()

The Number() method will convert any non-number value into a number. It's a little bit complicated because if you convert Number(true) it becomes 1, Number(false) is 0, Number(undefined) is NaN and Number(null) is 0. 👀

Number() will convert a random string, such as Number('Zahra') to NaN.

let age = '28'
Number(age) // 28 - it will be converted from a string to the number 28

let currentYear = 2021
console.log(Number(age) + 2021) // 2049 - does the mathematical calculation and prints out a number

console.log(currentYear + age) // `202128' - prints out the concatenated string without explicit conversion.

String()

The String() method will convert any non-string value into a string representation. Unlike the Number() method, String() will convert String(null) to 'null', String(undefined) to 'undefined', String(true) to 'true' and String(false) to 'false'.

The String() method can be explicit or it can be automatic if a non-string is used in a way where it will be coerced. The most straightforward thing about this method is that the value stays as it is but the data type changes to a string.

let age = 28 
String(age) // '28'

let coffee = 2 + " cups"
String(coffee) // '2 cups' - it was already coerced to a string beforehand and will stay a string with the method

let nothing = null
String(nothing) // 'null'

Boolean()

The Boolean() method is an interesting one! JavaScript already has boolean keywords true and false but there is a list of values that will ALWAYS be falsy when you force a Boolean() coercion on them:

undefined
null
false
+0, -0, and NaN
""

Everything else NOT on this list is considered a truthy value. Let's look at some code:

let emptyArray = [] 
let emptyObject = {}
let emptyFunction = function(){}

Boolean(emptyArray) // true
Boolean(emptyObject) // true
Boolean(emptyFunction) // true

These are all true because they're not on the list of falsey values. The importance of boolean values is in understanding how the value will behave if you coerce it.

Summary

There is A LOT more to this subject and I recommend reading YDKJS to get a deeper understanding of the topic. Even though this subject is a bit confusing (this was a hard blog post to write), it's important to understand the buggy parts so that you understand how JavaScript behaves to write better code.

Yes, we have TypeScript now to eliminate some of these bugs so if you wanted to, you could just start using TypeScript but I find it interesting to learn about these weird parts of JavaScript.

I hope this post helped somewhat! I can be reached on Twitter so feel free to DM if you have questions!

Resources:

The Difference Between Null and Undefined in JavaScript

Zahra Khan — Tue, 23 Nov 2021 14:31:43 +0000

Whenever I encounter null or undefined, I get incredibly confused by how each data type is used in JavaScript.

I mean, what's the difference? Don't they both express the concept of nothing?

I decided to do some research to gain a deeper understanding of the two data types. It's helpful to have this knowledge so that you can use them correctly when needed. I've also learned that sometimes, the difference between null and undefined comes up in interviews. 👀

Introduction

JavaScript has 7 primitive data types, two of which are null and undefined.

Null is an assignment value, which means that you can assign the value null to any variable when you want that variable to be empty. It is intentionally left blank and will point to an empty value.

let hasCat = null;
// nullish

Undefined is a variable that exists but hasn't been initialized YET. Which means that later, I can come back to my variable and assign it a value that it did not have before. So if I declare a variable without a value, it's just considered non-initialized.

let currentJob;
// undefined

The way that I understood both of them is that, yes, they are both very similar in that they both don't have a value that you're trying to access. If you were to compare the two in JavaScript, implicitly they're the same because JavaScript considers them both as empty values. But since they are both different data types, if you compare them explicitly, they will result in a falsey value.

null == undefined; 
// truthy

null === undefined;
// falsey

Analogy

Imagine you're moving. You bought a bunch of boxes. You have to pack up your stuff and put them inside of those boxes. But you're disorganized so you forget to label what's in the boxes. You have 5 boxes that are full of things and you have 2 boxes that are left empty. You want to label your boxes but you've already put tape on them, so you tell yourself you'll come back to it later. For now the 5 boxes are TBD. And the 2 boxes are leftover and empty. In code, that would look like:

let fiveBoxes = undefined;
let twoBoxes = null;

The five boxes with a bunch of stuff in them are considered undefined because they have things in them but you don't know what's in it YET. The two boxes left empty are MEANT to not have anything in them.

Null vs. Undefined

The difference between the two data types is:

Undefined

Declared
Uninitialized
Engine Assigned

Null

Lack of
Empty/void
Non-existent
User assigned

Go to your console, and type in:

typeof null
typeof undefined

What do you get?

Conclusion

Null and undefined are not the same. It's important to learn the difference between the two so you avoid any buggy behavior in your code and have a clear understanding of why they exist. It's also cool if you're able to clearly state the difference in an interview too 😉

Feel free to hit me up on Twitter if you're still confused! Or if you'd just like to chat.

Why You Should Learn JavaScript As Your First Programming Language

Zahra Khan — Fri, 19 Nov 2021 15:10:10 +0000

If you're thinking about learning to program but don't know where to start, JavaScript is THE language of the web. The three core technologies of web development are HTML, CSS and JavaScript.

They work together to build beautiful, interactive and dynamic webpages.

HTML is the skeleton of the website. It's where the content of your web page lives, such as the text, buttons, headings, etc.
CSS is how your web page looks. It's the presentation, the visually pleasing side of web development.
JavaScript is your functionality. This is what allows you to interact with your webpage.

When you go to a website or platform you love, you can almost always guarantee that it's built on JavaScript. It's everywhere and with good reason. So let's get into it:

What IS JavaScript?

According to the official definition, JavaScript is a high-level, object-oriented, multi-paradigm programming language.

But what does that even mean?

Jonas Schmedtmann's deconstructs this definition in his The Complete JavaScript Course.

It's a great programming language to start with because:

You can start coding right now in this exact moment, using only your browser.
JavaScript is extremely versatile. You can use it for web development, mobile development, desktop apps, frontend, backend, VR apps, and you can even use it for robotics.
Every company has an app or website and most companies use JavaScript to build those apps. So there are a TON of job postings that require JavaScript knowledge, making you more marketable.
You can visually see your code come to life.
The JavaScript community is huge so there will always be help when needed. You can also find a lot of articles and tutorials on the topic. Having issues with a code? Stack Overflow is your friend.

How to start with JavaScript in the browser

If you want to take this route and learn to program in JavaScript (and you absolutely should!) you don't need anything else except for your browser. You can open up your developer tools in Google Chrome and start writing JavaScript. Let's do it together:

Go to your web browser, type in about:blank and (if you're on a Mac) type cmd + option + j and it'll open up your console directly. (ctrl+shift+j for Windows users).
Now in your console, type in alert("hello world!")

You've written your first line of code in JavaScript!

Versatility

JavaScript is worth learning because it's versatile. One of the most useful and powerful features of the language is that you can go beyond just building web applications. You can use it for hardware, like robots, you can develop games with it, you can build full-stack applications, dive into mobile development, and the list can go on.

Most modern frameworks that you're going to use or encounter (React, React Native, Vue, etc) are built on JavaScript. So understanding the language and the fundamentals will help you get a better understanding of how the frameworks are implemented in an application.

You open more doors with JavaScript because you're not limiting yourself to one thing.

JavaScript is in demand

When you search up the popularity of JavaScript on google, the results will show that there are over 1.8 Billion websites in the world and JavaScript is used on 95% of them. According to GitHub 2021 Octoverse Report, JavaScript remains the most popular language used amongst developers.

(Photo taken from octoverse.github.com)

Since the language is popular, you won't have issues searching for a job that needs people with your skillset. You'll be employable easily.

Seeing your code come to life

When you're building a web application with JavaScript, you can visually see the results in the browser right away. You can see what you're building, how you're interacting with it, how the website is performing, and what it looks like. HTML/CSS work together to build a page but JavaScript allows it to come to life. When you add your functionality, you can see what you're doing in the live-server and in the developer tools.

Community

There is a MASSIVE JavaScript community. The language has been around for such a long time so if you have issues solving something, you can bet you'll find someone to help you when you need it. If you have a question, it's likely that a variation of it has been asked before, so you are able to google it and find solutions to your problems.

You won't have a problem finding tutorials or articles on the language. There are a TON of free courses to learn JavaScript and you can get started right now. 😏

SO if you are interesting and if my article has convinced you, I have some resources for you 🎉

Resources

Most people would start with freeCodeCamp because it is an INCREDIBLE learning tool for beginners. However, there are a few other resources that are not usually mentioned:

And my personal favorite is a paid course but if you can afford it, I highly recommend investing in it.

The Complete JavaScript Course 2022: Zero to Expert!

What I would suggest is picking one course and sticking to just THAT course. Don't let noise stray you away, you'll master the language in a focused way if you don't get distracted. There's always going to be more to learn but stick to one thing, complete it and then move on to diving deeper.

Hopefully this article has convinced you to start your programming journey with JavaScript. Let me know if you've started and what you're building 👩🏽‍💻

I am also on Twitter, let's connect and chat there!

Git: Fixing Unsigned GPG Commits

Zahra Khan — Tue, 06 Jul 2021 17:38:24 +0000

Before I started my job, all I knew how to do with Git was

git add .
git commit -m "commit message"
git push origin <branch-name>

On my first day, I learned that I needed to set up a GPG key so that I could sign my commit messages.

What's the purpose of signing your commits?

GnuPG allows you to encrypt and sign your data and communications. GPG, or GNU Privacy Guard is a public key cryptography implementation. This allows for the secure transmission of information between parties and can be used to verify that the origin of a message is genuine.

Signing your commits allows you to have ownership over your work and your communication.

However, sometimes, I forget to sign my commits and have to go back and fix it 😅

It felt daunting at first because I was afraid I'd mess up my commits and therefore, my entire branch and get into a git mess. But as I've been religiously practicing Git, I'm getting more comfortable fixing my mistakes and figuring out solutions to conflicts.

The Solution

// Detect dark theme var iframe = document.getElementById('tweet-1412440310672723968-134'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1412440310672723968&theme=dark" }

1 - Interactive Rebase. You want to begin the rebase at the commit just before the commit that needs to be modified. In my case, it turned out that NONE of my commits were signed after finishing up an entire project/task. So I had to go back and sign them all. I started at the very top of the commits:

git rebase -i 3a08ed4

This will open a text editor that'll show all the commits you have in your branch. They'll all say pick next to each commit ID and the message.

Example:

pick 3a08ed4 added Summer playlist to Spotify
pick 5a68cc9 updated README for Summer Plans
pick 6ff7e5a removed spring header

# Rebase c6e777e..39574f2 onto c992o90 (3 commands)
#
# Commands:

(Or something like that)

2 - Replace pick with edit within the editor and save your changes with ESC and then :wq

So it would look like:

edit 3a08ed4 added Summer playlist to Spotify
edit 5a68cc9 updated README for Summer Plans
edit 6ff7e5a removed spring header

# Rebase c6e777e..39574f2 onto c992o90 (3 commands)
#
# Commands:

REMEMBER: I messed up and didn't have ANY of my commits signed. If you missed one, you'd only `edit` the one you didn't sign.

3 - Once you save your changes, git will bring you back to the command line. Here, you'll do:

git commit ---amend --no-edit -S

--amend : fix/change the previous commit message
--no-edit : use the existing commit message, no need to edit this.
-S : GPG-sign the commit.

4 - After you've fixed the commit, you'll run:

git rebase --continue

5 - Lastly, to check that my commit has been signed, I'll run:

git log --show-signature

Resources:
How To Use GPG to Encrypt and Sign Messages
GnuPG Documentation
Github Documentation

An Introduction to Git Rebase: A Tutorial

Zahra Khan — Mon, 14 Jun 2021 13:41:36 +0000

A month ago, I posted on twitter that I was learning git rebase at work and how scary it felt.

// Detect dark theme var iframe = document.getElementById('tweet-1393292478393032714-829'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1393292478393032714&theme=dark" }

It got a lot of engagement from people feeling similarly about rebasing and some in the same boat as me where they felt that they didn't understand it.

A month later, practicing, watching A LOT of videos on it and rebasing almost every day, it's not so scary anymore. So I wanted to write up a tutorial on the best way I understand it in hopes that it helps you, too.

Git Rebase

The first thing to understand about git rebase is that it's designed to integrate changes from one branch into another branch. Rebasing will take all of the commits you've made on your feature branch and move them on top of the master commits that other team members have made while you were working in your branch. As a result, you'll have a nice clean tree, like so in the image, where my_awesome_feature_branch is your branch after rebasing with the master branch.

Here's HOW to Rebase

Let's say that that you got assigned to work on a really awesome feature on a massive project. This project is called The Really Cool Project. The first thing you'll always want to do is make sure that the local master is in sync with your remote master branch.

Open up your terminal, go into the project folder, and on your local machine, you'd want to run

git pull

Your local master branch should be up to date with the remote master.

Next, you'll want to checkout into a new branch so that you can work on your feature without disrupting the master branch.

Run the following command

git checkout -b my_awesome_feature_branch

Now you should be in your feature branch, ready to build that awesome feature for your project.

You've decided that you want to add and style the title of this feature. So you make a commit within your branch

git add .
git commit -m "feature/add-title"
git push origin my-awesome-feature-branch

Your local branch now looks like this

After making your first commit, you continue to work in your feature in your branch, adding more code and making progress on this cool project. You make another commit so your branch now looks like:

While you're working on your awesome feature, the rest of the team is working on some cool features too and they're merging their features to the remote master branch. Your teammate built a cool NavBar and finished it in two days, so it got merged into the remote master, while your other teammate built a cool Footer feature and it's also merged into the master branch. The git tree now looks like

The remote master is not in sync with your local master anymore. And your feature branch is now behind and doesn't have the latest changes made in the development environment. You add another commit to your branch and decide that you're ready to merge your feature with master.

What you need to do now is rebase so that your feature branch is in sync with the remote master and that you're up-to-date with the latest changes to the master. This is the flow you'd want to run:

git checkout master
git pull

I now have all of my teams changes on my local branch

Time to REBASE!

So now I want to make sure that my feature branch will also be in sync with those changes so I'll check back out to it.

git checkout my-awesome-feature-branch
git rebase master

What just happened is that your changes have been integrated with the latest master branch. Assuming that you don't have any conflicts in your files, you're ready to merge into master. If you DO have a conflict in your branch, git will let you know and you'll have to resolve those conflicts. Usually those happen when you and another developer worked on a feature that required you to make changes in the same file.

Follow Up Reading:

Official Git Documentation

From Digital Marketing to Front End Engineer in a Pandemic: Lessons Learned, Resources & Tips

Zahra Khan — Sat, 10 Apr 2021 23:42:07 +0000

Like majority of the world last year, I was in a place of panic. My friends were being laid off and furloughed from their jobs, people around me unsure of their future and financial stability, the economy being in an unpredictable place. It was hard to imagine a world full of opportunities when everything was crashing and shutting down.

I was working at a Marketing & Web Design agency at the time. I liked the team I was on but I wasn't passionate about the work. I knew that it wasn't for me in the long-term and I knew that I wanted to get into programming eventually. So why the f was I panicking about losing this job? It was terrifying to not have a plan.

I finally got the call,

"So Zahra, we're actually going to cut your salary and we think you'd do better in a sales position at the company and work on commission. You'll do well because you've maintained great relationships with our clients."

LOL WHAT.

I was already unhappy with the career trajectory in marketing. It was hard to pivot into web design within that company (which was a dead end to me) and they decided that cutting my salary to less than what I was making when I started, to give me more work and more clients AND to add the pressure of commission while the world was falling apart was going to help me succeed. Absolutely not.

One Year Reflection

In April 2020, I made the terrifying choice to quit my job without having another job offer to lean back on and attend a Full Stack Software Engineering Immersive Program at General Assembly. People's lives were falling apart and here I was — "lucky" to have a job during a pandemic — quitting it to pursue this other path. I could've taken to safe route, I could've stayed, I could've fell into the sales role that the company decided to throw me into, and I could've listened to my family and the people around me telling me,

"Times are hard, you're taking a big risk quitting now, we don't know where the economy is headed, it's going to be impossible to find a job, just wait, do it later, wait and see."

I knew it wasn't going to be easy and I knew that I'd have to commit 100%. There were a lot of unknowns and uncertainty around what would happen after the bootcamp. But what made the decision easier was that I wasn't going into the career switch blind. I had started self-teaching myself to code here and there in 2016 after graduating college. I wanted to attend a bootcamp then but I couldn't afford it at the time. And The fact that we were all in lockdown seemed like the perfect opportunity to make the most of it.

How I Got Started Learning to Code 👩🏽‍💻

In my final semester of college, I took a computer ethics course. This course wasn't exactly about programming but there was a lot of interesting information we learned about gaming, ethics of creating a program, HOW to create programs, etc. The professor casually mentioned Treehouse and how we can build our own things. I didn't think much of it at the time.

In the summer of 2016 (a few short months after graduating college), I went to a music festival in New York City. There was a massive focus around tech, from incredible sound systems to art. They had a lab full of immersive art installations that were focused on design & technology. I was fascinated and hooked.

"I want to make that." 😍

I started looking into how technology could be combined with art. I found SO many resources on creative coding, Arduino, Raspberry Pi, Processing.js, JavaScript. As I dug deeper, I learned that JavaScript was the most universally used programming language. It can be used to build desktop applications, mobile apps, web apps, VR apps, robots, etc. A world full of possibilities and creation opened up for me and my mind went back to thinking about that Computer Ethics course from college.

I wasn't sure I was going to actually like coding so I started with the free resources available to me instead of paying for Treehouse:

freeCodeCamp
Flatiron School's Bootcamp Prep JavaScript Course

I didn't finish freeCodeCamp, but I did finish the bootcamp prep course and shortly after, purchased Colt Steele's The Web Developer Bootcamp on Udemy. There's so many other courses now, but at the time this was rated one of the best, so I bought it for like $10.

Coding was HARD but I really enjoyed it and I loved creating. I was working a different job at the time though so I wasn't super consistent with it. But as I was learning the Fundamentals of Web Development through Udemy, I also learned to create CSS animations. This was a way for me to have fun with programming while learning some of the hard stuff. This is the first CSS animation I created from scratch 🥺

And then I fell off and stopped coding...because well...life got busy and I fell into another career path. And I needed a job.

How Did I Get Here? 🕒

I didn't completely stop coding. I would code here and there but I wasn't the best at time management so it was hard to stick to it with a full-time job.

(I have all respect for people who are able to make a career switch WITH a full-time job. 👏🏼)

The Timeline:

November 2016 — Started self-teaching myself JavaScript.
January 2017 – Attended tech meetups at Flatiron School.
March 2017 — Learned about #100DaysOfCode and was exposed to a whole community of wonderful people.
June 2017 — Was "kind of" coding but fell off to pursue a career in Event Marketing.
July 2018 — Took a Creative Coding and Robotics course at FIT.
September 2018 — Applied to Flatiron School, got rejected from their in-person bootcamp but got accepted to their remote bootcamp. Didn't attend. Continued with current career.
April 2019 — Applied to General Assembly. Got accepted but couldn't afford it/was too scared.
May 2019 — Got a job in Digital Marketing at a Web Design Agency (in hopes I'd be able to learn Web Design).
April 2020 — Quit that job.
May 2020 — Attended General Assembly's Full Stack Immersive Program.
August 2020 — Graduated General Assembly
January 2021 — Landed my first job in tech as a Front End Engineer. 🎉🥂🤍✨

As a result, my life has NOT been a linear line upwards. It's been a rollercoaster.

But I kept coming back to wanting to code, wanting to pursue a career in it, being able to visualize what that would look like — and it wasn't until I set my full focus on it that things started to come into fruition.

There are two approaches to life:

You can be active and control things and live your life how you want to, or
You can play the oblivious card and just let things happen.

And while I love the idea of the oblivious approach to life and still strike gold — the satisfaction you get when you realize, "I made that happen, I DID that" is much more rewarding.

So Here's What I've Learned

I've made so many mistakes throughout this entire process — if I knew what I know now, my mental and emotional health would probably be in a better place 😭

1. Compare yourself to yourself, and only yourself

If you're attending a bootcamp, you will encounter people who are on a completely different level of understanding than you are. Don't compare your progress, comprehension, what you get/don't get to someone else. You don't know them. You don't know their journey or why they're in a bootcamp. Instead, compare yourself to where you were on day one to where you are now. Your own growth is the only one that matters. Everyone's path is uniquely theirs. That applies if you're self-teaching yourself as well.

2. Focus on the design and aesthetic of your portfolio

Tech recruiters don't know the difference between good and bad code. If your portfolio looks good, it'll be assumed that the code is good. Not saying to write bad code, but make sure to take a little bit of extra time to focus on the design of your portfolio. I'd use sites like dribbble, siteinspire, awwwards, the gallery and Pinterest for inspiration. You can also take small parts of websites you already really like and build them into your portfolio, frankenstein a beautiful site of your own.

3. Let go of the distractions

When you're learning to program and especially when you're making a career switch, you're going to need to learn to be selfish with your time. Anything or anyone that's taking your attention away from that and isn't serving you in a positive way does not belong in your life. It'll cause you unnecessary distress and you don't need more of that.

4. Find a Community

In a pandemic, it's hard (and impossible) to find an in-person community. So make a Twitter account and be active with your social presence. There are so many amazing ones such as the #DEVCommunity, #100DaysOfCode, #CodeNewbie, #WebDev, #WomenWhoCode, to name a few. You can also get active on slack channels. I used Ladies Get Paid, Tech Ladies, Remote Women, Built by Girls, WWWCode. These were great for job searching as well.

It'll be helpful and beneficial to surround yourself with people who are going through the same things as you. These people are there to encourage and support you, as you are for them. It's extremely valuable to be around people who "get it."

5. Build your soft skills

It's really hard to network when we can't do it in-person. Here's what I did:

I made an account on LunchClub — they connect you with other professionals so that you can network virtually. Everything is currently remote - your job, the bootcamp, networking events, meetups, etc. So I wanted to practice being able to hold a conversation with people virtually. To learn to ask the right questions and break through the awkwardness we all feel. It's a valuable skill for interviewing AND genuinely connecting with someone and having a conversation. Making friends, potentially, too. I know I like to get to know people I'm working with outside of the normal day-to-day job conversations, so it gave me the foundation to get to know my current teammates as well.

6. Know your WHY

You started programming for a reason. Whether you want to switch careers or make your current job more efficient, you must have a strong WHY because coding is not easy. You will get upset, frustrated, discouraged and have moments where you feel like the dumbest person in the room. It's important to remind yourself of why you started in the first place. That'll help you keep going in moments of defeat.

7. Ask for technical assessments even if you get told that the role you applied for isn't for juniors

The job search process is ROUGH. Especially landing your first job. No one will tell you that landing the first role sometimes depends on luck (positioning yourself in the right place at the right time) and someone deciding that they will take a chance on you. However, when I was job hunting, I would see roles posted in Slack Channels and I would connect with the job poster and they'd tell me, "We're not hiring juniors right now." Instead of being like "Oh ok, thanks." I would ask them to take their technical assessments anyway. Most recruiters are open to sending them to you. You want exposure and practice. Especially if you're new, you're not going to know what to expect from a technical assessment. Also, what if you complete that technical assessment, send it back, and that company decides "Well shit, this person I thought was a junior can do the job" 😉 This also helps you build connections for future opportunities as well.

8. Have a CLEAR vision of what you want your career to look like and don't let people sway you

I have a background in Marketing. The recruiters that I worked with told me that because of my background, it's more likely I'd land a role as a "Marketing Developer" or in "Email Marketing" and BASED ON THE STATS, very unlikely that I'd land an engineering role as my first job out of a bootcamp.

I knew that I wanted to work in frontend. So I didn't listen. DO NOT let people sway you. I've seen people land intermediate level engineering roles from self-teaching themselves and switching careers WITHOUT a degree in computer science, WITHOUT bootcamp experience. It's not impossible to get what you want.

9. Do not neglect yourself, your mental health or your emotional wellness

When you're learning to code, you want to know how everything works. There's so much information overload. Do you apply to jobs? Do you build projects? Do you study algorithms for interviews? Do you follow along tutorials to retain information after a bootcamp? It's overwhelming but taking care of your mind and body is what makes productivity possible. Making sure that you're sleeping, exercising, journaling, eating healthy is essential to your well-being.

I made the mistake of neglecting myself and my needs — physically, emotionally, mentally — and focusing my energy on things that are irrelevant to my life now. I wasn't sleeping well, eating well, my mind was a mess and I was anxious all the time. As a result - as soon as I signed the job offer, I crashed.

10. CELEBRATE 👏🏼 YOUR 👏🏼 MILESTONES 👏🏼

Make sure you celebrate yourself and surround yourself with people who celebrate your milestones. Completing a bootcamp is a MASSIVE win! Be proud of yourself and celebrate it. Landing your first interview is a win! Getting a first technical assessment is a win 👏🏼 Failing your first technical assessment is ALSO a win because you LEARNED. And when you land that first role, celebrate HARD. And keep track of these milestones and wins somewhere so when you're having a shitty day and you're discouraged, you can look back at what you've accomplished. Switching careers and learning to code is f-ing hard and not many people have the guts to even get started. You deserve to be celebrated. ✨

How I Landed My Job & How That's Going 💙

I landed my first role in tech through Twitter. I connected with an awesome person who put me in the interview pool for the company. I can't say that this is a massively unique story. A lot of it had to do with luck. However, I wouldn't have learned about the company or their interview process otherwise.

Having a social presence and being involved in the community is SO SO important. My life has changed for the better by being active on Twitter. The people I've met, the friendships I've made and the knowledge I've gained and will continuing gaining are invaluable. Most of the interviews I landed were from connecting with people on Twitter.

I'm a Front End Engineer at BlockFi and it's the best team I've worked on. You want to work on a team that's supportive of your growth, open to asking and answering questions, don't think that anything is too dumb to ask, listens to your needs, and is encouraging. That's exactly what I got and I'm excited to see how that will progress and how I can contribute my skills further to the team. I'm just so happy I get to code for a living and learn and grow in this field. 🥺 💙

Find something YOU love and not what someone tells you to do/love. Something that finds its away into your every passing thought. Grip onto that and don't ever let it go because what you have is a love for something that not many people seem to find, and a dream that you could very well make into a reality. If I can do it, so can you.

52 Virtual Cups of Coffee: A Developers Journey for Navigating Uncertainties

Zahra Khan — Thu, 10 Dec 2020 00:52:00 +0000

I have been trying to work out life's riddle for the past 8 months. After having a conversation with my roommate on how lost and clueless I felt in my job search, she recommended that I read the book 52 Cups of Coffee. The book is about a girl who embarked on an experiment to having 1 cup of coffee each week for a year with someone she wouldn't normally meet.

"Who you are in five years depends on the people you meet and the books you read."

This quote was on the first page of the book. I started pondering on it and realized how much I resonated with it. It's true, you are made up of the people you surround yourself with and the words you consume. Parts of who I am are made up of the inspiring people I've met in my life. My perspective in life has broadened because of the books I've had the opportunity to read.

My background 👩🏽‍💻

I am a Software Engineer looking for my first role in the tech industry! Earlier this year, I saw an opportunity to leave a career path that I was deeply unhappy in to finally pursue Software Engineering. I've been thinking about this path since 2017 when I went to a music festival in New York City and got to experience interactive art, sound systems and robots all created with code. I didn't have the guts to do anything about it then.

In May 2020, I got accepted to General Assembly's Full Stack Software Engineering Immersive Program. Since then, I've been committed to putting my 100% into making this career-transition. And in the future, I'd like to get into robotics and hardware or just something extremely cool with AI and machine learning.

Prior to this, I was working in Events & Digital Marketing and acquired a very heavy client-facing background. This is where I've developed a lot of my soft skills in working with people and being around different personalities. I love people and collaboration so I'll never turn away an opportunity to talk to others.

This Project ☕️

As I was reading "52 Cups of Coffee," I decided that I want to have a (virtual) cup of coffee with someone too and pick their brains about what they're up to in life. I'm inspired by all kinds of people doing all kinds of interesting and cool things, so this wouldn't be restricted to just engineers. I want to get to know entrepreneurs, creators, people who are on untraditional paths to doing amazing things and learn to ask good, insightful questions.

But HOW? We're in a pandemic! How do I message people I want to talk to — who are probably getting other messages from other people — and ask to have a zoom coffee meeting with them? How do I ask without the conversation sounding so transactional? I could use LinkedIn, Twitter, maybe Instagram?

I've absolutely made genuine connections on Twitter. I think the tech community is supportive and wonderful and I learn new things all the time. And I've also had some luck on LinkedIn. But I wanted to branch out and I wanted to have genuine conversations with different kinds of people to gain perspective and navigate my own uncertainties. I decided to join LunchClub.

I have my first video call with a founder of a sparkling wine brand on Friday at 9 a.m. I'm going in with the expectation that I will learn something from the choices he's made in his life and take them along with me on my own journey.

I'm excited, I'm going to jot down questions to ask 🤗 So until next week...we'll see what happens!

Forem: Zahra Khan

The Most Commonly Used HTML Tags

What is HTML?

HTML Document Structure

Common HTML Tags

images are from MDN

Final Thoughts

How to Create Aliases on macOS with Terminal

Creating Aliases for Zsh Shell

Example Aliases

JavaScript Type Conversion & Coercion Explained

Introduction

Implicit Coercion

Explicit Coercion

Number()

String()

Boolean()

Summary

Resources:

The Difference Between Null and Undefined in JavaScript

Introduction

Analogy

Null vs. Undefined

Undefined

Null

Conclusion

Why You Should Learn JavaScript As Your First Programming Language

What IS JavaScript?

How to start with JavaScript in the browser

Versatility

JavaScript is in demand

(Photo taken from octoverse.github.com)

Seeing your code come to life

Community

Resources

Git: Fixing Unsigned GPG Commits

What's the purpose of signing your commits?

The Solution

REMEMBER: I messed up and didn't have ANY of my commits signed. If you missed one, you'd only edit the one you didn't sign.

An Introduction to Git Rebase: A Tutorial

Git Rebase

Here's HOW to Rebase

Time to REBASE!

From Digital Marketing to Front End Engineer in a Pandemic: Lessons Learned, Resources & Tips

One Year Reflection

How I Got Started Learning to Code 👩🏽‍💻

How Did I Get Here? 🕒

(I have all respect for people who are able to make a career switch WITH a full-time job. 👏🏼)

The Timeline:

So Here's What I've Learned

1. Compare yourself to yourself, and only yourself

2. Focus on the design and aesthetic of your portfolio

3. Let go of the distractions

4. Find a Community

5. Build your soft skills

6. Know your WHY

7. Ask for technical assessments even if you get told that the role you applied for isn't for juniors

8. Have a CLEAR vision of what you want your career to look like and don't let people sway you

9. Do not neglect yourself, your mental health or your emotional wellness

10. CELEBRATE 👏🏼 YOUR 👏🏼 MILESTONES 👏🏼

How I Landed My Job & How That's Going 💙

52 Virtual Cups of Coffee: A Developers Journey for Navigating Uncertainties

My background 👩🏽‍💻

This Project ☕️

REMEMBER: I messed up and didn't have ANY of my commits signed. If you missed one, you'd only `edit` the one you didn't sign.