small_beginner_roundup_cover.png

thumbnail_beginner_roundup_cover.png

beginner_roundup_cover.png

Welcome to the first **Beginner Roundup**! This is a mostly weekly collection of articles, videos, or whatever that I've found useful this week for one reason or another. As a junior developer, I've found it useful to keep track of some of the articles that have helped me solve problems or learn something new. 

Let's jump in! 

![Daniel Radcliffe walking a whole bunch of dogs while smoking a cigarette](https://strapi-portfolio-holden-bucket.s3.eu-central-1.amazonaws.com/danielradcliffedogs_877566a923.jpg)


---

## [Making Websites with Next.js and Strapi](https://www.youtube.com/playlist?list=PLUBR53Dw-Ef_oTLzPB3G5CdLWnGOSsec3)

I found this playlist of videos by the channel ['Watch and Learn'](https://www.youtube.com/user/watcAndLearnTuts) extremely useful when creating my own blog with [Next.js](https://nextjs.org/) and [Strapi](http://www.strapi.com). He takes things slowly, explains small things in his code that I might not have otherwise understood completely, and I felt that I could adapt it for my website easily from what he did. 

Particularly the 'Setup and First Steps' and 'Dynamic Routes' videos were extremely helpful, although there were a few things that you will definitely want to look at the official Next.js and Strapi documentation for. BIG HEADS up, if you're also looking to make a Next.js/Strapi site, look carefully at how you want to host it beforehand. I originally went through all the steps to realize that I couldn't use Heroku with the setup I had, and the only compatible AWS option was not free. 

## [Animating React Components With GreenSock](https://www.smashingmagazine.com/2020/09/animating-react-components-greensock)

This article by [Blessing Krofegha](https://www.smashingmagazine.com/author/blessing-krofegha/) is a great rundown of how to easily use GSAP in a React project, since the documentation for Greensock is all Vanilla JavaScript. I really liked how he runs through the basics of GSAP, talks about some of its limitations, and then gives several small examples in React, with a larger example to show the context of the components. 

## [Interactive SVG Animations Using Greensock (with Cassie Evans)](https://youtu.be/SOp0e4tkXjI)

This video was a big breath of fresh air. ['Learn with Jason'](https://www.youtube.com/playlist?list=PLz8Iz-Fnk_eTpvd49Sa77NiF8Uqq5Iykx) is a great YouTube channel where Jason Lengstorf learns something new from someone who knows more about it than him. It's a fun and safe atmosphere, and I really learn a lot not just from the actual content, but also by how Jason himself learns. In this particular video. [Cassie Evans](https://www.cassie.codes/) teaches Jason how to do basic SVG manipulation with Greensock. This helped me immensely by having someone else play with it enough to give me the confidence to start grabbing things from the documentation to implement it. 

## [Markdown/MDX with Next.js](https://nextjs.org/blog/markdown)

I ended up actually using a different solution than the one offered in this article ([I used remark-react instead](https://github.com/remarkjs/remark-react)), but I learned a lot about how to use a Markdown parser in React, what MDX is, and how to style components that use Markdown. What I specifically found interesting was how to get Markdown content directly in getStaticProps.

---

Thanks for dropping by, and I hope you find some of the resources useful! If you have anything interesting you've read or learned recently, and I'd love to hear about it. Just shoot me an email or message me on [Twitter](https://twitter.com/HMadagame)!

BR #1 - GSAP with React, SVGs, and Strapi with Next.js

Hey cuties! Welcome to the second edition of **Beginner Roundup**! This is where I link to a few resources I found useful or interesting in the past week (or 2, (￣ー￣；). These past few weeks have been a real whirlwind for me since I just started my first web development job as a frontend developer. I'm learning a lot in a short amount of time, and totally happy and exhausted. Anyway, let's get started! 

![Squidward doing interpretative dance](https://media.giphy.com/media/BED8QHpHrMIw0/giphy.gif)

---

## [How to Git Stash Changes](https://devconnected.com/how-to-git-stash-changes/)
There have been countless times where I've been working on various branches of a project, and of course git helpfully says, "You need to either commit or stash your changes." At those times, I really feel like commit has earned it's name, and that I need to make a real commitment to what I've been working on. While starting my new job, the project was finally just too complicated for me to just commit changes, so I looked up how to actually use `git stash`. The article's very straightforward, so you can put aside your tiny fear of losing something because you forgot how to use stash. 

## [Moving to zsh](https://scriptingosx.com/2019/06/moving-to-zsh/)
This is a great series of short articles to introduce you to zsh if you're new to it, or if you're used to bash. I recently started to use it because my new work computer is a Macbook Pro with Catalina, which comes with zsh automatically. There's actually not much of a difference with it at first, and there are some pretty great advantages which you can read about in the article. This first one just gives you a nice rundown in easy language. I'll also definitely be looking into [the Oh My Zsh community](https://ohmyz.sh/) for configuration/customization options. 

## [Opening VSC from Terminal](https://vscode-docs.readthedocs.io/en/stable/editor/setup/)
If you've used a Windows computer then this is something is configured out of the box, but in macOS you have some light configuration to do. I thought configuring this in zsh would be different than bash, but it's pretty much exactly the same. This allows you to open up Visual Studio Code from your Terminal with `code . ` or `code [file name]`. It's very convenient if you like to use a shell to navigate your computer. And if you don't already do that, you should try it! There really is a reason that more experienced programmers prefer to do things directly in a shell: it's faster, you have more control, and...//whispers// it looks cool. 

## [Vue 2 Laracast](https://laracasts.com/series/learn-vue-2-step-by-step)
I'm very lucky and have free access to various learning materials through my new job, and one of them is [Laracasts](https://laracasts.com/). It specifically has a large focus on PHP and related topics (Laravel, Vue, MySQL, etc.) but there are a lot of useful screencasts for writing clean code, how to read code, optimizing various text editors/IDEs, etc. This Vue 2 screencast I've found especially easy to follow (until it gets to Episode 19, jeeeeeez). 

## [How to make a GIF on Mac](https://www.macworld.co.uk/how-to/make-gifs-on-mac-3517187/)
I realized pretty quickly that while working on tickets and sharing problems or bugs, that taking videos with the built in Macbook function was a bit too much for the purpose. I looked up how to easily make GIFs, and found this nice little article with a few different ways. I decided in the end to download [GIPHY Capture](https://giphy.com/apps/giphycaptureink), which is just as easy as taking a video, and doesn't involve any extra steps to create a GIF. Recording GIFs has the additional advantage for your colleagues, that they don't have to replay a video to see a bug, because it plays automatically. It's also of course a much smaller file size. For Windows there's something similar called [ScreenToGif](https://www.screentogif.com/) which I haven't tested yet, but look forward to trying out soon. 

## BONUS [Retroarch](https://www.retroarch.com/)
I'm a big fan of retro games, and specifically enjoy playing on physical retro consoles. They seldom lose their charm for me, no matter how advanced consoles are now. I recently had an unquenchable desire to play [Goemon's Great Adventure](https://goemon.fandom.com/wiki/Goemon%27s_Great_Adventure) for the N64. If you have never played anything in the Mystical Ninja series, I highly recommend this or [Mystical Ninja starring Goemon](https://goemon.fandom.com/wiki/Mystical_Ninja_Starring_Goemon). As a friend of mine said, this almost definitely made me both queer and an opera singer. 

ANYWAY, I found Retroarch, which is an incredibly easy to use emulator for macOS, Windows, and Linux with an attractive interface and tons of systems to emulate from. The documentation is also excellent if you're new to emulation. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/FbPDuaWpHnc?start=76" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

Thanks for reading! If you have any articles you've found useful, I'd love to hear about them. Send me a message on [Twitter](https://twitter.com/HMadagame), [LinkedIn](https://www.linkedin.com/in/holdenmad/), or a good old fashioned email. ^_^ 

BR #2 - Making a GIF, zsh, and Mystical Ninja starring Goemon

I hope y'all are staying safe, wearing masks, disinfecting things, and also avoiding people in general. I'm nearing the end of my second month at my new job, and learning a lot constantly. There is literally an infinite amount of information to learn about programming. And not even just programming, but what SSG to use for documentation, how tickets should be created and assigned, naming conventions in CSS/LESS, etc. The list will go on. Literally. Forever. 

Anyway, have a poke around and I hope you find some of these articles useful! 

![Mars Rover Perseverance simulation landing with jets on Mars](https://media.giphy.com/media/2uL0EUIVjuNaClGHFj/giphy.gif)

---

## [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)

I clearly was scouring the internet looking for the solution to undoubtedly a simple z-index issue, and when I came upon this article I realized I actually had no idea how z-index really worked besides, "Big number makes it go on top" or something equally naÏve. This article lays out a few simple scenarios which illustrate how z-index actually works, and why you changing the z-index just never fucking works like you think it will. 

> The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you’re setting a z-index of a billion on an element and it’s not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn’t going to do you any good. 

## [Hash Tag Links That Don't Headbutt The Browser Window](https://css-tricks.com/hash-tag-links-padding/)

This article is especially useful in illustrating the good, the bad, and the ugly of jumping to IDs. The article not only gives a few copy-and-paste gems, but highlight a few methods that different programmers have written about. [Nicolas Gallagher's demos](http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/) in particular are SUPER clear and also easy to yoink. 

## [Design Good Practices](https://goodpractices.design/)

This link is something I found in my work's #design channel in Slack. It has clear, visual examples of good and bad design practices when it comes to programming, such as naming conventions and the organization of project.. It's a really excellent resource, and something to definitely reference in the future while building projects from scratch, as well as trying to understand any current projects you're part of. The documentation section of the website is still being written (as in, how to write well-structured documentation), but it seems it's currently being worked on and you can leave your email to be notified when its finished. 

## [Get BEM](http://getbem.com/naming)

If naming conventions sparked your curiosity, BEM is very popular, and something I'm currently still trying to learn. It's very logical, and is actually really good to look at right after reading the 'Design Good Practices' above, since it follows it pretty exactly in a specific convention. BEM stands for Block Element Modifier which is how the convention is broken down. This [freeCodeCamp ](https://www.freecodecamp.org/)article has a great ['Explaining BEM to a 5 Year Old'](https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/#explaining-bem-to-a-5-year-old) section of this nice naming conventions article. 

## IBM Cloud Videos - [Blockchain](https://www.youtube.com/watch?v=QphJEO9ZX6s&t=183s) and [DevOps](https://www.youtube.com/playlist?list=PLOspHqNVtKAAm1dmyiR9WMmw1UBoOwZVj)

Pretty much all of these [IBM Cloud videos](https://www.youtube.com/user/IBMCloud) are fantastic, but today I'd just like to highlight the Blockchain video. It breaks down not just what blockchain is, but also how it can be used, and why it's so exciting. IBM also has a great resource here with more articles and videos about Blockchain basics. 

Ok ok, actually I'd also like to highlight the IBM Cloud DevOps Explained video series. When I was first applying for jobs, I have to admit I didn't really understand what DevOps even was. It was this big idea that I thought meant, "Everything about running a development project"...which I guess it kind of does...but anyway, this series really breaks it down into bite-size parts so you can really understand it as a newcomer. 

## [Setting up multiple SSH Profile to manage multiple git accounts](https://dev.to/yashsway/setting-up-multiple-ssh-profiles-to-manage-multiple-git-accounts-macos-3m7m)

I knew it was coming, I knew at some point I was going to have to set up different SSH profiles for work and for my personal use, and was honesty kind of dreading it because I knew it was going to be a pain. Luckily someone else already wrote an article after sifting through various documentation. There was still a bit of fiddling to be done, but basically this article covered everything. The one thing that was critical was to name things correctly and go through the steps **exactly as they are outlined**. 

## [Hassmelden](https://hassmelden.de/)

My boss sent this to our team, and it made me very thankful to be part of a team that is aware of hate crimes and hate speech. This website is a simple app and website where you can enter a URL that includes some sort of hate speech. I've wondered if something like this existed, and happy that someone already did it. Check it out, and please use it if you see hate speech anywhere. It's easy to ignore or block, but actually reporting hate speech makes a big difference for statistics, and can generate real change.  

## BONUS: [Perseverance Rover](https://mars.nasa.gov/mars2020/timeline/landing/)

This doesn't have to do with web development, but if you missed it, Perseverance landed successfully on Mars. 😭 I actually cried. Aerospace events really get me misty (I'm not being facetious). I also have the honor of knowing someone who worked on her, and I'm very proud of them and of humanity for putting another rover (and a helicopter) on Mars. Go check out the first images she took, listen to the first sounds, and try to imagine how your web development projects would be different if you only have one chance to get it right and it cost $2.2 Billion.

![Perseverance having a little crawl across Mars' surface](https://media.giphy.com/media/5XQCZKnCcmmbWnZUaR/giphy.gif)

Blog

BR #1 - GSAP with React, SVGs, and Strapi with Next.js

BR #2 - Making a GIF, zsh, and Mystical Ninja starring Goemon

BR #3 - Naming Conventions, SSH Profiles, and Perseverance