Falling into place — or am I?
These last weeks I feel like something happened. My process was suddenly very clear, and things just seem to fall into place. When I think about a project, what I want to achieve and how I should approach a problem, the path seems so .. straight forward. Ironically the labyrinth we created this week is spot on — if you get to the end you’ll understand 😌.
Of course I still get stuck, overwhelmed and ridiculously angry over things not going my way, and I still feel like an imposter some days. But maybe, just maybe, some of those feelings come from me being nervous about this bootcamp coming to an end. 😶
Next week we will dive into server side backend coding. Node.js, Mongo DB and Express are some of the tools we’ll use. Our final sprint will be a single project, the final project. But more on that when we get so far.
But what did we do these past three weeks? A lot. Redux was main focus, and React, Styled components and API’s were also a big part of it. (And I said f**k in class, twice, sorry Van! 🙊) Below you’ll find some of my golden nuggets from these weeks. Hope you’ll enjoy them as much as I did! 😊
“How do I style :hover when using Styled Components?” and bonus: “How do I style a different object/multiple objects on hover?” 💅
So this was a question I wanted an answer to literally 2 minutes before it was our time to demo last week. Lucky me it was so easy to apply! 😅 You basically add it to your existing component styling by writing &:hover + {}, which means apply this styling to current component, but only when its :hovered. And the bonus function? How to style multiple div-buttons. (If you hover the button-wrapper, target all objects within that, and modify them too!)
▸ Read more on it 👉 here.
“… and media queries?”
Media queries are as easy as above mentioned technique. It’s basically the same.
▸ Read more 👉 here.
“How do I take an objects own height/width into consideration when positioning it?”
I wanted to put a fixed button at top: 50%, minus half of its own height to center it completely. Turns out you can’t get the objects own height measurement in css, but what you can do is work around it with transform: translate X or Y, depending on direction. [TranslateY(-50%)] moves your item up 50% of its height, in other words, centering it vertically. Meaning you don’t need to mess around with [top: calc(50% - xxx px)].
▸ Read full discussion on StackOverflow 👉 here.
“How do I animate/fade in/out conditionally rendered components?”
This seems to be among the harder things to style when working with React. A library called React Spring has a lot of options on how to work with animations in general, and useTransition is one of them. Working with it seems a little messy, but these links below have I found helpful. 😊
▸ Read React Spring’s documentation on useTransition 👉 here.
▸ Read css-tricks guide on it 👉 here.
▸ Play around in Css-tricks’s sandbox 👉 here.
“How do I delay content so that my loading animation will be seen for a bit longer?”
Just came across this nifty hook called useTimeout, which lets you set a delay of your choice to any function simply by writing a snippet pretty much identical to useEffect, and add a variable value at the end to setup the delay.
▸ Read more 👉 here. (Bonus: In the same post you can read about useInterval — how to execute a function on set interval 🤩)
My best articles of the.. ehrm… month
Over the weeks I have read countless amounts of articles, but these ones were the one I’ve really used and returned to again and again.
Working with arrays 👉 cheat-sheet 👈
One of the most valuable parts of knowledge I’d say is to manage arrays and objects. Highly useful when working with APIs but also filtering stuff, sorting, finding or isolating. This article explains all of the array-methods with a few words, and showing examples of the syntax. ▸ Read more below.👇
BEM + Sass = true?
I’ve been trying to use BEM naming methodology for a while now, and I really like it. It makes the styling much easier to organize, and all parts still are easy to find among hundreds of lines of css-code. Before we started working with Styled components I found this article explaining how you could work with &-functionality. By adding an ampersand, you could simply add whatever objects attached to that div within the curlies, and in that way nest all styling code relevant for one wrapper-object. Looking forward trying this out whenever I get the chance.. ▸ Read more below.👇
::first-letter, ::first-line and ::selection — pseudo-styling!
I think we’ve all heard of :hover, ::after and even :first-child, but this article features some other pseudo-elements that allows you to style the first letter, the first line or highlighted text, among others. ▸ Read more below.👇
And finally, a nice way to compress images before you publish them. ▸ 👇
Demo-Time!
3 projects in one post. I get it, it’s been a while. In these projects there is close to 3000 lines of code, so much have been done. And much was learned. 🤓💁♀️
✓ A Redux-based quiz made in React with Styled components
Sh*t, this was three weeks ago when writing this.. Time certainly flies when you have a LOT of fun. This project was created during a (what used to be a meetup before Covid) team session, together with my classmates Anna, Sara and Mats. A first step into Redux, where the reducers actions were prebuilt and main focus was to connect the dots.
✓ Todo-app built with Redux, React and Styled components
I think this was the project I had most fun with yet. I worked a whole lot with filtering and mapping of arrays in this project, and implemented external libraries for the first time. Redux is complex, but I think I love it.
✓ Labyrinth Game UI based on Redux & API built in React
This project I worked with my classmate Gabriella. Our dynamic was great, and we really pushed each other to create a nice looking, fully functional labyrinth with nice details. We got to combine API-fetching and working with the global state, and personally I feel like the sky is the limit with these skills.
With that said, maybe the upcoming weeks with Backend will put me back onto the ground. We’ll see. Speak soon!
/Karin
