If you’ve created a small app or simple webpage, how you organize your stylesheet isn’t very important. For much larger more complicated projects how you organize your code can impact the efficiency of the project. Not only does it affect how much code you have to write, it affects how much writing will be required. In addition, it can increase the amount of loading required by your browser which in turn impacts performance.

Why BEM?

BEM provides structure, which benefits any project, regardless of size. BEM, for me, is easy to understand and implement. It also avoids inheritance and reduces style conflicts.


Closures

In Javascript, every function creates its own scope. Javascript also operates using lexical scope, this means that scope works from the inside out. A closure is when you pass an inner function a value from an outer scope or function. The inside cannot pass to the outside but the outside can pass in. Let’s look at an example.

let num = 10;function logNum() {    console.log(num);}logNum()Result: 10

Notice that even though the variable numis declared outside of the scope of the function logNum , the function still has access to the variable and its value. …


Adding animations to your website can be an effective way to attract attention where you want it. Websites can display an incredible amount of information all at once. If you open Amazon right now you can see two bars at the top of the page, on containing info about you and one for navigation. Below that is probably an in-house advertisement for one of Amazon’s services like Audible, Prime Video, Alexa products, or Twitch / Prime Gaming. Below that are your recent orders, something you looked at recently and didn’t purchase, followed by two more Amazon ads, I got one…


Along with flexbox, grid is one of the most useful tools for structuring the way your webpage displays. Grid is actually the first CSS module created to address the problem of webpage layouts. A grid consists of a container and items. The container is the direct parent of all grid items and the items are direct descendants to the grid parent. Another important aspect of grids to understand is the grid line and the grid cell. …


Love that logo

Sass is a CSS preprocessor / extension that stands for Syntactically Awesome StyleSheets. It’s simple to install, just type npm install -g sass in your command line, and now you can use .scss files in place of .css files. The nice thing about .scss files is that they are compatible with CSS, so you don’t have to change anything you may have in your existing files. Converting them to SCSS simply allows you to do more, which I will explain below.

Variables in Sass

If you’re using the same colors over and over again in your web design, which you probably should be…


Last week I covered the power of flexbox in terms of distributing items horizontally within a container. If you missed that you can check it out here. I went over the container/item relationship in flexbox and covered flex-direction so if you don’t know what that is please check out the blog.

Align Items

This time I’m going to go over the ways flexbox handles the vertical distribution of items and space within a container. The way that’s done with flexbox is align-items, it’s justify-content but on the perpendicular axis.

Flex-start

Items start at the beginning and proceed along the flex-direction. The main difference…


One of the most frustrating things for me when I started building web apps in Javascript and even Ruby on Rails was positioning my data where I wanted it to be in my app. How do you center something vertically, horizontally, between other elements? Why is that element centered but this one isn’t? Trial and error is a valid learning process, especially for the visual results of CSS, but if what you try repeatedly doesn’t work it can be frustrating. My background in graphic design may have added to my irritation; being able to picture what I want in my…


React router is a library built on top of React used for routing. Sounds pretty obvious, but let’s get into what that really means. React router allows the user to navigate different views of your React application while also allowing you to change the URL and keep the UI in sync with those changes. If you want your React app to have a homepage, an about page, a contact page, profile page, anything like that React router is very helpful.

It’s really easy to install and get started.

npm install react-router-dom

React Router Components

React router has four main components that you’ll need…


In order to explain React’s virtual DOM you must first have an understanding of what the DOM is. If you don’t take a second to educate or refresh yourself here. According to the React site 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. This process is called reconciliation. It allows you to dictate the state of the UI and make it a reality on the DOM. …


On the React website, it says “components let you split the UI into independent, reusable pieces, and think about each piece in isolation.” What this essentially does is allow you to create your UI piece by piece. You can create components for a navbar, a footer, a drop down menu, a gallery of images, a button, etc. Almost anything you want represented on the DOM can have its own component or be contained within a component. The React docs describe components succinctly, saying “components are like JavaScript functions. …

Chip Lempke

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