Wanted: A stand-in whip structure!
Closing in on Christmas 🎄… and graduation(😱💥🎊). The other day we got a short introduction and brief to our final project and do I have to tell you that my mind started racing? In this case it was in a good way, though. But there is so much to do before graduation, and so much more to learn…
…and what about finding a job? 😬
The biggest benefit of joining a bootcamp has been the roadmap of relevant knowledge being drawn out for you, and every week being filled with projects, labs and guest lectures to maintain a fast pace forward. But how does one remain fast paced, learning new (relevant!) things and effectively coding at the same time without the whip of a Bootcamp structure?
But how does one remain fast paced, learning new (relevant!) things and effectively coding at the same time without the whip of a Bootcamp structure?
I’ve always been eager to learn and since starting this new route of mine I’ve spent uncountable hours of reading articles, watching tutorials and sneaking around Github. 🔎 Moving forward I will need to maintain this, preferably while continuing to learn new things on a new place of work. But are there more ways of staying up to date with your knowledge?
So this time, I’m asking YOU if you have any tricks, good links, games, videos or techniques to continue evolving even post bootcamp, please leave me a comment or PM me on Linkedin! 💌
Or maybe you even know a place where I could be a perfect fit? 🥰
Now- lets leave the worries and move on to this weeks new learnings!
“Can you actually add an alpha-value after your hex-color code?”
YES! You can! I just recently found this out by reading 👉 this article. By adding a second pair of digits after your hex-code, you set the value for alpha — in other words opacity. If you have a nice color like #803CFF, you can add a number between 0 and 100 afterwards. For example, #803CFF40 gives you the same color as above, only at 40% opacity. How cool?!
“How do I create a dynamic gradient animation as background?”
For my React survey project I really wanted the background to look a bit extra, and keep the rest of the styling to a minimum, so I decided to add a background gradient that changes over a spectrum using 👉 this video!
“What is the difference between align-items and align-content?”
Whenever flexbox doesn’t behave as I expect, I start to manically change settings to try every combination there is. So in hopes of avoiding this I tried to find out the difference instead. Apparently, align-content only works if you use flex-wrap. If so, it controls the same as justify-content, only on the cross-axis. You can use align-content: [flex-start, center, flex-end, space-between, space-evenly, stretch etc] to move the objects and distribute the space. And align-items controls the items within the wrapped group, and aligns them along the x-axis (by default, but it could change).
▸ Read full article 👉 here.
▸ 👉 This Codepen illustrates it quite nicely.
“How can I target specific divs/objects in Styled Components using pseudo-elements and props?”
When I found out you could use both props and pseudo-elements in styled components I think my creative mind went bananas. Maybe above example isn’t the most ‘way-to-go’-solution (and don’t mind the grammar), but to me it showed you can do practically anything with these two combinations. You can target one, all but the second to last one, only some, only some if the props are more than x and equal to this string. You name it!
▸ Read more about :not( ) 👉 here.
▸ And about :nth-child( ) 👉 here.
▸ Want some real cryptic stuff? Look 👉 here.
“How do I remove duplicates in an array?”
I LOVED this article. When working with a dataset with goofy formatting, you might have to try a LOT of ways to transform the data to make it fit your project. This was my case during the first week of backend coding in Node.js. Yes, I tried all three of these ways. I ended up using two. New Set and Reduce. ▸ Read the article below. 👇
Speaking of goofy data: “How do I create an array out of each word in a string?”
Trying to clean up an array within an array, with a mixture of single- and double quotes, I ended up removing a lot of quotes and finally having a huge string. Apparently you can use .split(‘ ’) to shove each word in the string into a fresh new array. Problem solved.
▸ Read the interesting StackOverflow-thread 👉 here.
Bonus-article:
How to use the Boop! by Josh W. Comeau
I ran into this article in a newsletter, and it’s seriously the best-in-show educational blog post. Josh explains what a boop is, how to configure it and what happens when you add some fancy extras to it. He also features a bunch of super-cute interactive demos. You don’t want to miss it.
▸ Read it 👉 here.
Demo-time!
These past two weeks have been all about backend using Node.js, Express and MongoDB. I really enjoyed trying out this new world of programming, and I realize there is a LOT to learn here.
RESTful API created with Node.js and Express, and a little frontend made with React/Redux to show it all
This week I really got to use all JavaScript data-handlers I’ve learned over the weeks. I decided to use a dataset from Kaggle, and turns out these datasets aren’t always optimized for being used as json. But in the end it all turned out good, with some nice RESTful endpoints and a very simple frontend to show the data.
Hoping that I’ll be able to continue working on the frontend during this week while continuing to learn MongoDB and Mongoose. In between the glögg, dancing around the Christmas tree, unwrapping of gifts and eating as many knäck as one could, of course.
Happy Christmas! 🎁
/Karin
