JavaScript30 - Day 03

I kind of jumped ahead and finished day 03’s excercise as well today! 🙃

This time I learned about CSS variables and how to control them using JavaScript. I also learned a bit about registering and using event handlers for elements in JavaScript. There is a list of all available event handlers here if you are curious to check that out.

A live version of this project is available here. The entire code is available here.

JavaScript - Day 03 - CSS variables and JS

It has three inputs - primarily two range inputs and one color input that you can use to modify. Give it a shot!

JavaScript30 - Day 02

I built a clock and designed it using CSS today. I learned how to work with transform, transform-origin, transition and transition-timing-function properties on CSS. I primarily only followed the instructions from today’s JavaScript30 course.

I also attempted to update the length of the seconds, minutes and hours hands using CSS, but I haven’t made any progress so far. I will be attempting to modify that another day, and also will be attempting to handle the logic when the clock hits the hour mark - which Wes Bos did not cover on the video. I believe that allowing learners to figure out a few on their own is a nice idea - it’s a nice way to encourage them to explore their skill set. 💯

JavaScript30 - Day 02 - CSS clock

The clock is available for real-time viewing here and the code is published here as well. The live clock page can be set as a new tab/window on your browser. 😉

JavaScript30 - Day 01

I started watching Wes Bos’ JavaScript30 videos today and I am excited when I think about what I can accomplish at the end of 30 days!

Today’s lesson was about building a drum kit with keys that animate and make a sound when pressed. The full code is available here and a live demo has been published as well here.

Drum Kit from JavaScript30 - Day 01

A video of this drum kit is available here as well. It doesn’t play the audio though, as I am unsure how I can use macOS’ default video recording to record sound as well.

Auto-push to upstream repository on npm version update

When you publish a new version of your package on npmjs.com with npm version, you can automatically push the version upgrade to your upstream repository as well - thanks to npm scripts!

Add a npm script postversion: git push --follow-tags and you are good to go.

Whenever you made a npm version major, npm version minor, or npm version patch, a new commit will be added to your upstream repository as well, mentioning this version upgrade.

Check this out - it has a freeCodeCamp blog link for a primer on npm scripts!

Gist - A gem to upload gists from terminal

Whenever I wanted to share a piece of code with someone, I use GitHub’s Gists feature. It works great and offers embed options as well! Since I had been learning how to code Nodejs CLI apps in the past few days, I had been creating more gists than ever.

I realised it was cumbersome to open GitHub website to create the gist each time. I consider creating a CLI app as a challenge to address that problem, but as expected, there is already one!

It works great for my purpose and this gem is installable in various methods. Being a Homebrew fan, I used brew install gist to install, authenticated with GitHub and it’s good to go!

I can create new private gists with:

Paste content directly from clipboard:

Add a description as well to the gist:

The gem seems to offer a whole lot more. Check their GitHub readme section for details.