My Adventures in SVG Optimization
I recently created an SVG version of my logo using Sketch and while you should always optimize your images, the resulting file really needed it. It was quite large (as far as SVGs go): 89KB. It really...
View ArticleScrollMagic for Beginners Tutorial
ScrollMagic is a JavaScript library for creating scroll interactions. It lets you create animations that start and stop at specific points during the scrolling of a page. It’s quite powerful, but can...
View ArticleDynamic SVGs with Custom Fields, and JavaScript
I recently worked on a WordPress project to make a site for an exhibition event (vendors in booths gathered in one place). The client wanted to have floor map that would show which booths were taken,...
View ArticleMy Favorite Responsive CSS Grid Techniques
In this article, I want to share two responsive techniques that I learned from Wes Bos’ CSS Grid Tutorial. Thanks, Wes! Template Areas You can make a site responsive simply by changing the template...
View ArticleCentering in CSS for Beginners
One of the things that frustrate my students when they first start learning CSS is how to center elements. There are many techniques, many of them not very intuitive. Some require that you apply CSS to...
View ArticleCustom Navigation Bar Animations with AOS
I’m always on the lookout for easy-to-use JavaScript libraries for my students. Recently I discovered AOS (Animate on Scroll), which makes animating elements on the page as you scroll super easy. The...
View ArticleSample iOS’ systems sounds
I’m working on an iPhone app and was looking for a sound to make an alert. I didn’t want to have to include a custom sound, so I set out to find what are the system sounds available in iOS. Turns all...
View ArticleMayan Math Redo
For the past year or so I have been learning React and more recently, Next.js. In order to practice, I decided to convert my old flash applications (I know, about 10 years too late) to JavaScript. The...
View ArticleIconcentration – A Memory Game
I’m still converting some of my old flash games and experiments into JavaScript. This time I redid an old memory game (concentration) I had called “Remember Me”, but decided to use icons and renamed it...
View ArticleCryptograma – Redo
I finally converted the last of my old Flash games into React, using Next JS. For simplicity, instead of symbols, I used emojis to hide the message. It’s not perfect, but the basic functionality is...
View Article