Forem: Maggie

Why is < meta charset="utf-8" > important?

Maggie — Mon, 19 Oct 2020 00:52:29 +0000

I'm currently participating in the #100DaysOfCode challenge and documenting my journey on Twitter. So far, I've been reviewing the holy trifecta of web development: HTML, CSS, and JavaScript. On Day 4, I shared that one of the things I reviewed was the importance of including <meta charset="utf-8"> in an HTML file.

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

I got a response asking to explain why. As I was typing my answer, I found that I had a lot to say to fit into one tweet, and it would be easier to write up a blog post.

What is `<meta charset="utf-8">`?

Let's break down the line <meta charset="utf-8"> to derive its meaning:

<meta> is a HTML tag that contains metadata about a web page, or more specifically, descriptors that tell search engines what type of content a web page contains that is hidden from display.
charset is an HTML attribute that defines the character encoding for your browser to use when displaying the website content.
utf-8 is a specific character encoding.

In other words, <meta charset="utf-8"> tells the browser to use the utf-8 character encoding when translating machine code into human-readable text and vice versa to be displayed in the browser.

Why 'utf-8'?

Today, more than 90% of all websites use UTF-8. Before UTF-8 became the standard, ASCII was used. Unfortunately, ASCII only encodes English characters, so if you used other languages whose alphabet does not consist of English characters, the text wouldn't be properly displayed on your screen.

For example, say I wanted to display some Arabic text that says "Hello World!" on a screen using the following snippet of code with the charset set equal to ascii:


 html
<!DOCTYPE html>
<html>
<head>
  <meta charset="ascii"> <!-- char encoding is set equal to ASCII -->
</head>
<body>
  <h1>!مرحبا بالعالم</h1>
</body>
</html>

Now, if you go to your browser, you'll see that the text is displayed as gibberish 🥴:

However, if we change the charset to utf-8, the code is as follows:


 html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> <!-- char encoding is set equal to UTF-8 -->
</head>
<body>
  <h1>!مرحبا بالعالم</h1>
</body>
</html>

The text is now displayed properly 🥳:

Thus, UTF-8 was created to address ASCII's shortcomings and can translate almost every language in the world. Because of this and its backward compatibility with ASCII, almost all browsers support UTF-8.

What if I forget to include `<meta charset="utf-8">` in my HTML file?

Don't worry — HTML5 to the rescue! 🦸

The default character encoding used in HTML5 is UTF-8. This means if you include <!DOCTYPE html> at the top of your HTML file (which declares that it's an HTML5 file), it'll automatically use UTF-8 unless specified otherwise.

Furthermore, most browsers use UTF-8 by default if no character encoding is specified. But because that's not guaranteed, it's better to just include a character encoding specification using the <meta> tag in your HTML file.

There you have it. 🎉 Feel free to leave any comments or thoughts below. If you want to follow my #100DaysOfCode journey, follow me on Twitter at @maggiecodes_. Happy coding!

The Difference Between a Library and a Framework

Maggie — Sun, 04 Oct 2020 21:33:48 +0000

Introduction

You’ve probably heard of the terms “library” and “framework” being often used interchangeably. This may be because they both have a similar purpose; both libraries and frameworks provide reusable code written by someone else that solves a common problem. However, there is a distinct difference between the two.

Main Difference Between a Library and a Framework

The main difference between a library and a framework is determined by who controls the development process, which is known as inversion of control. In other words, inversion of control defines the relationship between the code and a library and framework, respectively.

The diagram below summarizes the difference between a library and framework using the inversion of control property:

Your Code Calls a Library

You, the developer, control a library by calling specific functions from a library to insert into your code depending on your app’s needs.

Let’s use the analogy of baking a cake. You, the baker, have control over the baking process. You have a recipe and some of the ingredients, which represent your program. However, you need to go to the grocery store to buy the rest of the ingredients, which represents a library.

A Framework Calls Your Code

On the other hand, the control is inverted; the framework is in control of your code by having defined an architectural structure that you must follow when developing your app and the framework will call your code when needed.

Let’s continue using the baking analogy used in the previous section. Rather than baking the cake yourself, you go to a bakery to buy a cake. You get to choose the size, flavor, shape, and decorations, and the bakery will bake the cake for you according to your specifications. The bakery represents a framework, and your customization represents your code.

Summary

There are other subtle differences between a library and framework, but the main difference between the two is defined by the inversion of control property, which defines who controls the development process. In summary:

Your code controls the library.
The framework controls your code.

Feel free to comment below with any thoughts or questions!

Problem Solving During Interviews For Anxious People

Maggie — Sun, 04 Oct 2020 21:07:42 +0000

It’s important to note that I’m not a mental health expert. This is based on my personal experience. If you’re experiencing any serious mental health issues, please reach out to someone you trust or a mental health expert immediately.

Introduction

Unfortunately, the technical interviewing process for software developer jobs is deeply flawed. According to a research study conducted by North Carolina State University and Microsoft, white board technical interviews assess test anxiety rather than coding skills and resulted in women and minorities scoring worse.

I’ve personally experienced anxiety during technical interviews that has negatively impacted my performance and led to many rejections. In response to this, I created a set of steps that I use to practice for technical interviews and then use during interviews. Having a routine has immensely helped me perform much better during technical interviews. Let’s begin!

Problem Solving Routine

Breathe

First, breathe. Inhale, exhale. Breathe as many times as you need to. Center yourself. Believe in yourself. You got this!

This step can be repeated as many times as necessary throughout the process.

Understand the Problem

It’s easy to jump right in and start coding right away. However, understanding the problem fully before coding can save you from wasting time later.

If you’re taking a live interview, ask questions. Ask the interviewer to repeat the problem as needed. You can even restate the problem to the interviewer to make sure you understand the problem before you start coding.

List the Problem Requirements

Before you start coding, gather the following pieces of information:

What’s the program supposed to do?
What’s the input and data type of the input?
What’s the output and the data type of the output?

This will help you understand the problem, identify any missing info, and focus on the solution.

List Possible Solutions

During this step, write down some possible solutions while speaking your thoughts out loud. If you’re in a live interview, this will help the interviewer understand your thought process, and they can provide further insight as they see fit.

If there's more than one solution, choose the solution you're most comfortable coding, even if it's not the most efficient solution or a brute-force solution. It’s better to have a solution than none at all. You can always optimize your solution in the end if there’s time.

Test Your Solution

Run a few test cases. Check if there are any edge cases or bugs. Refactor as needed.

Optimize Your Solution

If you have time, look for ways to improve your solution. This is where Big O notation comes into play.

Summary

If you’re someone who suffers from test anxiety, know that you can succeed. Having a problem solving routine may help you manage some of that anxiety during technical interviews, as it has for me. I hope my problem solving routine helps you in some way, and feel free to change it to fit your needs.

Python Strings for Beginners

Maggie — Wed, 30 Sep 2020 03:42:50 +0000

Strings are an integral data type used in multiple programming languages, including Python. You may or may not have heard of strings. Don’t worry, I’m here to help.

We’re going to go over:

What strings are
How to create strings
How to access characters in a string
How to find the length of a string
How to check if a character(s) is in a string

Let’s get started!

What are Python Strings?

Strings in Python are characters enclosed in quotes. That’s it. You can use single, double, or triple quotes! More on that in the next section.

Each character in the string is given a number called an “index” to represent its position within the string. The first character’s index is zero, the second character’s index is one, and so on.

Strings are immutable, which means you cannot edit strings once they’re created. In other words, an entire new string is created every time you add or delete a character within a string.

Creating Python Strings

There are three ways to create a string in Python. To create a string in Python, you surround the characters that make up the string using one the following.
You can use single quotes.

'Hello World'

You can also use double quotes.

"Hello World"

Lastly, you can use triple quotes to create a multi-line string.

"""Hello
World"""

Accessing Characters in a String

As you work with strings, you may want to access one or multiple characters in a string. You can do so by using the index characteristic of strings.

To access one character in a string, use a technique called “indexing.” The format is as follows: the string variable is followed by square brackets that enclose the index of the character we’re trying to access.

Let’s say we have a string called name that holds the value Python, and we want to access the first letter. We do that by:

name = "Python"
print(name[0])

This will return a new string with the result P.

To access more than one character in a string, use a technique called “slicing.” The format is the same as indexing, except you can include one to two numbers separated by a colon within the square brackets. The two numbers represent a slicing range; the first number represents the beginning index, and the second number represents the ending index. Both numbers can be positive or negative. Positive numbers represent the indexing of a string of left to right, whereas negative numbers represent the indexing of a string from right to left.

The following is a summary of the possible representations of how to slice a string:

string[beginningIndex:endIndex] returns the beginningIndex and up to but not including endIndex
string[:endIndex] returns the beginning of the string to but not including the endIndex
string[beginningIndex:] returns from the beginningIndex to the end of the string

Let’s use the same example from before, but say we want to access the first three letters in the string called name.

name = "Python"
print(name[0:3])

This will return a new string with the result Pyt.

Two things to keep in mind is that:

If you include an index out of range, you’ll get an IndexError
If you include a non-Integer value as an index, you’ll get a TypeError.

Adding Strings Together

Adding strings together in Python is called concatenation. To concatenate strings together in Python, use the plus operator:

print("Hello " + "World")

This will create a string with the value Hello World.

Finding the Length of a String

To find the length of a string, use Python’s built-in len() function:

print(len("Python"))

This returns 6.

Checking if a Character or Substring Exists in a String

To check if a character or substring (part of the string) exists in a string, use the in keyword that’s built into Python. This will return True or False.

For example, if you want to see if “World” exists in “Hello World”:

print("World" in "Hello World")

This returns True.

You can also iterate through a string and access each character. The most efficient way is to use a for loop. There are two ways to do this.

Use the in keyword within the for loop:

name = "Python"
for i in name:
    print(i)

This code snippet will access and print each letter in the string from beginning to end. It outputs:

P
y
t
h
o
n

Use the range() function in the for loop:

name = "Python"
for i in range(len(name)):
    print(name[i])

This code snippet will access and print each letter in the string from beginning to end with a range of 0 to 5. It also outputs:

P
y
t
h
o
n

Conclusion

There’s much more you can do with strings. Python has many built-in functions, like lower(), upper(), and split(). You can format your strings using something called escape sequences or the built-in format() function. So much fun!

Keep learning and comment below if you have any questions or comments!

What is Node.js and Why You Should Use It

Maggie — Tue, 29 Sep 2020 22:56:07 +0000

Node.js has become a popular tool used in web development. But what is it? What are the benefits to using it? Should you use it? This blog post will answer these questions. Let's begin!

What is Node.js?

Node.js is a runtime environment that executes JavaScript code on the server-side. (A runtime environment is the infrastructure that supports building and running software applications.) Node.js is built on top of Google’s Chrome V8 JavaScript engine, which is one of the fastest JavaScript engines. To understand the relevance of Node.js and why you should use it, let’s take a look at its history.

Why was Node.js Created?

Before Node.js was created, JavaScript was designed to run in the browser. However, with the creation of Node.js in 2009, JavaScript could now be run outside of the browser on a server of your choosing, including your local server. With the ability to run JavaScript outside of the browser, Node.js expanded what programmers can do with JavaScript on the server-side. You can interact with the file system by interacting with the files and folders on the server. You can also interact with the database and query data from it. Lastly, you can create a web server for your application, which is mainly what Node.js is currently used for.

What are the benefits to using Node.js?

Node.js is simple to implement and use if you already know JavaScript, since Node.js is built in JavaScript. This means you’ll be able to build both the frontend and backend of your application. Hello to being a full stack developer!

You’ll also have access to a bunch of JavaScript packages and libraries when you install Node.js. This is because when you install Node.js, you have the option to download npm, a package manager for Node.js and JavaScript.

It’s also an open-source, cross-platform tool; it can be run across multiple operating systems, including Windows, Linux, and MacOS.

Finally, if you’re planning on building a real-time, data-driven application or a dynamic single page application (SPA) that requires high scalability, Node.js is for you!

If you’re still not convinced or have any questions, feel free to comment below!

Everything You Need to Know About Outreachy’s Application Process

Maggie — Wed, 09 Sep 2020 06:48:13 +0000

As an Outreachy alum and mentor, I’ve offered to help Outreachy applicants for the past two application rounds by answering questions, giving advice, and looking over essays. I figured I’d compile all of my advice in one doc. Let’s get started!

What is Outreachy?

Outreachy is an organization that provides paid, remote internships twice a year to those who are underrepresented in tech all around the world. Internships consist of interns working with mentors to contribute to an open-source project during a three-month period.

The Application Process

The Outreachy application process consists of two distinct stages: initial application and contribution period. To read more about the process, check out Outreachy’s Applicant Guide, which is an in-depth guide detailing EVERY step of the process. It’s your Holy Grail when applying to Outreachy!

Initial Application

The initial application consists of your typical “Who are you?” questions followed by a number of essay questions to determine if you’re eligible.

Tips

I recommend reading Outreachy’s Eligibility Criteria before filling out the initial application to make sure you’re eligible before applying. Otherwise, you may not make it past the first round. If you haven't already done so, check out the Applicant Guide while you're at it. Outreachy lists the essay questions for potential applicants to see before applying and lists essay tips to help you submit a stellar application. (What did I tell you? The Applicant Guide is your Holy Grail!)

While you’re writing, keep in mind that your goal is to tell your story in the best way possible; you’re telling your story about how you persevered in an industry that may have made it hard for you to succeed. Make sure to include as much detail as possible (but not too much) in your responses so Outreachy can properly determine if you’re eligible or not.

When you’re done writing your essay responses, rewrite your first draft as many times as needed. If you’re not confident in your English writing skills, ask other people to take a look or use a grammar and spell checker.

Contribution Period

Next up is the Contribution Phase! It consists of two parts:

Making at least one contribution to the project(s) you chose.
Filling out the final application for the project(s) you contributed to.

Tips

Start early. Choose 1-2 projects to contribute to, which is the recommended amount by Outreachy. Each project will list project information, skills and skill levels required, and project mentor details. Reach out to the mentor and introduce yourself to the community. From there, mentors will guide you through the contribution process.

Each project will have its own contribution process. There isn’t an ideal number of contributions to submit for each project. Remember, quality > quantity. Projects want to see you invested in the project early on and have made at least a few valid contributions. They also want to see you interact with the community. You can do so by saying hello to newcomers or answering questions.

After making at least one contribution to a project, you have to fill out a final application to be considered for the internship. If you can guess where the questions are located for potential applicants to see before applying, I'll give you a piece of virtual candy. Answer: the Applicant Guide!

Other Common Q&As

Timeline? Deadlines? Guess where? The Applicant Guide! (You get another piece of virtual candy if you guessed right.)
What type of projects are there? Depending on what open source projects are participating and what intern projects they offer, the project list can differ every round. However, there is usually a variety of projects available, such as frontend and backend development, technical writing, QA, research, mobile development, etc.
How much programming experience do I need to have? There’s no right answer. Every project is different but having some programming experience will help a lot for most projects.
Do I need to have open-source experience when I apply? No!
Can I apply again even though I was rejected X number of times? Of course. I was rejected the first time because I started too late in the process. I took what I learned from the first rejection and applied again. I got the internship the second time around!

Good luck!

How I Applied to a Tech Job Using a POST Request

Maggie — Sat, 05 Sep 2020 21:14:46 +0000

I recently tweeted about a job application experience where I had to send my application using a POST request.

maggie 👩🏽‍💻🌱

@maggiecodes_

I just applied to a job by sending a POST request with my deets to their API endpoint 🤯

00:34 AM - 05 Sep 2020

49 982

It gained a lot of attention and bewilderment, so I'm going to use this post to ~demystify~ the process.

The Job Posting

The job I applied to was for a Technical Support Engineer position at Plaid. They provide two ways to apply: through a typical form or sending an API request. I chose to do the latter!

How I Did It

Gathering the Info

The job application provided a sample POST request body and the API endpoint, as shown below:

Now, all I had to do was gather my application information for the POST request and then send the request!

Using Insomnia to Send the Request

There are numerous API tools out on the market. I chose to use Insomnia, an open-source API client application, to send my request. Luckily, Insomnia was easy-to-use and quickly walked me through the steps of creating an API request:

After opening Insomnia, click on New Request.
In the window that pops up:
- Type in a name for your request under Name.
- Click the drop-down menu and choose POST. A new drop-down list will appear next to POST that will ask you if there is a body to your request. Choose JSON, which was specified in the API instructions given in the job posting.
- Click the Create button.
Paste the raw JSON request body with your application information into the field under POST.

Make sure to remove the optional comments within the request body.
Paste the API endpoint that was provided in the job application next to POST in the top right corner.
Click the Send button!

Results

After clicking Send, you should receive a HTTP response. If it all is well, you will see a 200 OK HTTP Response with a message saying "We got your application and we'll get back to you shortly!"

Tada! There you have it! 🎉 You should have been able to send a simple POST request to an API endpoint that contains your job application.

Forem: Maggie

Why is < meta charset="utf-8" > important?

What is <meta charset="utf-8">?

Why 'utf-8'?

What if I forget to include <meta charset="utf-8"> in my HTML file?

The Difference Between a Library and a Framework

Introduction

Main Difference Between a Library and a Framework

Your Code Calls a Library

A Framework Calls Your Code

Summary

Problem Solving During Interviews For Anxious People

Introduction

Problem Solving Routine

Breathe

Understand the Problem

List the Problem Requirements

List Possible Solutions

Test Your Solution

Optimize Your Solution

Summary

Python Strings for Beginners

What are Python Strings?

Creating Python Strings

Accessing Characters in a String

Adding Strings Together

Finding the Length of a String

Checking if a Character or Substring Exists in a String

Conclusion

What is Node.js and Why You Should Use It

What is Node.js?

Why was Node.js Created?

What are the benefits to using Node.js?

Everything You Need to Know About Outreachy’s Application Process

What is Outreachy?

The Application Process

Initial Application

Tips

Contribution Period

Tips

Other Common Q&As

How I Applied to a Tech Job Using a POST Request

The Job Posting

How I Did It

Gathering the Info

Using Insomnia to Send the Request

Results

What is `<meta charset="utf-8">`?

What if I forget to include `<meta charset="utf-8">` in my HTML file?