Lambda School - Week 4: Dominating The DOM

“First, solve the problem. Then, write the code.”

— John Johnson

Week 3 of Lambda School is over and done with! This week: DOM Manipulation and Components.

For those not in the know, I’m a student at Lambda School’s Full-Stack Web Development program (Read more here). In short, Lambda School offerw 30-week programs in web development, data science, and iOS development that are free until you get a job. If you don’t get a job, they don’t get paid.

As usual, I've done a write-up of my experiences, ups and downs, shenanigans, and curriculum this week. If you’re not yet caught up on my weekly posts, I recommend you start here.

Document Object What?

This week, we got well-acquainted with the Document Object Model (DOM). For those not in the know, the DOM is a way of visualizing the structure of a website as one giant tree. Essentially, it is a list of nodes that each represents an element of the page. You can think of it as the blueprint of your site that the browser uses to compile the website into its final form.The DOM allows programmers to access the tree and to change the structure, style or content of a website.

The cool thing about the DOM is that you can then access, alter, and add elements to the website. Having a side-menu pop up after pressing a button? Yep, that's done via the DOM. Having items expand and uncover content once hovering over a certain element? Easy-peasy. Want to have pink unicorns popping up all over the screen? Just ask my teammate Connor, who did just that.

Now, understanding and using the DOM effectively is a tough thing to learn when you're brand-new to programming. I know I might sound like a broken record, but this week's pace was murderous. They managed to cram an insane amount of concepts and theory into a couple of days of classes. Being self-taught, I mostly skipped vanilla DOM-Manipulation and went straight to React, where most of it is implicitly baked-in. As such, it was a nice recap and a chance to brush up on my fundamentals.

In working with the DOM, you're handed the keys to the playground. Anything you could ever want to do is possible. But the playground has a bunch of archaic rules and methods that have to be followed. Writing DOM selectors and declaring event listeners gets boring after a while. It's rather verbose and clunky. Luckily, our intro to React is just two weeks away! 🙌

The Price Of Participation

I didn't have the best week . I got the sniffles, had a bit of a fever going on, and just generally felt miserable. However, Lambda's pace demands you stick with it, flu-like symptoms be damned.

Of course, it's hard to sleep with a nose that's backed-up like LA traffic during rush hour. I'd be lucky to get three hours of uninterrupted sleep before waking up, wheezing and out-of-breath. Some Modafinil and an unholy amount of caffeine ensured I was awake, but I could definitely tell I wasn't fully there. This did impact my performance somewhat but I don't think I missed out on anything. Completing every day's MVP assignment felt like a victory, so most stretch challenges remained untouched. I usually went straight back to bed. I'm currently working on the backlog of stretch challenges, trying to complete all of them by the end of this week. It pays to understand the fundamentals.

Where was I? Ah yes, coffee.

My morning ritual this week.
My morning ritual this week.

In general, Lambda allows for missing approximately eight hours of class per month, so calling in sick for a couple of days wasn't really an option. That might sound harsh, but I can attest to feeling lost even if you just miss a couple of hours. In a way, the demands placed upon your time and energy remind me of what Elon Musk said about working at Tesla:

“If you’re at Tesla, you’re choosing to be at the equivalent of Special Forces. There’s the regular Army, and that’s fine, but if you are working at Tesla, you’re choosing to step up your game. And that has pluses and minuses. It’s cool to be Special Forces, but … it’s not for everyone.”

Shuffle the words around a bit, and change around Tesla for Lambda School and you get:

“If you’re a student at Lambda, you’re choosing to be at the equivalent of a Special Forces academy. There’s the regular Army bootcamp, and that’s fine, but if you are studying at Lambda, you’re choosing to step up your game. And that has pluses and minuses. It’s cool to be Special Forces, but … it’s not for everyone.”
Cool training compilation not included. Sadly.
Cool training compilation not included. Sadly.

Getting The Hang Of Things - Sorta

As most people are curious about the curriculum at Lambda, I’ve listed the topics down here. I guess it also makes for a good roadmap if others try to do something similar by themselves.

In Week 4 we covered:

  • The Document Object Model (DOM);
  • DOM Selectors;
  • DOM Methods, Properties, and Manipulation;
  • Browser Events and Event Listeners;
  • Event propagation, capturing, and bubbling;
  • Brief overview of Bootstrap 4;
  • JS Class Components;
  • Custom Data-Attributes;

In addition, I always try to review some extra material. Mostly out of curiosity, but sometimes to understand concepts that didn't come through too well during classes:

For next week, I've also got a couple of things I want to check out. Some of this is overflow of this week's material, but other items reflect my interests or things I ran across while on the Internet:

  • Do all the stretch assignments from Week 4;
  • Read up on vanilla CSS animation.
  • How is it used in production websites?;
  • Are there certain industry-standards/best-practices?;
  • What are some of the hardest and most impressive animations people have made?.
  • Check out Greensock's GSAP animation engine;
  • Get some more practice with SASS;
  • Convert the LESS of next week's project to SASS.

Q&A

If you have any questions regarding the student experience at Lambda, hit me up on Twitter! I’ll try to answer some of them every week.

How big is each cohort?

From what I understand, most web development cohorts are between eighty and a hundred students. My cohort only has twenty-two students, since we're the first European cohort 🤷‍♂️. Cohort sizes might impact the amount of one-on-one instruction and feedback you can get from your instructor. However, there's always your Team Leads and study group of 8-ish students that allow for more personal feedback.

What kind of projects and assignments do you build?

Over the last couple of weeks, we've covered quite a few different one. We've had to style faux marketing websites in plain CSS and LESS, focusing on mix-ins, correctly using variables, or making sure the design is pixel perfect. We've built a travel website, which focused more on incorporating event listeners. Other than that, we've had:

  • A news app, which forced us to build and implement accordion pieces by hand;
  • A tab-based filtering system for Medium posts;
  • A pixel perfect recreation of the landing page of an industry magazine;
  • A fully-featured landing page built with Bootstrap in less than an hour.

So far, the projects have not been too challenging. I attribute this mainly to Lambda spending the first two weeks on easily-digestible material. Things like semantic HTML and styling. As mentioned before, I would prefer they cover those things during the pre-coursework. It feels like a waste of time and money to have instructors cover these basic topics when a 20-minute video would do.

State of the Lambda Union

I won't lie, this week was taxing. Energy was low at times and I didn't perform as well as I would've liked. I slept a ton. I feel somewhat better right now, but I'm still sniffling occasionally.

Next week is build week, where we're supposed to build a complete landing page with as much fanciness as we can manage. We've got three days to replicate a design we like and make sure it's a pixel-perfect copy. Shouldn't be too much of an issue. I look forward to building stuff from scratch, though!

Sign Up For Friday Favorites!

Join the 500+ people who receive my Friday Favorites newsletter in their inbox every week. It's a mash-up of the most interesting links, books, and ideas I came across that week, as well as my latest articles and book notes. If you're curious and looking for high-quality information, you should definitely join.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.