Blogs and blogging Coding Design Education People Tutorials

How Wes Bos built his new site

I’ve followed Wes Bos for a couple years now. I bought several of his courses, and look forward to when I have time to do his Beginner JavaScript — Learn JavaScript from Scratch course. He recently rebuilt his personal site using Gatsby.JS, and published both a post and a video explaining how he did it:

The details of his site are pretty technical, and the code is available on GitHub if you want to fork the repo, and take a closer look yourself.

I don’t see myself reproducing what he’s done, and building a new site for myself in the foreseeable future. That said, I have tremendous respect for Wes Bos, and how he approaches his work.

He shares openly, offers pricing for his courses that make it much more affordable (I especially appreciate that), and he produces really good quality content.

If you’re interested in how to build a really fast, static site using the Gatsby.JS framework, definitely take a look at his post and video tour. If you’re interested in learning how to code in JavaScript and JavaScript frameworks like React, check out his courses.

Featured image credit: Wes Bos (I took this version from his GitHub repo).

Coding Education Useful stuff

Making sense of JavaScript array methods with Array Explorer

Sarah Drasner shared her awesome Array Explorer tool on Twitter the other day. It’s design is pretty simple, and yet a powerful way to learn JavaScript arrays. What you do is pick a couple options from drop-down lists to find the right array method you need for a project.

I still find arrays challenging and yet learning how to work with them in JavaScript is so important. If you’re still figuring this stuff out, definitely take a look at Array Explorer, bookmark it, and use it.

Sarah even made the code for Array Explorer available on GitHub so you can see how she put it together too.


Real-time, date-time JavaScript code for your website

I’ve been on a little bit of a journey over the last 6 months or so. I’ll explain in a future blog post but the short version is that I’ve expanded my skills to web development. I’ve been developing solutions to challenges I face as I learn more, and as I continue to update my Modi’in Bus project. I thought I’d start sharing some of those little solutions here on my blog, in addition to other helpful spaces.

I wanted to create a live date/time string for Modi’in Bus. My goal was to use JavaScript to insert a line that stated the current date and time. I searched for a few explanations of how to effectively use the JavaScript getDate() method (here is the MDN documentation).

Adding the date is relatively straightforward. I couldn’t find a clean solution for adding a clock that changes in real-time, until I found this great implementation by Eugenio Leon. The challenge with the time is that you want the live display to be dynamic, and not just update when you refresh.

The solution I came up with (with the help of the resources I mentioned) uses ES6 syntax, and seems to work pretty much as expected.

This is my solution. The script determines the current date and time, and inserts it into a div element with the class of container in my site code:

// The purpose of this block is to list the month names which will correspond with the corresponding numerical value of the particular month that is other derived from the getDate() method.
Date.prototype.monthName = function() {
  const monthsOfYear = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  return monthsOfYear[this.getMonth()];

// As with the previous block, this block states the days of the week so the script can match the named days of the week to corresponding numerical values.
Date.prototype.dayName = function() {
  const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return daysOfWeek[this.getDay()];

function realtimeClock() {
  const now = new Date(),
  today = now.dayName(),
  year = now.getFullYear(),
  month = now.monthName(),
  day = now.getDate(),
  secs = ('0' + now.getSeconds()).slice(-2),
  mins = ('0' + now.getMinutes()).slice(-2),
  hours = now.getHours(),
  container = document.querySelector('.clock');
  container.innerHTML = `Today is ${today}, ${day} ${month} ${year}. The current time is ${hours}:${mins}:${secs}`;


I thought I’d share it because I couldn’t find anything that did the trick quite like this on StackOverflow.

Featured image by by Loic Djim on Unsplash