David's Blog

Javascript 30 Day 11: Custom HTML 5 Video Player

Tue, 10 Mar 2020 23:11:57 -0600

Oh wow!

I had so much fun with this. I think what I’m enjoying best about this is just learning how not crazy hard some stuff is. I’ve been programming forever. Over 33 years. But there’s still stuff (ok, maybe a lot of stuff) that makes me just wonder how in the world it’s even possible. I know it’s possible. I’ve seen it done, but since I don’t know how it’s done, there’s still things that seem like magic. I think one thing I keep going back to is video games. I’ve been playing video games slightly longer than I’ve been programming, and many years ago I tried to make my own games. Now granted, hardware is thousands of times faster and just about everything is loads better, but some part of my brain is still stuck in tech from over 30 years ago. Back then having a screen of 320x240 pixels update quickly enough to look like something was moving seemed like an accomplishment. Now I feel being able to render millions of pixels and still have time to make decisions about what should happen that would cause the pixels to change seems crazy. I remember working like crazy just to get a little space ship on the screen to shoot lasers at something and how difficult that seemed.

Javascript 30 Day 10: Hold Shift to Check Multiple Checkboxes

Sun, 01 Mar 2020 12:27:44 -0700

Today is day 10, one third of the way through Javascript 30. Today’s less is called “Hold Shift to Check Multiple Checkboxes” and in this one Wes encourages you to try out a solution on your own before coming back to the video. So that’s what I did, and surprise! They are a little different.

The idea is that you’ve got a bunch of checkboxes, representing a todo list or an inbox or whatever and you want to click one of them, then hold shift and click another, and all of them in between should be checked. Here’s the approach I took.

Javascript 30 Day 9: 14 Must Know Dev Tools Tricks

Sat, 29 Feb 2020 17:47:33 -0700

On day 9 of Wes Bos’ Javascript 30, we’re learning about different dev tools tricks and I was super excited after hearing the first one because not only was it not something I’d ever heard of before, but it’s super useful.

I’m a big fan of debuggers for helping get to the cause of a problem or figure out where things went sideways. In PHP, Go as well as Javascript, I use the debugger on a regular basis. For Javascript though, there’s many times where if I’m not super familiar with an application, I don’t even know where to start debugging. It turns out you can set breakpoints on elements in the DOM, telling the debugger to break when a DOM element is modified, when an element’s subtree is modified or when a node is removed. Then it will break on the javascript line that causes that to happen, even if you have no idea where to even start looking for the code that did the modification. Super cool and I’m sure this is something that will be super useful for me in the future.

Javascript 30 Day 8: Fun with HTML5 Canvas

Tue, 25 Feb 2020 20:01:56 -0700

Day 8 is all about mouse events and drawing on the canvas and it was fun! I’ve used the canvas before when teaching kids Javascript. We used it to make giant pixels for our own version of Conway’s Game of Life and Langton’s Ant. But in there we were pretty much just drawing rectangles at a particular coordinate. There were no mouse interactions, or any of that.

In this exercise you build a super primitive drawing tool that lets you draw with ever-changing colors and brush sizes on a canvas. Stuff I learned about here was different effects you can have when drawing by setting the globalCompositeOperation on your drawing context. I didn’t know about that, but with enough patience and time you could probably get a lot of the layer effects you find in Photoshop to work when drawing on the HTML 5 canvas. Constantly changing the size and color of the line also make it a lot more visually interesting to play with than just a constant size or color, even if it would be near impossible to use to get some result that you were trying for. Setting the canvas to draw behind with destination-over is pretty cool. It would be fun to experiment with adding in controls for the size of the line (keyboard maybe?) and letting the colors cycle or dynamically (with control perhaps) changing the globalCompositeOperation value while drawing. I think you could come up with some pretty cool looking drawings.

Javascript 30 Day 7: Array Cardio Part 2

Tue, 25 Feb 2020 19:32:00 -0700

The second day of array stuff is here! Wes started out with Array.prototype.some and Array.prototype.every which are functions I’m familiar with, and he also introduces the trick of console logging variables when surrounding them with curly brackets. I think this is an ES6 thing, and I didn’t learn it from this course, but I have been showing it to a lot of people over the past few years, so it’s definitely worth sharing.

Javascript 30 Day 6: Ajax Type Ahead

Fri, 21 Feb 2020 00:07:19 -0700

Day 6 is a good one. It introduces a bunch of concepts that are pretty important in a day-to-day life of a web developer. The idea is we’ve got a big list of cities from all over the world and you type into a box and the list limits itself based on what you type.

First up is fetch which is a pretty excellent API to making HTTP requests from javascript. The concept of promises is touched on which is pretty important, especially if you’ll be making API calls in javascript. I hope later days will go more into depth since so far I’ve been coming up with my own patterns in my work that I think are “ok” but could probably be better. The fetch call gets set up to go out to a github gist containing the JSON structure with the array of objects representing the 1000 cities (clever use of something that gives back a response just like an API but without needing to develop it).

Javascript 30 Day 5: Flex Panels Image Gallery

Thu, 20 Feb 2020 21:00:26 -0700

Day 5 was about building a sort of flex panel gallery. The screen is split vertically into five panels that have an image background and a set of words in each panel spelling “Let’s Take It All In” across the center of the screen. When you click on any of the sections, it will expand with a sort of bouncing expand (bezier curve transitions) and open up and then another pair of words slides from the top and bottom revealing a different phrase in each panel.

Javascript 30 Day 4: Array Cardio Day 1

Wed, 19 Feb 2020 23:01:21 -0700

Today’s lesson was all about some really useful array functions in javascript: filter, map, sort and reduce. It also introduced console.table as a great alternative to console.log for tabular data. It’s one of those things in console that I learned about long ago and probably forgot, but it’s great to be reintroduced. It got me to go re-look at all the other cool stuff you can do with the javascript console. I may need to do a writeup on those things at some point because they are great and I think mostly developers rely on just console.log when there’s a whole lot more they could do and learn using their browser’s console.

Javascript 30 Day 3: CSS Variables

Tue, 18 Feb 2020 00:03:41 -0700

On to day 3 of Javascript 30. This one is about CSS variables. Of course there have been variables and what-not available in SCSS and SASS and all those sort of pre-processor based CSS frameworks for quite some time, but I didn’t know there were variables available in CSS now. I also didn’t know about the html range input type. I’ve looked and there’s now a bunch of “new” types, although who knows how new. I’ve been concentrating more on the backend since back in the day with Javascript was more of a toy than much of something that could do useful things with a website.

Javascript 30 Day 2: Clock

Tue, 04 Feb 2020 23:17:36 -0700

I haven’t exactly been able to hit each exercise each day, but I’ll post whenever I do get a chance anyway.

In the Day 2 Javascript 30 exercise, we implement a clock by converting data from a new Date object. The math is pretty straight-forward, converting times to degrees and then using css transforms to rotate the hands. As with Day 1, I learned about document.querySelector and document.querySelectorAll. I’m not sure why I hadn’t run into this before now, but they’re great. I used them to extract the lesson titles from the Wes Bos Courses I’ve signed up for and then dump them into a Trello checklist.