Getting started with redux

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

#deskgoals
Photo by Kari Shea on Unsplash

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!

Rustic handwritten notes on Redux

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.

One of my favourite things about being a developer is now getting to be in on dev jokes!

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 😉

Advertisements

The visuallyHidden class

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.

<forest dweller class=”visuallyHidden”></forest dweller>
Photo by Pierre Gayrin on Unsplash

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.
<this girl class=”visuallyHidden”></this girl>
Photo by Lidya Nada on Unsplash

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!

HTML and CSS: a highlight reel

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!

Making friends at HackerYou be like
Photo by rawpixel on Unsplash

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.

Welcome!

Hi, my name is Morgan. A couple months ago, I turned 29 and I decided to make the last year of my twenties an exciting one. To kick it off, I decided to pursue a career change into web development. This journey started back in the summer of 2018. My web developer friends at work had long made fun of me for my lack of “dev words”. I would throw around “github”, “commit changes”, and “hack the mainframe” but that just wasn’t going to cut it. In an attempt to show them I could blend in with the best of them, I started taking a few workshops to learn some new vocab I could throw into conversation. Soon I realized web development was actually very cool and something that would simultaneously alleviate the frustrations I was having with my current career choice. This would be an opportunity to work in an industry that would require constant learning and self-improvement, something I’d been sorely lacking for too long. It was also a set of tools I could use to work in nearly any industry imaginable, from science and medicine (for which I already had two degrees) to environment and climate change, social and economic change, and communications. These are areas that I am passionate about and would love to find a way to contribute meaningfully to through my new skills in web development. This blog is intended to be a place for me to talk about my experiences in the HackerYou Bootcamp in downtown Toronto, as well as my day to day life and hobbies. I’m sure it will evolve over time but for now, that’s the plan.

A little bit more about me. I have a pet cat named Frea who is the light of my life. In my late teens and early twenties, I was really obsessed with all things Swedish and Nordic. In Norse mythology, Freja is the goddess of beauty and war and is pulled in a chariot by a heard of cats. Hence naming my baby Frea (the English spelling). I even went so far as to try and move to Sweden when I was 22. I now live in Toronto and in my spare time I love to eat (and cook), ride my bike, and practice yoga. I love to knit, sip mulled wine, and catch up on the latest Nordic noir series on Netflix. I’ve been trying to read more lately and just finished Michelle Obama’s Becoming. I laughed, I sobbed, and was so inspired by her own story of “swerving”.

I’ve chosen the name “Ninety Degrees” to reflect that this venture down the path of web development is a bit of a “veering off” into another direction from the one I thought my life would take coming out of grad school. This new adventure is a fork in the road—not an about-face—that I hope will only compliment and improve upon the skills I’m proud to have already developed so far in my education and career. I hope I’ll have some insightful, intelligent, and maybe even inspirational things to say in the weeks, months, and years ahead as I document this journey of Ninety Degrees.