DEV Community: Alec Wertheimer

Very Basic - Redux

Alec Wertheimer — Tue, 06 May 2025 00:07:50 +0000

Learning Redux is a real pain in the @#$#$^&. Good thing the team I was on at the time I learned it highly valued taking the time to learn, because it took me a good 30 out of 40 hours of a work week to figure out what the eff was going on.

Once I finally did learn it however, I realized that the majority of what slowed me down in the learning process was that I couldn’t find a great explanation of exactly what Redux was doing. All I could find were tutorials on how to use it, and not really very much info on how it worked.

I’m going to try to solve that issue with this post. I’m also going to assume that you know how to use React, and that you know what Redux is and why you want to learn it. I’m also only covering the very basics of Redux and what you need to know to be able to hopefully speed up the process of really learning it.

If you need more in depth information check out the documentation. https://redux.js.org/ It's actually pretty great.

Boilerplate Code

Before we get into the nitty gritty of Redux, I want to explain one thing that really confused me when I first started using it. Redux uses A LOT of boilerplate code. So much so that it seems kind of unnecessary or over engineered, and that is not entirely false. When choosing to use Redux you need to weigh whether or not the amount of boilerplate code and the intricacies it introduces are worth it for what you are building. With the introduction of Hooks there are even less cases where Redux is necessary now. The goal of this post is to help you understand how Redux works, but hopefully by doing so it will also help you decide when and when not to choose Redux.

Parts of Redux

There are three main parts to Redux, the Store, the Reducer Function, and the Actions.

Store

The main goal of Redux is to move where state is stored from inside the application and components, to a separate object. So instead of creating a top level component to hold all the state, or just keeping it in the components themselves, Redux creates an external state object that can be accessed by all components in your app. This extracted state object is called the Store.

Reducer

The Store is the object that gets created when the app is running in dev mode or when it’s been built. But the thing that actually updates the store is the Reducer Function. The Reducer is just a large Switch Statement where all the cases make updates to the Store. So it receives an argument, executes the correct case, and updates the store.

Actions

The arguments that get passed to the Reducer come from the Actions. The Actions are the part of Redux that interact with the front end of the code. They’re basically just normal functions. They get called under certain circumstances in your components, then pass an argument to the Reducer and ask it to update the store. Then when the Store gets updated it changes the state of your app.

That’s pretty much all there is to it. Here’s a visual to help. As you can see Redux adheres to the unidirectional data flow model that React is known for.

Wrap up

That’s it! That’s basically all that redux is, it gets a little more complicated once you start implementing because of all the code that is needed to get it to actually work. I have been looking into a nifty tool called Redux-Toolkit. Which is a tool that makes it faster and easier to set up Redux state management. I will be posting a blog soon about how Redux-Toolkit works and how you can add it to your application!

Basic FlexBox

Alec Wertheimer — Wed, 02 Oct 2024 17:40:24 +0000

This is a quick overview of basics and fundamentals. I'm assuming that you know the basics of CSS and what FlexBox is and why you want to use it. I’m only going over the basic properties and values, I have narrowed it down to the handful that I use most on a daily basis. This should however be enough for you to accomplish the majority of what you’re trying to accomplish with FlexBox.

There is more to FlexBox than what I’m going to cover in this post. If you’re not sure what FlexBox is or want to take a deeper dive into all of the properties that are available to you, check out MDN, they have a great overview of the flex module.

Main Pieces

There are two main pieces to an element that is using flexbox. The flex container or the parent, and the flex items, or the children inside the flex container. That’s all, seem’s simple right? Honestly it is, that’s the beauty of it.

The Container and Flex Model

So to be able to use flexbox the first thing we need to do is create a “flex container” to do this we’ll create a div and give it the styling “display: flex;”. This converts our default div into a flex container, and enables the flex model inside. You can turn almost any HTML element into a flex container, it doesn’t have to be a div.

<div class="flexContainer"></div>

.flexContainer:{
    display: flex;
}

So what’s actually happened to the div now that we’ve converted it to a flex container?

Well first of all, the element itself is converted into a block level element. So as far as how it interacts with the rest of the elements on the page, it's as if you’ve enabled “display: block”.

That's pretty standard behavior, the more important thing is that once the element is defined as a flex container, two axes are enabled inside the container itself. The Main Axis, and the Cross Axis. These axes are what is used to actually arrange your child elements inside of the flex container.

The main axis is the axis that determines which direction the flex items will be displayed. Hence the name MAIN axis.

The cross axis runs perpendicular to the main axis, hence the name CROSS axis.

You can choose which direction you want the main axis to be by using “flex-direction”. There are two main flex-directions, Row and Column.

If you use flex-direction: row; the main axis will run horizontally and the cross axis will run vertically inside the container. Since the main axis is horizontal this will cause the flex items to be aligned horizontally inside the container. Lets take a look at a flex container with out items for now.

In contrast flex-direction: column; will cause the main axis to change to run vertically, and of course this will cause the cross axis switch to be horizontal. Since the main axis is now vertical, and the items always run along the main axis, they will now be aligned vertically. Again this is without having any child items yet.

FYI the default flex-direction is row.

These two axes are the fundemental structure of how flexbox works. Lets move on and actually add some items.

Flex Items, Selectors and Properties.

Ok so we know how to create a flex container and how to set the direction of the main axis. Now the question is how can we manipulate the items in the container and get them to behave how we want. They answer like most things in web dev is..….there isn't just one way.

With flexbox you can set positioning values at the container level which will adjust all of the elements in the container. Or in some cases you can set positioning values on individual to change their position.

We’re going to focus mostly on the container level values, I’ll mention some of the item values towards the end. But I’m not going to do a deep dive on those in this post.

Justify and Align (Container level)

Let’s start off simple with Justify and Align. Justify positions items along the main-axis the actual property is justify-content, and Align positions items along the cross-axis with the property being align-items.

There are many values you can set to these properties to achieve certain results but we’re only going to focus on a handful.

The properties and values that you use to position elements on the main and cross axis change depending on the flex-direction that you are using. We’ll start with *flex-direction: row; since that is the default.

Justify-content

In my experience these 6 values for justify-content is all you will need the majority of the time when working with flexbox.

justify-content: start;
Start will position the items at the “start” of the main-axis. Which by default is the left hand side.

justify-content: center;
Center will position the items at the center of the main axis.

justify-content: end;
End will position the items at the end of the main axis, which by default is the right hand side.

Align-Items

For align-items there are really only 3 main values that you need.

align-items: start;
Start will position the items at the “start” of the cross-axis, which is the top of the container.

align-items: center;
Center will position the items in the center of the cross-axis, which is the center of the container vertically.

align-items: end;
End will position the items at the “end” of the cross-axis, which is the bottom of the container.

Here's a codepen I made that has a flex container and one flex item, try using justify-content and align-items to move it around in the container.

Spacing

Spacing is a very useful tool when creating layouts. Spacing lets you add space (surprise) between the flex items, and since spacing causes the items to move on the main axis, you use values in the justify-content property to change the spacing. When using the spacing values for justify-content, it’s similar to applying margins to all the items. The difference is that instead of explicitly setting the margins yourself, the browser will calculate the amount of margin needed so that the entire space of the container is used.

justify-content: space-around;
Space around will position the items so that they all have the same amount of space around them.

justify-content: space-between;
Space between will position the items so that they all have the same amount of space around them, except for the first item and the last item, which will not have space on their left and right sides respectively.

justify-content: space-evenly;
Space-evenly will position the items so that the space around them is all the same amount.

With these 2 properties and 9 values you can create a surprising amount of layouts using FlexBox. Before moving on, check out these two CodePens I made and fool around with Justify and Align. The first one is just with one child in the container, the 2nd has multiple.

As I mentioned earlier, switching to flex-direction: column; will cause the main axis to be vertical, and the cross axis to be horizontal.

Here's a copdpen with multiple flex items, try adjusting the justification and alignements with what you just learned.

The cool thing is that no matter what the direction of the axes, you use the same properties to position elements on each of the axes. So even though the main axis is now vertical you will still use justify-content to position elements along the main axis. The same goes for the cross axis you still use align-items. The only difference is that now justify-content will position vertically, and align-items will position horizontally, but that’s kind of obvious.

Align-self

Now that we’ve covered the basics of how to position flex items by adjusting the container properties and values. Let’s quickly go over a couple properties and values that you have at your disposal on the items themselves.

Align self is pretty self explanatory you can use this property on a flex item to set the positioning of that item only, and not any of the other items in the container.

In this image you can see that the container has align-items: center; so the items are all aligned to the center. Except for item1 on which I put align-self: start; which takes precedence over align-items, and hence aligns item1 to the start of the container.

You can use align-self on any item in the flex container and you can position them with any of the align values.

Here's the codepen for align-self you can make some wild alignments.

Flex

Flex is one of my favorite properties in the FlexBox module. Flex lets you set a calculated width of a flex item in relation to the other items in the container. What I mean by this is that you can give an item a flex value, and the browser will use that number to figure out what the width of the item should be based on the flex values of the other items.

Here’s a more detailed explanation. Let’s say you have 2 items in a container, item1 and item2. Then let's say you set item1 to have flex: 1; and item2 to have flex:2; The browser calculates that you're specifying that the container is 3 units wide, and that item1 should take up 1 of those units and item2 should take up the other 2.

The best part is that no matter how many elements you have or how many units you set an item to be, the browser will always add them all up and calculate the widths based on the flex values. This means you can be super specific about the widths of the elements in the container. It also means that they will be 100% responsive.

Here's another example. There are 3 items in this container. item1 has a flex of 1, item2 has a flex of 2 and item3 has a flex of 3. The browser calculates 1+2+3=6 and that the container should be considered 6 units wide. Then it determines how much space each of the items should take up based on the flex value, and then it sets the widths of the items accordingly. It does all the heavy lifting for you.

A link for the codepen utilizing the flex property, mess around with the flex values and see what happens.

Flex is a super powerful property in FlexBox, it makes it so you have a huge amount of control over the space the items take up in the container. Mess around with the codepen I made, and see how cool the flex property is.

Flex-Wrap

The last property I want to talk about is the flex-wrap property. The flex-wrap property allows for the items in the container to wrap around to the next row if there isn’t enough room for them on the first row. All you need to enable wrapping is to add flex-wrap: wrap; to your flex container.

As you can see in the image, the items all have a width of 200px, but the container is only 600px wide. But since I set flex-wrap: wrap; item4 wraps around to the next line. If the container was less than 600px wide item3 would also wrap around to the next line.

This makes flex wrap great for making responsive grids, or grids where you might not know how many elements you will have in the grid. Like if you’re pulling your items from an API where the item count is constantly changing.

You can combine this with the properties and values that we went over earlier and you can create an amazingly flexible and responsive grid. Here’s a code pen demo, mess around with it.

Check out the Flex Wrap codepen. Notice how the items wrap to the next line if you change the size of the browser.

Conclusion

Now you know why FlexBox is one of my favorite CSS modules. And almost always is my go to when I’m creating more complex layouts. Hopefully this post helped you wrap your head around how FlexBox works and serves as a good jumping off point to allow you to start using it. Don’t forget to check out MDN to learn more about the tools in the FlexBox tool box, there’s a lot more you can do with it. Feel free to leave a comment if you have any questions or thoughts. Stay Flexible!

The reason I'm starting a blog.

Alec Wertheimer — Wed, 18 Mar 2020 19:54:09 +0000

Hey, you found my blog! Welcome! Since this is my first post I'm going to use it to tell you a little bit about me and how I got to where I am. Then a little bit on why I decided to start a blog and why I think you should start one too.

So how did I become a Web Developer? Well it's a long story that can be summed up in a few sentances so I don't bore you to death.

I went to school for Animation. After that I started designing web sites and naturally became interested in how I could build what I had designed. With help from codeacademy and freecodecamp I taught myself basic HTML/CSS and was instantly hooked. As I got more experience I wanted to make more and more elaborate sites, which turned into apps, and next thing you know I'm knee deep in a Dockerized React frontend and a custom Flask API, running in AWS. Coding is a blast!

Why write a blog.

Now you're probably saying to yourself "Cool man, I don't really care about your life story.", fair point. You want to know why I decided to write a blog, and why I think you should start one too. Like me you're probably realize there are a million articles and blog posts on every topic you could ever possibly want to read about. So whats the point of even starting a blog? Well I've got 2 great simple reasons why.

A blog is a great Reference tool.

A few years ago I was at WordCamp Philly, the WordPress convention that is put on here in philly every year. One of the talks that I attendeed was specifically about why and how to start a blog. During his talk the speaker mentioned how he quiet frequently found himself looking up things that he had done before. Whether it was something he just recently learned and wasn't that farmiliar with, or something that he'd done a million times, however the last time he did it was so long a go there's not a shot in hell he was going to remember how to do it correctly. He thought "God, wouldn't it be great if I had a collection of articles about things I already spent time learning, and could refer back to whenever I needed a refresher?" Boom! perfect reason for a blog.

I thought this was genius, but still it wasn't enough to really kickstart my desire to start a blog. I'm not suer why since it was such a simple and great reason. One day I saw a youtube video about The Feynman Technique. A technique developed by Richard Feynman the famous physicist, yeah the one who help build the atomic bomb.

The technique has 3 steps...

Step 1 learn it.

You can't master anything if you don't spend some time learning how to do it. Super important, but I mean come on common sense. You can't ride a bike if you don't learn how to ride a bike, duh.

Step 2 Do it.

Another pretty obvious step if you don't practice the skill you'll eventually forget what you learned, at that point you're back to square one.

Step 3 Teach it.

Step 3 is where it gets interesting. This is the step that's not as obvious, but also the one which is most important on the path to mastery. Teaching others the same skill.

You don't realize until you do it how much teaching someone else gives you a deeper understanding of whatever it is your teaching them. There are two main reasons for this that I've experience.

In order to teach someone a skill, you need to be able to articulate what needs to be done in a way that shows not only how to do it, but also why it needs to be done that way. Thats where you start to master a skill when you start examining the "why". knowing why something works is extremely powerful.

Now, to really take yourself to the next level, to really be considered a master. To reach, as I like to call it, "Wizard" status, you need to be able to answer questions. All kinds of questions. When you start teaching someone a skill, they will undoubtedly have a question for you that you don't know the answer to. Not because you don't know the skill, but because the question they asked never even occurded to you. When you start looking up answers to questions your brain didn't come up with, that's when you start really learning the ins and outs of something.

Pocahontas summed it up best...

...if you walk the footsteps of a stranger
you'll learn things you never knew, you never knew..

That's why.

When I saw the video on The Feynman Technique, thats when I really had the urge, the fire to actaully start a blog.

A blog lets you accomplish so many things. It lets you keep an index of things you've learned that you can refer back to, gives you a deeper understanding of those things, teaches others about those thing who in return will have questions that will most likely give you and even deeper understanding. Not to mention you'll probably make some good connections in the proccess.

Wrapping up.

I am currently working on my next and first coding post. The first topic I'm going to cover is Flex-box. I love this tool and I'm going to break it down so that you will too. So make sure to keep an eye out for that. I implore you to reach out to me with any questions.

Also if you would like to learn more about the Feynman Technique check out this video by Thomas Frank he explains it really well and in a lot more detail. There are also a ton of great articles and other blogs that cover the topic as well.

Well that's all I got for now. Keep coding!