Anthony J. Campbell

Lambda School - Week 4: Dominating The DOM 🚀

Anthony J. Campbell
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 is an online learning company offering 30-week programs in programming 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. I intend to do the same over the next 27 weeks! If you’re not yet caught up on my weekly logs, I recommend you start here.

Finally, if you’re interested in signing up for Lambda School yourself, please consider using this link. With it, you’ll receive $250 after you attend your first day and Lambda will give me $250 for sending you there! Win-win!


Document Object What?

This week, we got well-acquainted with the Document Object Model (DOM) and how to play around with it. For those not in the know, the DOM is kind of like the master copy of the website you visit, used to make sure everything is just as the developer built it. In it, there's a long list of all the elements, images, code, and styling of the website, all in one neat package.

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. I know I might sound like a broken record, but this week's pace was higher than ever. I personally struggled to keep up during the instruction and hit a wall every so often when doing the assignments. In being self-taught, I mostly skipped vanilla DOM-Manipulation and went straight to React, where most of it is implicitly baked-in.

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. Luckilly, our intro to React is just two weeks away! 🙌


The Price Of Participation.

I didn't feel all that great this 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 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. Completing every day's MVP assignment felt like a victory in and of itself, so must stretch challenges remained untouched. I'm currently working on the backlog, trying to complete all of them by the end of this week. It pays to understand the fundamentals of something as foundational as the DOM.

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 miss just 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 exact things we learn at Lambda, I’ve listed them all down here. I guess it also makes for a good roadmap for others trying to do something similar by themselves.

In Week 4 we covered:

  • Document Object Model (DOM);

  • DOM Selectors;

  • DOM Methods, Properties, and Manipulation;

  • Browser Events and Event Listeners;

  • (Event) Propagation;

  • Components;

  • Bootstrap 4;

  • JS Class Components;

  • Custom Data-Attributes;

  • jQuery;

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:

  • I reviewed the jQuery documentation and redid an assignment using jQuery;

  • Reviewed the ‘Learning How To Learn’ course on Coursera.

  • Did FreeCodeCamp's ES6 and Debugging modules.

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.


QUESTIONS & ANSWERS

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 EU-based cohort 🤷‍♂️. Cohort sizes might impact the amount of one-on-one instruction and feedback you can get from your instructor. However, there's always the Project Managers and your 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.


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.

Next week is project week, where we're supposed to build a fully-featured 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. Four week in and we're already trying to replicate the work of people with 50X the experience. Because why not?

And remember, the average pace is for chumps!

Until next week!