!checkin for the 6-hour JS Super Review between classes 34 & 35 of #100Devs. Haven't touched any of the material since the end of March & this was a lot. Variables, functions, conditionals, loops, arrays, objects, APIs, OOP & more. Job-hunt material, too.

On to backend, next.

#webdev #javascript

Yesterday, #100Devs talked about crafting a story that gets you hired!

Today @grahammcbain.bsky.social who went from bootcamp grad to Senior Developer Advocate working on Amp Code is

Telling their story, breaking down the agentic coding space, & giving everyone free credits in 30 mins!

#checkin #100Devs #webdev

#checkin #100Devs #webdev

I've helped 1000+ people get jobs in tech

This is the most amount of interviews, callbacks & offers I've seen in almost two years

For the next 30 days, I'm going live on Discord every day to help you land one too!

If you are feeling stuck, join us in 15mins

leonnoel.com/discord

Yesterday, I found that hex colors can have opacities by adding a 2-character alpha value to the end (for 8 chars total). Its called an RGBA hex.

So black (#000000) can be 50% opaque as #00000080 or 10% opaque as #0000001A. Its been a thing since 2018!

#100Devs #webdev #css

YouTube video by The Pragmatic Engineer Why you should rewrite software three times

This is an interesting take. Its like spaced repetition.

#100Devs #webdev

Scrimba's data structures & algorithms course dropped this AM. You need a pro subscription to access it.

#100Devs #webdev

Added "fixed" & "w-full" Tailwind classes to nav container so its always onscreen when scrolled down & maintains full width. Changed padding from only bottom to top & bottom, too, because the top was too close to the top of the window.

Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

The burger-menu icon is something I picked up from this site on the @tailwindcss.com homepage's footer. You can grab SVG or JSX:

#tailwind

Trying something different with the Nav. It starts as a little button in the top-center of the screen. Clicking it drops it down, carrying the menu with it. Absolute positioning & translate-y based on state did all the work here. The colors are just for testing so I can see.

#100Devs #webdev

This lets each page send h1 text to the Header so it can be rendered. Its grabbing the pathname from the URL & referencing an object to find a key with that pathname. It grabs the text value for that key (title) & drops it into the h1.

In the previous iteration of the agency website, I used a Header component to render the hero section for each page. It was called from each page, so they passed props with h1 text. Now, I'm using a Layout component, so its different. I got it working like this:

#100Devs #webdev #react #reactrouter

You can see from this Contact page that Layout is rendering the Header component, then the Contact component's content, then the Footer component.

1-2-3, its that straightforward.

2. In the component with your routes, import the Layout component & wrap your Route components in it, with Layout also being a Route element with no path.

Quick rundown of how to add a Layout component with React Router 7:

1. Make a Layout component somewhere (you can name it anything, I used Layout).

Import { Outlet } into it. Its like { children } & is where the page component content will render.

#100Devs #react #reactrouter #webdev

Also, shoutout to @devmansam.net for embarking on this journey with me. Its been like a year now & I so rarely meet people whose goals & values align so closely with my own. It makes the weight of the things we're working towards so much more bearable to not be going on this alone like I usually do.

It might be a bit until I catch back up with everyone. Sorry about that. But, I want to share things here as I go still because I'm sure it can help other people.

I hope all of you have been well. I see so many of you landing programmer roles & freelancing clients at the #100Devs huddles. Congrats!

Last night, I started rebuilding the agency site using Tailwind & React Router 7. I added back all of the pages & routing works. The text content is all there.

I'm using a Layout component this time to dynamically add the header & footer to each page. The design will probably change yet again.

YouTube video by JavaScript Mastery Tailwind CSS v4 Full Course 2025 | Master Tailwind in One Hour

I picked Tailwind back up the other day after working through a really good refresher on it & it gave me the itch to adapt to it. I tend to write my own CSS for everything. The component libraries built on it interest me, which is why I dove back in.

#tailwind #css

Its been 2 months since I kept up with Bluesky. Sorry about that - I want to catch back up with what everyone is doing. I've been really busy building. I largely finished the agency website a few weeks ago. There are small things that needed adjusting, but I switched gears.

#100Devs #webdev

Hit Denny's with @sirashtondev.bsky.social by accident after kiddo #1's concert. They were listed as The Burger Den online. It was a trap!

That said, the triple was pretty good & someone got ice cream.

Their favorite is always the band room. I think it would be mine, too.

Visited all of her classes after the concert. Met her teachers. Kiddo #2 got to RP as an 8th grader.

So did Ashton. ;)

Kiddo #1 became a teenager yesterday & had her 1st band concert of the year (she's percussion). @sirashtondev.bsky.social went with me to see her play.

Revised the portfolio section for the agency website yesterday. Working on the Team section, but I'm not going to finish it before I run out later.

#100Devs #webdev #weGoGet

Thanks to the folk who've offered feedback on the projects I've been working on:

@devmansam.net
@sirashtondev.bsky.social
@funbunch.bsky.social
@nabeehag.bsky.social
@lilliancodes
@rai-bread.bsky.social
@shadofsparta.bsky.social

I appreciate all of you.

#weGoGet

And, finally, I just started experimenting with the Motion animation library for React & building animation templates for use in future projects. Its an interesting approach, using translate functions under the hood for optimized rendering & less DOM havoc. My first pass will be done in a few days.