DEV Community: Nevin Katz

About Me —Nevin Katz

Nevin Katz — Sat, 07 Aug 2021 14:28:09 +0000

Hi there, and thanks for dropping by. I am a web and app developer and private tutor living in the Boston area. While I grew up in Virginia, I have now spent more of my life in Massachusetts. Outside of work I enjoy illustration, running, writing about technology, and losing to my son at chess.

My history as a developer is a fairly roundabout journey. I started programming in BASIC on my Commodore 128 during the age of floppy disks, following tutorials from 3–2–1 Contact magazines and building pint-sized games. After middle school, my interests veered towards track, cross country, the sciences, playing in a college band, teaching, and illustration—and I ended up taking a long break from programming. I then came back to it as an adult when my interests in education, visual media, and technology started to converge.

Education, Media, and Tech

In earlier days, I majored in Biology at Swarthmore College and graduated with an interest in pursuing a career with a focus on education and an emphasis on science and technology. I earned an Ed. M. in Teaching and Curriculum at the Harvard Graduate School of Education. I then went on to teach science at the middle school and high school levels in Cambridge and Western Mass. While teaching, I wrote and illustrated Dr. Birdley Teaches Science, a nationally-published series of nine comics-based science resource books for grades 5 through 12.

Dr. Birdley, the title character in the book series.

After teaching for eight years and writing the Birdley series, I gravitated towards writing a science curriculum and developed a renewed interest in web development. I remember reading Lynda Weinman’s book on Designing Web Graphics (5th Edition) and realizing how the advent of the web was giving programming a new visual realm that captured my interest. I started learning programming again on my own, learning ActionScript and building an early version of the Birdley site as an initial portfolio piece.

While I was initially looking for freelance tech and design work, I was asked to come onboard as a full-time online learning specialist at Education Development Center (EDC). It was 2008, so Flash was still a thing, blogs and wikis were proliferating, and online learning was still thought of as the “wave of the future.” In addition to facilitating and writing online courses, I consulted on developing a Physics CD for government schools in India and developed graphics for our online courses and conferences. I also created Flash multimedia and coded up course pages using HTML, CSS, and occasionally jQuery. (Back then, building a jQuery show-hide felt like a big deal.) Around that time, I started to become interested in mobile development and felt I was hitting my ceiling as far as my coding skills. I did not feel developed enough to build what I wanted to build.

Around this time, I started working with students and adults as a private tutor, homework coach, and test prep coach. I found that the opportunity to work directly with students and impact their growth helped to balance out my work in web development, and I have always enjoyed seeing my students grow and succeed.

Coursework and Coding Coherence

While at EDC, a supervisor of mine noticed my inclination towards programming and encouraged me to seek out formal coursework. In the Spring of 2012, I enrolled at the Harvard Extension School and started out with a web development fundamentals course. It was there that I noticed that my coding journey felt more coherent with an organized learning path. My next course, CS50, was where I really became entranced by programming, and I went on to earn a Software Engineering Certificate by 2016.

Projects

Among the highlights of the certificate program were the projects. Along the way, I returned to my interest in game development, building a small dungeon crawler for the iPhone, a cross-platform marble labyrinth game, and a Battleship Game in Objective-C and Java. And as an homage to a Commodore game I built, I remember staying up until 3am finishing a multiplayer white water rafting iOS game with three other guys over Skype. I also took a brief foray into bioinformatics, developing a gene sequence alignment tool in Ocaml using the Needleman-Wunsch Algorithm.

Exams

Most of my coursework involved taking CS exams alongside undergraduates, which were quite challenging. Preparing for them helped me to sharpen my CS knowledge and taking them gave me a renewed appreciation for the challenging tests my students go through. In fact, some of the test-taking strategies I recommend to my students come from my experience with what worked when preparing for and taking my CS exams, which had strict time limits and stressed higher-level thinking.

Recent interests

Since completing my certificate, I have focused on learning vanilla JavaScript, CSS, PHP, Drupal, and Android app development with Cordova. While I handle back-end work when I need to, I still gravitate towards front-end web development. I am currently learning Vue and React and enjoy exploring the HTML5 Canvas API and SVG animation. Since I also tutor AP Computer Science, I also try to stay up on my Java skills.

My role at EDC

Over time, my role at EDC has morphed into a tech lead for a group of websites in our U.S. Division and an app developer for our International Division. As a tech lead, I manage the development of Drupal sites, which entails a mix of custom web development, project management, and collaboration with other web developers. I also have had the opportunity to mentor junior developers and other staff with webmaster responsibilities.

Stepping Stone

As an app developer, I am building an internal app authoring system known as Stepping Stone, which consists of two components: an authoring site where staff can build app content in a no-code environment, and a suite of apps that can run that content offline. As part of the project, I built an API that allows the apps to either download directly or import a content package from a flash drive. Stepping Stone apps serve a range of purposes, including reading literacy evaluation, teacher training, early grades phonics and reading, and mental health provider workshops. The apps have been used in a number of EDC projects in a range of areas, including Mali, Zambia, and the Philippines.

Aside from my work with Stepping Stone, I also consult on how best to integrate eLearning solutions, such as Articulate Rise, Twine, and H5P into our eLearning products.

Tech Writing

As a relatively new writer on Medium, I enjoy writing tutorials and articles about technology, web development, and science. While All Things Science publication is the home for my science articles, I have also written coding tutorials and tech articles for Geek Culture, JavaScript in Plain English, Better Programming, Bootcamp, The First Time, About Me Stories, and CodeX.

How to Reach Out

Subscribe to my email list.

Check out my tech blog at nevkatz.github.io.

Find me on Twitter, Medium, Codebase.so, Polywork, or LinkedIn.

Take a look at my side projects on Github.

Wander through my front-end experiments on CodePen.

Reach out through Nevin Katz Tutoring.

And feel free to shoot me an email at nevkatz@gmail.com.

Journey Into Node JS!

Nevin Katz — Sat, 07 Aug 2021 14:08:46 +0000

Suppose you want a program that can handle server-side operations, like writing to a database or a file system, but you feel that content management systems like WordPress and Drupal have more features than you need — and may not be worth the maintenance and setup steps.

Or suppose you speak Javascript as your native tongue. but want to try writing a desktop application that can output files.

If you find yourself in this situation or a variant thereof, I recommend exploring Node JS — a lightweight open-source platform for developing server-side applications with Javascript.

As a developer who has mainly used Drupal content management systems or Android apps to interact with databases and file systems, I am finding Node JS to be an exciting foray into using Javascript to run server-side applications using a lightweight solution.

Requirements

Using Node JS requires a familiarity with the command line, and if your machine does not already have it, you will need to install it on your machine.

Hello World

Once you have Node installed, running a Hello World program is pretty straightforward. Putting that out there now because for me, getting something to work is usually my first step on the journey. That said, this post focuses mainly on what Node JS is and why it is unique.

Background

Node JS, originally released in 2009 by Ryan Dahl, helps to redefine Javascript’s place in the world by making it efficient at running server-side applications.

While it was not the first Javascript server side platform — that credit goes to Netscape’s LiveWire Pro Web in 1996 — it is set apart by being event-driven — in other words, being drivable by events such as user clicks. It is also distinguished by being able to do interact with clients, files, and databases efficiently without holding up other tasks.

And with the right modules, such as fs (file system), http, and MySQL, can enable server programs to interact with the file system, a database, and the browser client.

What draws me to Node

Of all of Node’s features, the file system capability is currently what draws me to it. While Node is widely used for websites and web applications, I am right now interested in using it to create local desktop applications that can create and modify files, create directories — essentially taking what a user creates and making useful content packages out of it.

Intro to Blocking and Non-blocking I/O

One “under the hood” feature that makes Node JS useful is non-blocking I/O, or non-blocking input/output.

What does this mean?

I/O, or input/output, refers to a program interacting with the outside world, either by receiving or sending information.

An I/O interaction usually occurs in the context of a thread, or a singular sequential flow of control in a program.

While some steps in a thread may involve an I/O operation, others may involve operations within the program. During an I/O operation, the program sends out a request, and gets a response.

Blocking versus Non-Blocking

If an I/O operation is blocking, it means that after a program sends an I/O request, nothing happens in a given thread until a response is received and the operation is complete. If it is non-blocking, it means that the thread can keep going with something else while it waits for a response.

In my case, I am primarily interested in I/O operations occuring between the server program and the browser client, as well as the server program and the file system.

Before we look at the details of Non-Blocking I/O, let’s first take a closer look at threads and the processes they reside in.

Threads and Processes

When a program and its resources are loaded into memory and begins to run, it is called a process. Within this process, there are one or more units of execution called threads. These can be thought of as mini-processes within a process. In processes with multiple threads, these threads share the same memory.

Single-Threaded versus Multi-Threaded

Different programming languages have different ways of handling processes and threads. Some, like Javascript, can run just one unit of execution at a time, and are called single-threaded. Others, like Java and C#, can multi-task and have multiple threads running within one process.

Blocking I/O

While Java can follow multiple instructions at a time, it also uses blocking I/O, which means that a thread that is reading or writing a file is blocked until it finishes that file task. In other words, it stops what it is doing until the file input/output process is complete before moving on.

And that’s fine if you have Java’s multiple threads, but on a single-threaded Javascript application, it would hold everything up and make your program less efficient than it could be.

Non-blocking I/O

Because blocking I/O introduces this inefficiency, Node JS has non-blocking I/O, which allows it to send out a request to the file system and move on to another operation while it waits for a response to that request.

Non-blocking operations in Node JS are asynchronous

As an aside, non-blocking operations in Javascript are asynchronous (or async for short), which means that the request-and-response sequence does not require continual attention by the program or occur as consecutive steps. You can start learning about async requests at w3schools, and a post here on async requests will be coming soon.

Hope this helps!

This has been a quick look at Node JS and non-blocking I/O. More information about blocking and non-blocking I/O can be found at the Node JS website.

Returning to a Drupal 7/9 Migration — with Paragraphs

Nevin Katz — Fri, 06 Aug 2021 19:54:29 +0000

After a week of migrating our multisite system from D8 to D9 on our test server, I am now shifting to migrating another site from Drupal 7 to Drupal 9. Thankfully, this is just one site and not a multisite system. It is primarily used as a content management service so that both Android apps and Powershell applications can pull down and organize content with a series of GET requests. That said, there are a few complexities: It uses the Group module, which allows us to assign content permissions based on project teams. It also has a custom module that allows us to simulate how particular activities will look in a mobile app. Finally, the videos use the media module so those may have to be re-added.

I started migration tests back in March 2021 and then put the whole thing on pause when it became clear that a lot of changes to both content and configuration would be happening.

Now I am back in it. My first step is to refresh my local setup based on our production site. Then I will be turning off all the modules we will not need again in order to simplify the migration process.

Paragraphs

Because this is a fairly simple site, we get a lot of mileage out of Drupal's out-of-the-box graphic user interface. That said, we do need to write custom scripts to migrate paragraphs. For those new to paragraphs, they are essentially "fields of fields." The paragraphs modules is similar to the Field Collection module except that it is compatible with Drupal 8 and 9.

After a lot of effort, I was able to get a paragraphs migration protocol working back in the Spring, and since then, we have had a proliferation in the number of paragraph types - and the nodes that use them - on our live site. So I will be writing additional scripts that will move over all those new paragraphs and their nodes to D9. We may also have to re-add some videos.

That's about it for now. If you develop in Drupal and are curious as to how this goes, check back here for further updates.

My Experience with a Drupal 8/9 Update Part 3: Database Updates

Nevin Katz — Fri, 06 Aug 2021 16:18:56 +0000

Part 1 | Part 2 | Part 3

Thanks for stopping by. This is my third post in a series detailing my experience with updating our 24-site multisite system from Drupal 8 to Drupal 9 this week in our staging environment. I hope you come away with a little insight on how to handle this in your own projects or on website upgrades in general.

The Drupal 8/9 transition has consisted of two main parts: the codebase upgrade and the database upgrade.

The codebase upgrade was challenging when I tried to migrate directly from Drupal 8 to Drupal 9 due to version conflicts with Composer. After hitting these roadblocks, I ended up switching my approach and starting from with a Drupal 9.2.3 Vanilla site, re-adding the modules and themes. This was the way to go, as most of the Composer updates were smooth after that with minimal dependency issues.

Since then, our work has been primarily focused on making database updates to each of the 24 sites.

One surprise from this upgrade was how many updates were needed to our site's theme. In addition to changing the versioning, there were several places where we had to change the syntax in our Drupal API calls. Fortunately, Acquia Cloud, our server provider, has a nice log system that allowed me to check into the errors resulting in the white screens I encountered during our database updates.

Another interesting find was that layout builder was automatically enabled for our homepages, which caused our homepage text to be hidden. Figuring out how to turn it off was tricky at first, but I ultimately found a way to do it with two clicks and a save.

One question I have yet to contend with is how best to handle local development. Now that Acquia Dev Desktop has reached EOL, I am trying out Lando. The caveat is that setting up multisites with Lando looks complex. I'm going to give it a try with just one site to see how it goes.

I have been focusing on database updates over the past 24 hours and they have gone fairly smooth. Every so often there is a module I need to add or a theme issue I need to resolve, but for the most part everything works and I can plot out our roadmap - as opposed to when I was starting, where I couldn't see two feet in front of me. As a result, I am now able to coordinate with our program sites around the globe to make sure we can handle any content updates that occur between now and deployment.

We are just about nearing the finish line, and this has been quite a learning curve. I hope my experience is informative for other Drupal devs looking to upgrade their sites from 8 to 9.

Elsewhere

7 Tips on Upgrading from Drupal 8 to Drupal 9

My Experience with a Drupal 8/9 Update Part 2: The Remote Site

Nevin Katz — Wed, 04 Aug 2021 19:22:58 +0000

Part 1 | Part 2 | Part 3

Alright, this is Part 2 of my writeup on my Drupal 8/9 upgrade.

After a day of adding back the themes and all my modules to a local 9.2.3 setup with Lando, my local site is now up and running.

BUT...the first remote site gives me a WSOD. So that is the first puzzle of the day.

Updates

I am now working on getting my remote site working as well. On the Acquia Logs I am getting this nice little error.


Uncaught PHP Exception InvalidArgumentException: "No converter has been registered for paramconverter.latest_revision" at /mnt/www/html/abemultisite1ysumx4zdc3/docroot/core/lib/Drupal/Core/ParamConverter/ParamConverterManager.php line 39 request_id="v-5d494db2-f558-11eb-82e1-0a7156243103"

Let's see if I can track this down.
I suspect this may have to do with the Acquia Connector module.
Acquia's Drupal 9 Installation Guide could be a good resource for other Acquia D9 sites. May be too far along with this one to make use of it, though.
Just ran composer run enable-asset-packagist within the lightning profile and then ran composer update at root.
Just added Acquia Connector and Acquia search. They are off, but I want to be prepared.
Alrighty, I am at the update.php page. Get ready for over 112 updates.
There is a warning that lightning and lightning media are not present and are required in schema, but I know they are. It didn't stop me on my local. I'm going to update the database manually and then run the update.
Ran the database update and the main hub site now works remotely!
Ah, I am getting messages on French translation files being imported. Very interesting.
The layout of the page is off. I wonder what could be causing that.
Turning off layout builder on the front page fixed the layout.
Turned on devel entity updates to fix an issue with compact date range.
Running drush entup in live dev mode updated the compact date range on the second try. (On the first try, there was an autoload.php error.)

Overall, good progress today. Both the Hub site and the france site work remotely after their updates. There are warnings about deprecated modules and such but those are for another day. Overall now the rest of this D8/D9 upgrade seems feasible now.

Elsewhere

7 Tips on Upgrading from Drupal 8 to Drupal 9

My Experience with a Drupal 8/9 Update Part 1: The Local Environment

Nevin Katz — Tue, 03 Aug 2021 17:51:25 +0000

Part 1 | Part 2 | Part 3

Monday night was one of those nights that I couldn't look away. I kept trying to upgrade my Drupal 8 site using a number of strategies, all to no avail. By the end of a long night I was soundly defeated by Drupal and its nefarious sidekick, Composer.

At least they seem adversaries in those moments. In the best of times, they are great allies that just get a little cantankerous sometimes.

One day later and I am back at it again - working on upgrading a multiple-website system from Drupal 8 to Drupal 9.

In this article I am listing out the Drupal migration tips and tricks that I wish I had known at the outset of this journey.

While this will not entail a complete rebuild along the lines of Drupal 7 to Drupal 9,, one challenge is that this is a Drupal multisite system where 20+ sites have to be upgraded.

Jargon

For those of you new to the jargon, Drupal is a content management system with endless possibilities but also endless headaches at times. Composer is a dependency manager that helps to keep Drupal's various dependencies all straightened out.

Symfony is a popular PHP framework that you're not supposed to have to adjust - it's like node_modules in that regard. It was throwing errors during the direct upgrade and the core reason I am changing my approach from a direct migration to a ground-up build.

Approach

My strategies:

Starting at Drupal 9.0.1 since it is closest to Drupal 8.9.17.
Using Lando for my local setup.
Starting with a Vanilla Site, then will make a backup.
settings.php file and directory structure is modeled after our current site, which resides on Acquia Cloud.
git repo comes from our current site; I swapped in new vendor, the web directory, and other key directories that are all 9.0.1.

Starting with a Drupal 9 instance

At first, I was trying a direct upgrade from Drupal 8 to Drupal 9. Because this introduced too many complications, I have switched to building a 9.0.1 site from the ground up.

Once I'm ready I plan to add the contrib modules and import my database.

My approach of building the D9 site from the ground up and then adding in assets is for several reasons:

We want to switch our local systems from Acquia Dev Desktop to Lando, and this is a good opportunity.
Upgrading a D8 install directly to D9 introduces issues with symfony dependencies that are hard to parse out.
lightning modules upgrades got especially tough, so starting with D9 allows me to reinstall the correct versions more easily.

Key Takeaways Thus Far

A few things I have learned:

If your webroot is not toplevel you have to update it in multiple places in composer.json.

You get into a chicken-and-egg situation with composer you can update all at once with composer require resource1:x.x.x resource:y.y.y --with-all-dependencies

Sometimes obliterating composer.lock and vendor directories are a great way to go.

I'll probably update this post as I find out more. Hope this helps other Drupallers out there.

General Updates

Below are some updates I posted throughout the day (8/3/21).

My local blank hub site is working. Yay!
I am now gradually adding modules with Composer and listing out the ones that do not install. For those, we will see if we can turn them off on our 20+ live sites before the code upgrade.
Overall my trust in Composer is returning after the debacle yesterday.
After installing the required modules, I then installed the theme. This requires changing some compatibility in their .yml files. Backing up the site while the base theme is installed has been critical. Replacing core:'8.x' with core_version_requirement: ^8 || ^9 in the theme.info.yml files seems necessary but not sufficient.
I just installed the Upgrade Status module, which tells me that none of my modules are ready for Drupal 10. Who cares about 10? I'm still trying to get to 9! It also may help me to figure out why my themes are incompatible. This way I can learn about why they don't work without enabling them.
Well, well, well. Even though the themes are in the green now, I am back to getting a symfony error related to a dependency injection. This is what drove me to switch strategies, but now I have a better idea of what triggers it. It seems to be a theme issue.

The error from admin/reports/dblog is below.


Symfony\Component\DependencyInjection\Exception\ServiceNotFoundException: You have requested a non-existent service "path.alias_manager". Did you mean this: "path_alias.manager"? in Drupal\Component\DependencyInjection\Container->get() (line 151 of /app/docroot/core/lib/Drupal/Component/DependencyInjection/Container.php).

After a bit of searching I ran across this resource, which was the key. I had to change path.alias_manager to path_alias.manager in three places.
It worked! The Porto theme now shows up.
Importing the database from our hub site still causes errors.
It is amazing what I am learning by re-adding all the site assets. I now see that I have needed some profiles in our profiles directory. On the update.php page Now I see a bunch more missing modules that I thought were optional.
All modules are added. The lightning media and entity_embed_link module had to be added manually to get to the update screen.
I am now going through 112 database updates.
Getting a white screen, but running lando logs indicated it was due to one line of deprecated code in the theme. I am changing entity_load_multiple_by_properties to loadByProperties in my porto.theme file.
The first site works!
Just tested on the remote site is still a work in progress. I will need make some changes to settings.php but we are moving along. That's all for now!

Elsewhere

Part 2 | Part 3

7 Tips on Upgrading from Drupal 8 to Drupal 9

An Example of a Closure in JavaScript

Nevin Katz — Mon, 02 Aug 2021 00:51:07 +0000

Hi everyone,

The concept of the closure is one of the tougher concepts for me when I first started learning JavaScript in depth. If you are new to the concept, a closure is essentially a function bundled together with its surrounding state, which typically includes variables that the closure needs. A closure is typically a function within a larger function, which serves as a "bubble." All the variables within this larger function bubble are only accessible by methods in the closure.

The JavaScript engine is smart enough to realize that the variables are needed, so the engine's garbage collector does not obliterate them.

Below is a quick example of an object with four functions that are actually closures.

get, set, increment, and reset. They all act on a variable called count, which sits within the immediately invoked function expression (IIFE) holding the closure.

Each function, which comes bundled with its surrounding environment, is a closure.

the get method will simply get the count value.
the set method sets the count value to any value we want.
the increment method will increment the existing value by the amount passed in as a parameter. If no value is passed in, it increments the value by 1.
the reset method resets the value to zero.

These methods are the only way the user can access the count value. In this way, the use of a closure causes the count value to act in a similar way to that of a private variable in a Java object; it cannot be accessed outside the object, so methods are required to retrieve its value or update it.

In the demo, you will see that an init method grabs some references to the HTML elements we print to and then calls all the methods. Take a look at how they are called and see if you can understand what causes these particular values to be printed out.

I hope this quick post gives you a solid idea of what closures are about. Thanks for reading!

Elsewhere

For a tutorial on closures with an easy on-ramp, check out JavaScript Closures and Their Scope Bubbles on Medium.

Create an Animated Banner with Vanilla JavaScript and the Canvas API

Nevin Katz — Thu, 24 Jun 2021 04:42:31 +0000

While the JavaScript Canvas API has tremendous potential for rich, performant animations, every step of the work has to be achieved manually. With the amount of effort it takes to make an animation, a ready-made library can make the work more efficient.

In this tutorial, we will build a micro-library in vanilla JavaScript intended for the creation of HTML5 canvas animations. We will then use this library to make an animated banner composed of text, images, and shapes.

Below is a quick CodePen of the final animation we will build.

Working with the Canvas API is different from working with the HTML DOM or SVG DOM APIs, in that you do not have an organized hierarchy of elements. Instead, you have a element, which contains a bitmap that you can render graphics on using the API’s methods.

While the element can be cleared and redrawn with each animation frame, it will not remember the state of its bitmap from one frame to the next — so you have to create your own methods for storing the state of each image, shape, or text box between frames. This is where JavaScript objects come in.

JavaScript Objects

For this library, we will create a JavaScript object for each graphic element. Each object will store the properties of its corresponding graphic, such as position, speed, and color. It will also be tethered to its own personal element, which can be used to render a visual representation of the object. By wiring an object to each piece of the animation, the object’s properties allow the program to remember the state of its corresponding shape, image, or text between frames. The canvas forgets, but our objects will not.

How we want this to work

The goal of the library is to create and animate graphic elements — shapes, text, and images.

Here is an example of how we would create an object. Notice how we assign it properties. Once we declare it as a new utils.graphic, it should call methods that add a newcanvas element — a layer, if you will — to a central staging element in the DOM.

Then we should be able to render and animate the object by calling an animate method:

logo_circle.animate();

And clicking a “restart” button — or the stage element itself —should call a reset method:

logo_circle.reset();

That is how it should work — you should create the object and call the methods, and the library should take care of the details.

Let’s get started.

Step 1: Write the Markup and CSS

For the HTML markup, we will create a button and a container for all our elements. The container will have an id of stage.

<div id="stage"></div>

<button id="restart">Restart</button>

Now let’s write CSS styles that achieve the following:

set the dimensions and border of the stage container
give the stage container position:relative so that our canvas layers will be stacked inside it
style the body to center our elements
allow canvas layers to stack on top of each other by giving them position:absolute

The main styles.

Now let’s create a nice-looking style for the button that restarts the animation. Below is a close-up of the button followed by its CSS.

The button.

Step 2: Make the JavaScript Wrapper

On to the JavaScript. Let’s create a wrapper that will hold our library’s contents. We will start with an empty object named utils.

let utils = {};

Let’s add an immediately-invoked function expression (IIFE), which serves as our wrapper.

let utils = {};

(function(){

})();

The empty utils object then gets passed into our wrapper. Once inside, it will be known as pen.

let utils = {};

(function(pen){

})(utils);

The wrapper allows us to define variables and methods within an enclosed namespace.

Step 3: Set the Stage

Our first task is to tell our module where to add the canvas layers, so let’s plan to write a method that does that based on an id that gets passed in. Since our target element has an id of stage, we should be able to call the method like this:

utils.setStage('stage');

We also want to be able to set the background-color of the stage as follows:

utils.setBackgroundColor('lightpink');

Let’s build up our code so it can handle this. Within our wrapper, let’s add a variable called stage.

(function(pen) {

  let stage = null;

})(utils);

Now, let’s write a quick method called setStage, which sets the stage variable when called.

(function(pen) {

   let stage = null;

    pen.setStage = (stageId) => {
        stage = document.getElementById(stageId);
      };
})(utils);

Because setStage can be called from outside the wrapper, it allows us to switch the DOM element we are drawing to, thus opening the possibility of handling multiple banners.

Finally, let’s write the method for setting the background color of the stage element.



(function(pen) {

    let stage = null;

     pen.setStage = (stageId) => {
        stage = document.getElementById(stageId);
      };

     pen.setBackgroundColor = function(color) {
         if (stage) {
             stage.style.backgroundColor = color;
         }
      }

    })(utils);

Step 4: Build the Graphic Constructor

Now let’s create a constructor function for the graphic elements we will add. The constructor will have several purposes:

creating an array for tracking animation frame requests
creating a new canvas element for each graphic, setting its properties, and appending it to the stage
obtaining our context — essentially a bundle of drawing methods for the new canvas
adding canvas and context as properties to our graphic object
adding all properties from the passed-in object
setting a new cur property for storing the state of the graphic

Starting the constructor

Let’s start by defining the constructor function for a graphic object. Notice how it is attached to our main pen object.

pen.graphic = function(o={}) {

};

Our constructor accepts one object as a parameter and sets it to an empty object if the parameter is absent.

Creating an array for tracking frame requests

Within the constructor, let’s create an array for tracking animation frame requests. This will become important if you press the “restart” button when an animation is in progress. We will use this later.

pen.graphic = function(o={}) {

       this.reqIds = [];
}

Create a canvas element

Now let’s create a new canvas layer for this object.

pen.graphic = function(o={}) {

       this.reqIds = [];

       this.canvas = document.createElement('canvas');
}

Set canvas properties

In the same constructor, let’s set the canvas width and height equal to the clientWidth and clientHeight of the current stage element, respectively. And because each canvas is intended as a visual, we will give it a role of img.

this.canvas.width = stage.clientWidth;

this.canvas.height = stage.clientHeight;

Because each canvas is intended as a visual element, we will give it a role of img.

this.canvas.setAttribute('role','img');

If the passed-in object has a label property, let’s use that to set the aria-label attribute of the canvas for accessibility.

if (o.label) {
  this.canvas.setAttribute('aria-label', o.label);
}

And if the object has a zIndex property, let’s add that to the style attribute of the canvas.

if (o.zIndex) {
    this.canvas.style.zIndex = o.zIndex;
 }

Now let’s append our canvas to the stage element.

   stage.appendChild(this.canvas);

Next, let’s grab the context reference for the canvas so we can access the drawing methods.

this.ctx = this.canvas.getContext('2d');

Now that we’ve established the graphic object’s canvas and context, let’s iterate through all the properties of the parameter object and add them to the graphic object.

for (key of Object.keys(o)) {
    his[key] = o[key];
}

Set the current property

Because the canvas does not intrinsically store its state, we will keep track of the properties that animate with a property called cur. It has three possible inner properties: x, y, and alpha. At the outset, we will make its properties equal to those of start.

this.cur = {...this.start};

To keep start from changing along with cur, we use spread ... syntax to break it into key-value pairs — and then use curly braces to rebuild these parts into a new object. This way, we avoid syncing the two properties.

The full constructor for the graphic object is below.

Building the graphic constructor.

Step 5: Plan the Methods

Now that we have built a constructor for our JavaScript objects, let’s start writing some methods:

four render methods that can draw out the shape, text, or image based on its object’s properties
updateProps, which updates the properties of the object before the next animation frame is drawn
checkCanvasAlpha, which updates the globalAlpha property of the object’s canvas rendering context if its alpha value is changing
animate, which changes how the object is represented on its canvas —and then calls itself if another frame is needed
cancelFrames, which cancels any remaining frame requests if our animation has been restarted
reset, which returns the object and its canvas to their original states

To give every object we create access to all these methods, we will attach each method to the prototype *of the graphic object — a template of sorts that the object inherits. We can attach a method to a prototype using this syntax:

 pen.graphic.prototype.methodname = function() {

};

Let’s apply this method in the next step.

Step 6: Write the Shape Rendering Methods

Let’s write rectRender and circleRender, which will render the two types of shapes we need for our banner.

Rectangle

The rectRender method involves setting the fillStyle and then calling fillRect.

The rectRender method.

Circle

The circleRender method is more complex— as it involves using the center coordinates, radius, fill, and stroke properties. Notice that it uses the arc method to draw an arc that is 2π radians, or 360 degrees.

The circleRender method.

Step 7: Write the Text and Image Methods

Text

The textRender method involves setting a couple new properties, such as font and textAlign.

The textRender method.

Image

The imageRender method will have an inner render() function that it calls either right away or after it loads the image.

This render function also checks for a scale property. If one exists, it will multiply the image width and height by the scale value. For instance, if a scale value of 0.75 is passed in, the image’s width and height will be resized to 75% of its natural dimensions

The imageRender method.

Because we cannot move forward until the image data first loads, we check to see if we have an Image object with a src. If not, we do the following:

create a new Image() object,
set its src attribute,
listen for an image onload event,
and call therender() function when the image loads.

If the image and its src are already defined, that means the image data has been loaded, so we render it immediately. Here is how it plays out in code:

Checking the image source.

And below is the complete imageRender method.

The imageRender method.

Step 7: Write the Update and Alpha Check Methods

Let’s now write a method for updating the properties of the object that should be changing. These properties may include x, y, oralpha.

So let’s now iterate through the properties in the object’s speed attribute using for...in syntax.

pen.graphic.prototype.updateProps = function() {

    for (prop in this.speed) {

    }
}

Compare current and ending values

Once we lock onto a property, we will compare its value in cur with its value in stop. If cur is not at the stop value yet, we capture how far away they are in diff.

If the diff is less than the absolute value of thespeed for this property, that’s close enough — so we set it to the stop value. If not, we increment the current property by the speed value.

let diff = Math.abs(this.cur[prop] - this.stop[prop]);

if (diff <= Math.abs(this.speed[prop])) {

      this.cur[prop] = this.stop[prop];
    } 
    else {

     this.cur[prop] += this.speed[prop]
}

This way, the difference between start and stop does not have to be divisible by speed for the stop value to be reached. Full method below.

The updateProps method.

The alpha check

Let’s write a quick method for transferring an object’s current alpha value to the globalAlpha property of its canvas rendering context.

The checkCanvasAlpha method.

Step 8: Write the Animate Method

Now let’s write the animate method, which will clear the canvas, update the object, render one frame, delay if necessary, and request that it be called again if needed.

Adding delay values for some objects help to choreograph their movements so they don’t all rush in at once .Let’s start by writing a promise-based helper function for the delay called sleep.

const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

We will enclose this helper in a newanimate method, which isasync so we can use await sleep later.

A start to the animate method with the sleep helper function.

Before moving ahead, let’s equip ourselves with one other helper function that checks on properties that are changing to see if another animation frame is needed. This will return a boolean value.

The frameNeeded function.

Now that we have created our helpers, let’s go ahead and clear our canvas element.

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

So the first frame of this animation always reflects the initial properties, let’s update our properties only if the first frame has passed. We use this.started to check on this.

if (this.started) {
         this.updateProps();
         this.checkCanvasAlpha();
}

Next, let’s assemble the name of the render function by concatenating type with the string "Render". After that, we’ll call the function.

let func = this.type + 'Render';

this[func]();

If this animation has not been flagged as started and a delay value exists, we delay. The await blocks further progress on this method until the delay ends. Once it ends, we flag the animation as having started.

if (!this.started && this.delay) {
   await sleep(this.delay);
}

this.started = true;

At this point, we can now check if another animation frame is needed. If it is, we request another animation frame. Below is how this part of the method looks.

If another frame is needed, let’s request one.

Notice that we call obj.animate() within the anim function, which then gets passed into window.requestAnimationFrame. When it comes time for the next frame, the anim function will kick off as a callback.

As a result, this animation method will pass a call to itself into window.getAnimationFrame. These frame requests continue until the properties that are changing reach their stopping point, or until the animation restarts. We also collect request ID’s so we can cancel our frame requests if the animation is restarted.

Here is the whole method.

The entire animate method.

Step 9: Write the Frame Cancel and Reset Methods

If the user resets the animation, we want to cancel all frame requests. So let’s write a cancelFrames method that will be called when we trigger a reset.

Here we have a while loop that runs as long as we have request ID’s in our reqIds array. We pop each reqID off the array and then use it to cancel the animation frame.

The cancelFrames method.

Reset

Below is the reset method, which will do the following:

reset the started flag to false.
return all cur attributes to their starting values
sync the globalAlpha of the rendering context with the cur.alpha value, if it exists
call the cancelFrames method we just wrote.

The reset method.

Now let’s go back and replacethis.cur = {...this.start} within our original graphic constructor. In addition to resetting the cur properties, this will also initialize the canvas rendering context and the started flag. We can add it right at the end of the constructor, as shown below.

pen.graphic = function(o = {}) {

   // hidden code

   for (key of Object.keys(o)) {
       this[key] = o[key];
   }

   this.reset();
};

Congratulations!

You have finished the micro-library. Now let’s put it to work by creating the banner.

Step 10: Lay the groundwork for the banner

Our banner will have a logo made of several parts:

a circle that descends from above
a rectangle that rises from below
text saying “Nev’s” that slides in diagonally
text saying “Ice Cream” that fades in
a small ice cream cone image that fades in

In addition, there will be two elements outside the logo:

a large three-scope cone that slides in from the right
text saying “42 Flavors!” that slides in from the left

We are now outside of the library, so if you are working with files rather than a code sandbox, I recommend writing this banner-specific logic in a new JavaScript file.

Set the stage, colors, and constants

Let’s start by creating a new wrapper for our banner logic.

let demo = {};

(function(pen) {

})(demo);

Now let’s set the stage and background color.

let demo = {};

(function(pen) {

  utils.setStage('stage');

  utils.setBackgroundColor('lightpink');

})(demo);

Next, let’s initialize a colors constant to store hex codes.

let demo = {};

(function(pen) {

      utils.setStage('stage');

      utils.setBackgroundColor('lightpink');

      const colors = {
          orange: '#ffc44e',
          green: '#4795a7',
          darkgreen: '#356f7d',
      };

})(demo);

And while staying in the wrapper, let’s create aliases for the image URLs, which point to the image files in the public GitHub repository for this demo.

const small_cone_src = 'https://raw.githubusercontent.com/nevkatz/canvas-demos/main/demo1/images/cone-small-vert.png';

const large_cone_src = 'https://raw.githubusercontent.com/nevkatz/canvas-demos/main/demo1/images/ice-cream.png';

With our foundational code in place, let’s create our seven JavaScript objects.

Step 11: The Three-Scoop Cone

Below is the code for our large ice cream cone with a few notable properties:

a descriptive label so screen readers pick it up.
aspeed property with x since it slides in horizontally from the right.
a scale property of 0.75 to make the image width and height 75% of the image’s natural dimensions.

The object for the large ice cream cone.

Notice in particular two other properties:

a type property that determines the rendering method
a label property that sets the aria-label attribute of its element.

Step 12: The Logo Circle

For our circle, the speed property only contains y since it drops from above while keeping its horizontal position.

The logo circle object.

Step 13: The Logo’s Rectangle

The rectangle's y value of its speed is negative since it is moving up.

The object for the rectangle in the logo.

Step 14: The Ice Cream Text

Notice that the “Ice Cream” text stays in the same spot the whole time. The only property changing is its alpha.

The ice cream text object.

Step 15: The Nev’s Text

Below is the code for the “Nev’s” text in the logo. The negative coordinates within the start property will make the text start out off-stage. After a half-second delay, it will slide diagonally into place.

The “Nev’s” text object.

Step 16: The Logo’s Small Ice Cream Cone

Below is the code for the small ice cream cone. We will use the threealpha values here to modify the globalAlpha property of the <canvas> element.

The object for the small ice cream cone in the logo.

Step 17: The “42 Flavors!” Text

Below is the code for the “42 Flavors!” text. Notice the long delay value because it has to slide in.

The “42 Flavors!” text object.

Step 18: The Kickoff Method

Having initialized all seven objects, let’s now write a kickoff method called init. This will be the one method we attach to our inner pen object so we can call it from the outside. Here is the method shell with an array containing the objects we just created.

pen.init = function() {

    let arr = [logo_rect, 
               logo_circle,
               flavors, 
               large_cone,
               nevs, 
               ic_text,
               small_cone];

};

While staying within this method, we will iterate through the array using for...of and call the animate method on each object. This is what starts the animation when a user first lands on the page.

for (o of arr) {
    o.animate();
}

The click listener

Because the animation can happen fast, it helps if the user can restart it — either by clicking the restart button or the image itself. Here is the plan.

Grab references to the restart button and stage with querySelectorAll
Loop through both elements with for...of
For each element, listen for a click event.
Handle a click by calling animate and then reset on each JavaScript object.

let els = document.querySelectorAll('#restart,#stage');

for (el of els) {
    el.addEventListener('click', function() {
        for (o of arr) {
          o.reset();
          o.animate();
        }
    });
}

Below is the entire init method.

The init method.

After writing the init method, you can now call demo.init() outside your wrapper to make your animated banner come to life.

The Finished Banner

Below is the completed Pen once again so you can compare it with your work. The code for this tutorial is also available for download on GitHub.

The Takeaway

If you want to design HTML5 animations at a reasonable pace, you can benefit from having a library to reach for. While third party libraries abound, you can also build a lightweight, custom-made library like this one that is tailored to your project’s needs.

Thanks for reading, and I hope you found this helpful.

Elsewhere

Below are two other JavaScript articles that you may enjoy reading.

Create Your Own HTML5 Canvas Toolkit With Vanilla JavaScript

7 Tricks I Use To Rewrite JavaScript Code From My Early Days

9 Tips for Tech Demo Teams

Nevin Katz — Thu, 03 Jun 2021 23:45:48 +0000

Hi all,

After holding a demo of a new entrepreneurship app with our team, I was inspired to write an article for teams who are planning to give a tech demo. The tips that I discuss in detail are the following:

Identify the audience.
Discuss the features you will focus on.
Plan out how to handle critical questions.
Test the features you plan to demo relentlessly.
Establish roles.
Work out the logistics.
Set limits on preparation.
Stay flexible under adversity.

Let me know what you think of it and I hope it helps with your demo planning.

9 Tips for Tech Demo Teams, Geek Culture

Create Your Own HTML5 Canvas Toolkit With Vanilla JavaScript

Nevin Katz — Thu, 27 May 2021 17:27:50 +0000

Happy Thursday, everyone - wanted to reach out with a quick tutorial on how to build a flexible and easily readable HTML5 Canvas toolkit using Vanilla JavaScript.

A little background: when I started at EDC over 12 years ago, I came in as a Flash developer. Once Flash lost prominence, I learned more programming, dove headfirst into the web and app development space, and moved to developing interactives with JavaScript. Given the untimely demise of Flash, it was a good move.

The advent of HTML5 brought with it the canvas element, which could be controlled with JS. One of the challenges I found fairly early with the canvas API was that it was very low level - so I started trying HTML5 canvas frameworks like EaselJS and KineticJS. The former was awesome but felt overly complex for what I needed. And the latter lost support shortly after I tried using it. Because the framework landscape is ever-changing and does not always have the options I have in mind, I have found it empowering to create canvas utility methods that do exactly what I want and can be called easily.

In this article, I go over how to add methods for creating a circle and a polygon. That said, I'd be happy to write tutorials on other methods - such as text, animations, and images - if people are interested. Thanks, and have a great day.

7 Tricks I Use To Rewrite JavaScript Code From My Early Days

Nevin Katz — Wed, 26 May 2021 12:19:54 +0000

For the past four years, I have been working on a Cordova app that runs on JavaScript. The codebase has grown to the point where working on it often feels like wandering through streets and alleys of a large city. And looking at some of the earlier modules feels like sauntering into old buildings I originally constructed years ago.

While my JS coding has evolved over this time, I often run into code in the app that feels inefficient and outdated - and it bothers me to the point where I usually feel compelled to eventually refactor it so that it is more compact, readable, and understandable.

Here are 7 time-tested tricks I use to rewrite my JavaScript code from those early days, published this month in Better Programming. I hope you find them useful. Enjoy!

Debugging Tactics

Nevin Katz — Mon, 03 May 2021 21:07:58 +0000

“At some point, everything's gonna go south on you and you're going to say, this is it. This is how I end. Now you can either accept that, or you can get to work.”

—Mark Watney, The Martian

This quote inspired me to write an article on how to survive when faced with a seemingly insurmountable bug in your project. Before you scream into the void about your ever-elusive bug, check out Seven Strategies for Finding the Toughest Bugs in Your Code. Who knows - it may be hiding in plain sight.

Encounters with tough-to-solve bugs can make coding feel like a rollercoaster of hopelessness and euphoria. And sometimes you are the only one who will have the background knowledge needed to solve them efficiently.

If you've already been at it for hours, you're not alone.

And if it has been a bug-free week so far, there's still time - so keep some of these tips in your back pocket next time you find yourself down the rabbit hole.

You can do it.