An organization strategy for code as pretty as the webpage.

The philosophy behind React’s styled-components is the idea that all code relating to a component should live within a single file, including the styling code. In styled-components, the CSS is written in its own section inside the component’s JavaScript file. This is awesome for organization and for quickly locating the relevant styling code without having to sift through potentially huge CSS files.

Sometimes you may want even more CSS structure and organization, though, and turn to a library like Semantic UI or Material UI for React.

Each Material UI component…

At the intersection of human language and computer language.

Ah SQL… do you pronounce it “ess-cue-ell” or “see-qual”? Confusing and controversial pronunciation aside, this programming language is awesome because it allows us to ask for some data from an unseen database and receive information back that is reminiscent of and excel file. That is, organized in a human readable format. The programming language which, in my opinion, is closest in look and words to English, can be deceptively difficult to write.

The most difficult part of writing SQL query for me is remembering the different commands I have access to…

Let’s try not to get lost…

So you joined a new project, congratulations! The idea is great, the team seems cool, and the stack is challenging but manageable. The downside? This project is at least partway built out and none of the code has been written by you (not yet at least). What’s a newbie to do?

The goal is to quickly familiarize ourselves with exactly what is happening in the code in as little time as possible so we can get to the fun part and start helping to build this thing!

Below is a walkthrough detailing my process…

Staying in the loop part 2.

In a previous post, I explored the process of adding event listeners to user interactions in vanilla JavaScript. Now its time to extend what we learned to the same goal using React!

React makes a lot of things about the adding and removing of event listeners much simpler. However, as programmers, we still have to handle the decisions and logic regarding the when and where.

The Process

I like to think of the mechanics of the event listening process like that of listening to a radio. You tune in to a specific station, hear a song…

Building and growing strategies from nature and beyond.

What’s the first thing you think of when you hear the word Scaffolding? For me, it’s walking down the sidewalk in NYC and suddenly fearing for my life because there are people on ladders building large structures to cover the sidewalk for the purpose of protecting pedestrians like me from falling construction debris.

In Psychology and Education Theory there is a rather different concept also known as Scaffolding. In Psychologist terms:

“Scaffolding is an instructional technique in which a teacher provides individualized support by incrementally improving a learner’s ability to build on…

A deep dive into the drama of finding a Palindrome.

If you’ve ever been in the market for job in Software Engineering (much like I am at the time of writing this post), and have followed the advice of seemingly everyone to brush up on your knowledge of Data Structures, Algorithms, and how the heck to tame them, you are sure to have encountered questions regarding someone called Palindrome.

Who is she? A fancy lady dressed in matching hat and shoes and color coordinated for each piece of clothing from skirt and top to belt. That is to say, if you looked her up and down and down and up…

A brief tutorial on making Semantic’s Dropdown component play nicely with React state.

So you want a selection field in your controlled form. Maybe you want to show a list of departments for a user to choose from. So you do something like this:

<form>  <select>    <option> Marketing </option>
<option> Design </option>
<option> Accounting <option>

And, well, it looks something like this…

So you’re thinking, there’s got to be a better way!

Enter Semantic UI

This library has a bunch of beautiful, pre-styled components that you can incorporate into your projects, including a great Dropdown component which can be configured to do things like search and be clearable.

And the freedom to change your mind.

If you live in the 21st century and have ever visited a social media site, you have personally witnessed the magic of a constantly re-rendering webpage that can serve you the most up-to-date information available. This is great because it’s annoying to press the browser refresh button every time you want to see the latest amount of people who like that cat video you shared.

A React Hook

As developers, the ability to update likes on a post or views on a video without the user having to press the browser’s refresh button is given…

Stay in the loop. Listen to Events.

Web apps written with Javascript have the potential to be amazingly interactive. User actions, a mouse click, a hover, a form submission, a scroll, all have the potential to trigger some code that will perform some work and then manipulate the DOM in response.

However, front-end Javascript code doesn’t know when or how to execute until it is told to do so by a specific event happening on the DOM. The way we tell our Javascript code to run and thus to make something happen on a user’s screen is through event listeners.

There will be cats.

You should read this post to find out why it is insistent that you should read it. But you should also read this post to learn what a README is, why you should read them, and most importantly, why you should always include one in your code development projects. And there may be cats… read on to discover.


READMEs are basically the cover page to your project. They tell the explorer of the internet who has encountered your code what it does (or aims to), how they can interact with the code, any necessary prerequisites in…

Lauren Gifford

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