Styled-components allows us to create a normal React component that has styles bound to it. There are many benefits to implementing styled-components in your React app:

  1. CSS becomes easier to maintain and update when you no longer have to search through multiple files and folders to find the styling for a particular element.
  2. Allows for dynamic rendering of elements based on a component’s props.
  3. It makes removing CSS easier because you don’t have to worry about other elements using the same className .
  4. Styled-components keeps track of which components are rendered on a page and injects their styles and nothing…

While converting a recent React application’s class components to functional components with hooks, I began searching for a way I could use hooks to not only manage local state but also allow my components to access global state from my Redux store.

I found that React Redux version 7.1, which was released in 2019, includes two new hooks useDispatch and useSelectorwhich allow us to ditch the higher-order connect component and instead, connect our components to the Redux store using hooks.

The useDispatch hook returns a reference to our dispatch functions from the Redux store. We can use it to…

Learning the best ways to use CSS can sometimes feel like this:

To avoid ^^ I want to share a simple, elegant way to create CSS animations using keyframes. When you think about it, animating an element is in fact just changing the style or look of that element from one period of time to another. That style could be anything. It could be that element’s position on the page, its color, its shape, its size. You name it, you can animate it.

What @keyframes give us is a set of rules and points in time at which to…

As defined by MDN documentation:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

But what does that mean exactly?

In JavaScript, a function has three ways of knowing about a variable:

  1. If the variable is declared globally (for example; at the top of our .js document, outside any other function).
  2. If the variable is declared…

A few months ago, during the assessment of my Rails project at the Flatiron School the teacher asked me to implement a simple search feature in my project that would allow a user to search for all items within a particular search criteria.

What happened next was a mad dash of documentation searching to figure out how to implement such a feature in my project. I’m writing this in hopes of helping future Rails newbies who want to add search functionality into an application.

My search bar was designed so that a user could search for all properties within…

React is great for many things; it’s pretty easy to learn and use, it allows developers to create replicable components and templates for a site, and it makes use of a virtual DOM to know which parts of the actual DOM to re-render thus boosting site performance.

One thing React isn’t great at is handling forms. If you’ve searched the web for ways to handle form validations in React before, you know what I’m talking about. One way to handle form validation in React is to set up an errorMessage key in a component’s state and set up some conditional…

Last month I created a yelp-style application using React/Redux with a Rails API backend. I wanted to continue refining my React knowledge and decided that adding an autocomplete search bar would be a really helpful element, since searching for a type of business is the first thing someone does to interact with this application.

I pulled some of the wisdom from this post as well as this one and adapted their code to fit my purposes.

Since my application uses Redux, I didn’t need to include a fetch or axios call in my search component. I simply had to…

Last summer I took a big risk and decided to dive into a full-time software engineering program at the Flatiron School. I had been interested in web development for a while but had very little experience with actual coding. I had saved up enough money to be able to leave my yoga teaching and non-profit jobs behind to embark fully on this five-month journey.

Five months later, I can whole-heartedly say that it was one of the best decisions I’ve ever made. It was incredibly challenging and I was forced to push myself harder than I ever have, but with…

For my final project at the Flatiron School, I wanted to create a yelp-like app that would celebrate small businesses and the rich diversity of local shops in Los Angeles. My yelp-clone would allow a user to filter the businesses searched for by the communities one wanted to support so a person could search through BIPOC-owned businesses, LGBTQ+-owned businesses, Women/Womxn-owned businesses, and/or businesses that have a documented track record of having a social impact commitment.

This project presented me with a number of logistical challenges, some of which I’m still working through (if anyone reads this and can help me…

Of all the projects I’ve created in my time at Flatiron School, this was the one I was looking forward to the least. Our task was to create a web application with a Javascript frontend and Rails API backend and a minimum of two models with a belongs_to and has_many relationship.

I felt really confident in my rails knowledge and decided early on that I wanted to have four models in my project. I began to create my Trip Planner rails backend using the following models: Trip, Category, Item, and Trip Category. The last model was necessary to create a…

Leah Schlackman

Full Stack Software Engineer passionate about coding, intersectional environmentalism, and pho.

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