Vanilla JavaScript Projects

Wrapping Up

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Vanilla JavaScript Projects

Check out a free preview of the full Vanilla JavaScript Projects course

The "Wrapping Up" Lesson is part of the full, Vanilla JavaScript Projects course featured in this preview video. Here's what you'd learn in this lesson:

Anjana wraps up the course with a summary of the accomplishments achieved through the projects and provides some additional resources.

Preview
Close

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> So let us take a moment to pat ourselves on the back and review and recap a few of the things that we have learned here. And I will say that one of my, if I were to say in a word, [LAUGH] the takeaway here is you can't have bugs in your code if you don't write any code.

[00:00:19]
So that's for sure, but we do need to write code to do some things, so we've been talking about it. And we have done so javascript, much wow, hope everyone appreciates the Comic Sans. And we have been over a lot of different features of JavaScript, and the browsers, and the other environments it runs in.

[00:00:40]
For example, we talked about a lot of browser internals, how JavaScript engines use the Stack and the Heap to do their thing, how the event loop queues up stuff that needs to happen. And what that means for us trying to predict when the code that we thought was gonna run 1,000 milliseconds later, actually runs 1,200 milliseconds later or whatever.

[00:01:01]
We talked about asynchronous code in a little more detail. We talked about callbacks and other ways other APIs that we have to do things like setTimeouts and sort of schedule things to happen. Or set intervals and do things on every frame of data coming in from the video stream, for example.

[00:01:18]
We talked about higher-level ways to think about complex programs, and kind of stay organized and stay principled. So things like programming paradigms, functional programming, object-oriented programming, and some of the ways that those play out in JavaScript, which is a pretty multi-paradigm language in that sense. We talked about prototypes plenty, and the prototype chain, and the zombie object at the top of it, object object.

[00:01:48]
So now when we go to, I don't know, an airport and the next flight to object object is, [LAUGH] then we will do a knowing nod. [LAUGH] And we also talked a lot about iteration and some of these underlying protocols that is the magic that's going on under the hood when we do things like a for of loop, or a spread operator and how we can leverage that to even implement our own iterable objects.

[00:02:19]
We talked about, yeah, Symbol.iterator and generators, and how we can use those to satisfy the iteration protocols. And we talked about class declarations and inheritance of classes, and setting methods and properties, and making them private or keeping them public, or having getters and setters, all that good stuff.

[00:02:41]
So we can start to write code a little bit more in the style that we might be used to if we're coming from another object-oriented language. And we definitely talked about a tiny, tiny tip of the iceberg of the APIs that are available to us through the magical thing we call a browser.

[00:03:01]
We talked about the DOM, and the Canvas, and MediaDevices. And now, also things like the share API and the ways to figure out what the user individually has as their settings, do they prefer dark mode or not? So we've really done so javaScript, much wow, and also very workflow, amaze.

[00:03:25]
These are all Doge memes. Okay, anyway, we also talked a lot about the context in which we are using JavaScript. It's not enough to just know the keywords and all of that in order to really be a productive JavaScript developer. So we need to know things like the fact that Node.js exists and the historical accidents and what that means for us [LAUGH] as developers.

[00:03:49]
And how npm and the whole package ecosystem lets us pull random strangers code into ours for better or worse. And [LAUGH] we talked about the different module systems that there are in JavaScript and how we need to specify ES Modules in certain contexts if we wanna use those imports and exports to be able to keep our code base organized.

[00:04:13]
And not have all of our code in one massively long script tag or something like that. We learn how to use a Vite to kind of very quickly, as the name would imply, get a dev server up and running and iterate on development. Which then we can use to build for a more production-ready version of the site that does a whole bunch of magic under the hood.

[00:04:39]
And also opens the doors to all kinds of other tooling, like Astro or other kind of meta frameworks that allow us to start building more and more complex sites on top of these kinda principles. So there's almost this whole network of these different tools and layers. We talked about linting and ESLint, and formatting with pruettier, and how to set up our own custom scripts in our packages and configure everything with JSON files, and so on and so forth.

[00:05:10]
We even deployed a site to the interwebs, which might not have felt so magical, but I think it's pretty magical. We all, Shipped something real to the world, and that, I think, everyone should feel good about. And even if it didn't happen, it's all good because we now have a way to start exploring the whole world of what we call continuous delivery in the sense of automatically building and deploying our sites whenever we push to Github.

[00:05:45]
And there's all kinds of other things we can do. Things like continuous integration, running our test suite, for example, every time we push a commit opens up a whole world of possibilities. And we got a little friendly with Github and some of Github specifics here, and things like VS Code, and other goodies that Microsoft [LAUGH] has for us, I guess.

[00:06:06]
So we've also even now all forked a project, and the next step would be to make a pull request or essentially a request to the original project, Meme Me, to incorporate the feature that you've added. So I can't promise I will keep up with the, open source maintainer struggle is real, but this is essentially what you might be doing if you're using a tool.

[00:06:27]
Yeah, like Vite, for example, and you find a bug and you wanna be useful and contribute back to these open source projects that we know and love and depend on. As developers, we can do all that through Github and through this forking and PR flow. So we've opened, hopefully, a lot of doors for ourselves.

[00:06:47]
And I don't know about you all, but I am very impressed with everybody's work and everybody's amazing questions. So thank you all so much for all of the engagement, and all of the rabbit holes, and all of the edge cases and new ideas and imaginations. So amazing, amazing work.

[00:07:08]
And I hope from here, we are all feeling empowered to go forth and continue adventuring into the wide, weird, sometimes wonderful, sometimes wacky world of the web. And may the force be with you as you do so. Thanks so much.
>> [APPLAUSE]

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now