Image for post
Image for post
Photo Creds:

I usually write about technical topics, but today I thought I’d share my journey to becoming a web developer, perhaps for inspiration.

Many years ago, fresh out of college, armed with a very expensive degree in Electrical Engineering, and a laundry list of hopes and dreams, I set off to conquer the world. After a few rejections, I landed my first job as a field engineer with… let’s call them Agency X. Everything was great at first. I rotated around to all the different departments, and learned how everything was connected, and how a project comes together from the very beginning, to the very end. …

I had a mock interview recently where the person on the other end asked the following question:

“Write a function that takes an input string and a character set and returns the minimum-length substring which contains every letter of the character set at least once, in any order.

If you don’t find a match, return an empty string.”

At first I thought, “oohh ok that shouldn’t be too bad… lets do it!”. Shortly thereafter, the wind was gone from my sail when I realized I was heading down the wrong path, and had no idea how to fix it. I recognized that there was a brute force solution, and chose not to go that route, but in hindsight that’s what I should have done. …

From the official docs: “Hooks let you use more of React’s features without classes.” Huh? 😳

Ever go straight to writing class components because you feel like ‘eh, its gonna turn into a class later on anyway, so might as well start that way’? We’ve all done it — I do it all the time, but now we don’t have to worry about that because… Hooks! So what is it? Its an upcoming feature that allows you to use state (and other React features) with functional components, so you don’t need to write a class. 🎈🎉

React is pretty cool and fun to work with, but the problem is that it doesn’t yet have a ‘stateful primitive’ that’s simpler than a class component. Basically you need to use a class if you want a component to have state, but now with hooks we’re able to write functional components like…

A couple months ago I was asked by an interviewer to explain the virtual DOM. I had a momentary lapse and found myself explaining the “regular DOM”. I felt pretty silly when I realized what I was saying… only because at the time, I actually DID have a fair understanding of the virtual DOM (but he’ll never know that). Le sigh 😞. Anyway, like I say all the time - its fine to make mistakes, but you should always learn from them.

So what is the virtual DOM anyway? Here’s what the official React documentation says: “The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.” So what does that mean? Well first, a little back story on the DOM might be helpful. The DOM (Document Object Model) is an in-memory representation of the HTML text. Basically the HTML elements become “nodes” in the DOM, which is a tree-like structure, that looks something like…

*This post assumes you know how to use the semantic-ui-react library. If not, check out the ‘usage’ documentation here.

I’m working on a React calendar app, because I want to challenge myself and keep learning, and I rarely ever choose the path of least resistance. I also want to make it look nice, so I decided to use the semantic-ui-react library. I didn’t realize that it would be so difficult to create a grid that looks like a calendar — meaning the cells look like squares instead of small rectangular rows in a table. …

Cypress is a UI testing tool, that you can use to run through your application as if it was an actual user (except its much faster and you’re in control …like the choose-your-own-adventure episode of Black Mirror! Muhaha! 😈). At a high level, the way Cypress works is by issuing commands to interact with the DOM via typical selectors (which are just html tags or element attributes).

To demonstrate the process, I’m using a simple app that I built using the free Star Wars API.

Step 1: Install Cypress by running npm install cypress --save-dev. This will add Cypress to your package.json …

While I was working through the Front-End Web Developer Nanodegree program offered by Udacity, I heard about something called a “debounce”, and although I had some idea of what it was, I didn’t really know how to implement it. It wasn’t critical to know at the time, and I was eager to get through the course and start my job search. I thought… “I’ll come back to it later”, but of course we all know how that goes.

Fast forward about a month, I’m in a whiteboard interview with a company I was really excited about, and to my dismay, my interviewer asks me to write a debounce function 😳. I wanted to grab my things and run away, but I hear that’s not the best thing to do in an interview. So I fought my way through this thing that I had no idea how to do — basically the interviewer kinda just told me how to do it. Very nice of said person to do that, but for me it felt awful. …

Recently someone asked me to explain the ‘MVC’ (Model-View-Controller) pattern, and although I understand it, I didn’t have the words to explain it 😞. In short, the model is a representation of the database, the controller is what allows you to perform CRUD operations on the database (Create, Read, Update, Delete) based on url parameters (which generally come from user interaction with the app), and the view is the HTML that is rendered by the controller (this is what is seen in the browser). Here’s a nice image of what that looks like (thanks to

Image for post
Image for post

The model is the app’s domain — for example if we wanted to implement a candy warehouse domain, we might have models for Store and Candy. The database is what will contain the relevant information for these objects, and those tables might look something…

As I am looking for gainful employment, I’m just trying to keep my fingers coding, and my brain working. I came across this problem while running through some katas on Codewars:

Given an array of integers (could be negative & positive), write a function that returns the maximum sum of a sub-array. If the array is all negative integers, just return zero. 😳 What?

I spent way too much time trying to figure this one out. First I was trying to figure out a brute force solution, and then I thought I would just refactor once I got it working. No such luck, but the one place I avoided in my research was the one that was quite helpful for understanding this algorithm — good ol’ Wikipedia. Kadane’s Algorithm, as its called, is well known to folks in the industry, but it was new to me. So here is my attempt to explain it because I’ve learned in life that explaining something helps you understand it yourself. …

As I’m searching for my next role, I’m keeping track of all the questions I’m asked at interviews — especially the strange ones. You know, like how many ping pong balls can you fit into a Boeing 747? I thought the tech industry had made a collective decision not to ask those anymore, but alas, there is a company that still does; I won’t name names though.

So anyway, I completed a CRAZY code challenge (I mean questions in several languages - some of which I’ve never worked in, and some I barely know), and made it all the way to the in-person interview with the president of the company, and two developers on the team. I was super excited, the conversation was moving along, I was asked a legit javascript question (which was cool), and then… out of nowhere… “How many piano tuners are in Chicago?” 😕 Thanks Enrico Fermi. Now I was well aware of what he was getting at here, but unfortunately my nerves got the better of me and I couldn’t do simple math. Long story short, I did it when I got home — just to satisfy my own mind. …


indira williams

Back end developer @ Teladoc. I love food, friends, and karaoke, and I especially love when those three things come together.

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