Bootcamp is over, and I’ve started my first job as a junior front-end web developer!

My first week at my new job, we discussed the possibility of using Redux in an upcoming React project, which led to me doing a lot of reading about its uses, implementation, advantages, and downsides. Here’s what I learned that might be helpful to you!

What is Redux?

Redux is a JavaScript library that allows you to store the entire state of your app in one place rather than being broken up between the many components of your app. With conventional state use, state is derived and stored within components and passed through props to other components that make use of it. This can sometimes result in the headache we know as ‘prop drilling’, where state must be passed through many many many components that don’t use it before reaching its final destination. With Redux, state can be distributed to the components that need it from one central source of truth!

The Main Players

The Store

There is only one store per app and it holds an object tree which represents the entire state of your app! It is generated using createStore() and comes with { subscribe, dispatch, and getState }. Let’s make an Ikea that has some couches in its inventory.

let store = createStore(Ikea)

The Actions

The action is the thing that happened within your component or as a result of some interaction that would cause a state change! Actions are described as objects, there can be lots of different types of actions, and can be dispatched to the reducer. In this case, couches can be bought and returned.

store.dispatch({ type: 'BUYCOUCH' })
store.dispatch({ type: 'RETURNCOUCH' })

The Reducers

Redux was invented because some guy (Dan Abramov) thought to build a state management library that was essentially a big reduce function. The state is never actually changed, but rather a new state is returned by the reduce function, meaning the state is immutable!

function ikea(state = 10, action) {
  switch (action.type) {
    case 'BUYCOUCH':
      return state - 1
    case 'RETURNCOUCH':
      return state + 1
    default:
      return state
  }
}

Want to display the updated couch inventory within your component? Use store.getState() to access the store within your component and voila!

<Inventory
    value={store.getState()}
  />,

This is obviously a very simple example and seems like a lot of work when we could just use this.state and this.setState(). One of the downsides to Redux is how much setup and boilerplate there is upfront, but the nice thing about Redux is how well it scales to much larger apps. Consider it the next time you’re kicking off a rather large project.

Alternatives to Redux include the good ol’ fashioned way, Context, and the newest hottest thing, React Hooks! Each have their advantages and disadvantages, which will hopefully be covered in a future blog post. Our project ultimately went with React Hooks 😉

Three and a half weeks into bootcamp, two projects submitted, one test written, infinite cups of coffee consumed. Now we’ve started learning ~programming~ and have bid farewell to the safety and comfort of our HTML and CSS review. In honour of the occasion, here is an ode to a valuable bit of CSS, the visuallyHidden class.

The visuallyHidden class (or whatever class name you choose to attach to this list of styles) is often simply copied and pasted from one project to the next. I had never really given much thought to what exactly the different components did…until now!

.visuallyHidden:not(:focus):not(:active) { 
     position: absolute; 
     width: 1px; 
     height: 1px; 
     margin: -1px;
     border: 0;
     padding: 0;
     white-space: nowrap;
     overflow: hidden;     
     clip-path: inset(100%);
     clip: rect(00 0 0);
}

1. Position: absolute removes the element from the flow of the page, collapses the space it once occupied, and removes it from the flow of the page.
2. Width and height of 1px make it very tiny, but still has area so that other properties further down will still work.
3. The negative margin pulls up succeeding elements to overlap the visuallyHidden element.
4. Border and padding of 0 are just making sure there’s no unnecessary bulk.
5. White-space: nowrap means that any content within the element will not wrap, but continue on in a straight line.
6. Overflow: hidden ensures that all of that now overflowing content is clipped and made invisible.
7. Finally, clip and clip-path are added measures that cut down the size of the element to literally nothing. Clip is a deprecated property that has been replaced over time by clip-path but both are included just to be safe.

The visuallyHidden class is extremely useful, and my best friend when it comes to making unseen content accessible. Unlike “display: none” or “visibility: hidden” which hide their content from the viewer and the screen-reader, visuallyHidden only removes the visible element from the page. It’s content is still read by a screen-reader, ensuring that it’s content is still accessible. You can think of those other two as pseudo “delete” properties because they appear to wipe away that content as if it never existed for anyone. They should only be used if you’re going to replace that content in some other way.

Some of the most common places that I use visuallyHidden are on form input labels that I don’t want shown on the page and for labelling social icons acting as links. Rather than having a label for my form input that says “Email” or “Name” or “Fave doggo”, I like the aesthetic of the placeholder text providing that context for what should be filled in. But because a screen-reader won’t read placeholder text, a visually impaired user will have no way of knowing what that input field is for! We should keep the label in our HTML for the sake of the screen-reader, and by adding a class of visuallyHidden, we give the illusion that it’s not there, while providing that much-needed accessibility. Similarly for social icons (or any icon that conveys meaning), a span with a class of visuallyHidden containing the label for what that icon does can be placed beside the icon to provide the necessary context.

Sometimes you will need a display: none or a combo of position: absolute and left: -999px to remove content from the screen. But it’s important to know what the best tool for the job is and in terms of accessibility, I think visuallyHidden is a winner!

Two weeks ago I started HackerYou’s Web Development bootcamp and everything you’ve ever heard about HackerYou is true. I didn’t think it could possibly live up to the hype, but I’ve met what has turned out to be a truly amazing group of super passionate, dedicated, and fun devs that have formed this amazing community. People describe it as “cult-like” and I have to say they’re right. In a good way though, I promise.

Bootcamp alumnus I’ve just met: “Hey! How’s bootcamp going?”
Me: “It’s great! Learning so much, salad club is cool, JavaScript is going to be scary.”
Them: “Feel free to message me anytime :)” <– THIS, every single person I’ve met has made this offer without fail!

The last two weeks have FLOWN BY and we’ve covered a massive amount of content, reviewing everything HTML and CSS. Even though this was technically a review, there have been a few AHA moments along the way that I thought I’d jot down. Here are my top three “oh that’s a very straight forward but very cool thing that I shall put in my pocket for the future” things:

1. Margin collapse: this is a complicated phenomenon that occurs when two vertical margins touch and the larger margin, being more dominant, swallows up the smaller margin, causing it to “collapse” or disappear. The part that was an AHA moment for me was in realizing why I couldn’t use margin-top to vertically center an h1 in my header. By putting a 1px border or 1px of padding on my header, I could prevent that margin collapse from taking place and all my layout dreams came true.
   1. b. Margin collapse does not apply to horizontal margins that touch, cool cool cool.
2. Pseudo-elements: you can’t put pseudo-elements on inputs! I wanted to put a nice little ::after element on a form input to give it a fancy underline. No no no. A quick Google search of “why is this thing not working?” taught me that pseudo-elements (::before and ::after) cannot be applied to inputs because they’re not containers, they don’t have closing tags. The same goes for img tags as well. Knowledge is power!
3. Emmet shorthand “$@X”: I love a good Emmet shortcut. If I could do everything with a keyboard shortcut, I totally would. I was familiar with the $ symbol which allows you to make multiple elements with an attribute containing consecutive numbers. The “@X” allows you to start the consecutive numbering at a number other than 1. Wow, much neat! I’ve included an example below to demonstrate:

section*5.section$
     <section class="section1"></section>
     <section class="section2"></section>
     <section class="section3"></section>
     <section class="section4"></section>
     <section class="section5"></section>

section*5.section$@6
     <section class="section6"></section>
     <section class="section7"></section>
     <section class="section8"></section>
     <section class="section9"></section>
     <section class="section10"></section>

Some of you might be thinking, wow basic I learned nothing from reading this, but hopefully some of you, like me, will have a bit of a light bulb moment or maybe even have your own lists. I hope someday I look back at this blog post and appreciate how far I’ve come. Next week we start learning really new things that are sure to be just as exciting.