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 there. Maybe in the future I’ll improve it. The objective of the game is to reveal the quote. Each symbol… Read more »
Posts By: Alicia Ramirez
Iconcentration – 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 “Iconcentration”. This project was done with Next.js. It was a good practice of useEffect. Once a card was flipped, useEffect… Read more »
Mayan 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 first of these old examples I have done is Mayan Math. Which teaches you about how the Maya… Read more »
Sample 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 you can find are codes and names for each sound. So I made… Read more »
Custom 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 library comes with many ready-to-go animations, but one of the things I really like about this small library is that you can create… Read more »
Centering 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 the element itself, while others to the parent. It’s very frustrating. This tutorial is meant for beginners who struggle… Read more »
My 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!
Dynamic 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, and which were still available (there were over 130 booths). Normally, this would require a graphic that would have… Read more »
ScrollMagic 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 be intimidating for beginners, since unlike Skrollr, it’s all done in JavaScript. In this tutorial, I’ll cover the basics of adding ScrollMagic to a… Read more »
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 needed to be optimized. Trying to optimize it wasn’t as straight-forward as I thought. I tried different online apps,… Read more »