Photo by Georgie Cobbs on Unsplash

Building your portfolio website as a developer can be exciting and simultaneously overwhelming — but it doesn’t have to be! Keep these ground rules in mind when getting started.

They say a website makes a business “real”, and so making your website will essentially make you “real” to employers. A web developer’s portfolio site serves as a business card, resume and collection of work samples all in one. …


Photo by Paul Skorupskas on Unsplash

Focus is an important component of web accessibility. Knowing more about focus allows us to build websites with greater control and customization for all users to navigate.

What is Focus?

When you click into a text field just before typing, and you see a soft blue glow outlining the text box, this is the act of focusing. You are telling the website, “Hey text input box, I’m talking to you!”.

Focus is defined as the control on the computer screen that receives input from the keyboard (typing) and clipboard (when you paste text). …


A framework to getting started when incorporating accessible design into your website

Photo of glass ball reflecting trees and sky upside-down, by Mathilda Khoo on Unsplash
Photo of glass ball reflecting trees and sky upside-down, by Mathilda Khoo on Unsplash
Photo by Mathilda Khoo on Unsplash

Being knowledgeable about website accessible design and development is an important and necessary component of building websites and applications so that they can be accessed and used by everyone.

Making a website accessible might mean ensuring that users with an impairment or disability can still interact with and use the site functionally, however the concept of accessibility is not limited there. Often, optimizing a website for accessibility and responsiveness improves the experience for most users altogether, regardless of a diagnosed impairment.

For example, someone with low-vision may have…


Building a search function to use alongside YouTube API

Once you have your YouTube API key, you’ll likely want to implement a search function so users can start searching for videos. This articles shows you how to implement TYSearch in your React app in a few simple steps.

1. Install youtube-api-search

In your project directory, you’ll first want to install youtub-api-search like so:

 # npm install youtube-api-search

2. Import YTSearch in your app

After installing, you’ll need to import it in your app like so:


Photo by Jonas Denil on Unsplash

There are two lesser-used statements and operators in Javascript, the if…in and for…in statements. Let’s dive in to see them in action!

for…in

The for…in statement enumerates over each key in an object. It’s worth noting that this statement will enumerate over keys that are string data types, but will ignore symbol types.

The syntax for for…in, according to MDN, is as follows:

for (variable in object)
statement

I like to think of the for…in statement as “for each key in the object”. This has become my mental-model-mantra.

So for example, if we have an object, person, we could use…


Photo by Markus Spiske on Unsplash

Responsive design principles ensure a website looks good on various-sized devices — phones, tablets and laptops. Building a website with responsive design in mind involves several different key pieces, one of which is media queries. For this week’s blog, we’ll focus on getting started with media queries from scratch!

Viewport Meta Tag

When incorporating responsive design principles and media queries, you’ll want to incorporate a line of code to specify the viewport size. This viewport meta tag will specify the size of the viewport (i.e., the visible area of an app/webpage) based on the device being used. For example, the…


Photo by Meelika Marzzarella on Unsplash

I was recently traveling to a remote location without internet, but I wanted to continue practicing algorithms as part of an online course I was taking. You can study programming without the internet — after all, that’s how all of this began! You can also study programming without a computer (hello again textbooks). And I’m sure 50+ other ways if you wanted. But what if you don’t want to travel with heavy textbooks? Or what if your learning is guided by videos or an interactive website with an IDE dependent on internet connection? …


You may encounter the need to use a virtual machine at some point in your development practice. While the thought may seem both exciting and daunting, don’t underestimate your ability to get it up and running successfully!

Virtual machines like Vagrant are a computer file that only exists virtually — in code. It acts just like any other computer except without the hardware. And the beauty of this is that it can be installed and setup right on your own computer. Vagrant goes hand in hand with VirtualBox. VirtualBox is the virtualization engine that allows Vagrant to run. Together they…


Photo by Sara Kurfeß on Unsplash

YouTube’s API is super powerful. It can provide your app with access to over 5 billion videos, with tons of new content added daily. In a few simple steps, you can access YouTube’s API and incorporate it into your app so users can search for videos and play them on your website (without the need for login or OAuth).

Getting Your API Key

First, you’ll want to head over to get an API key at console.developers.google.com. Here, you can create a new project or select an existing project:


Photo by Steven Ramon on Unsplash

Accessing JavaScript elements in an array or characters in a string is seemingly simple. However, arrays and strings are different data types in JavaScript, which means how you can change and manipulate them differs!

Let’s say we have an array of dog names:

let dogs = ["Senna", "Mars", "Timber", "Rooney", "Chewy"]

Let’s access the element at index 3.

dogs[3] 
#=> "Rooney"

Now let’s say Rooney goes by the nickname “Rainbow”. You can re-assign that index of the array to his new nickname like so:

dogs[3] = "Rainbow"

And when you return the array this time…

dogs
#=> ["Senna", "Mars", "Timber", "Rainbow"…

Laina Karosic

Software Engineering

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store