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 corresponds to a letter (simple substitution cypher).
I also tried to make it as accessible as possible, but by the nature of the puzzle, it would probably not be very playable with a screen reader. The symbols are buttons, so they are accessible by tabbing.
It’s playable on mobile, but it needs more work to improve the experience.
This project was done with Next.js. It was a good practice of useEffect. Once a card was flipped, useEffect was used to update different state variables, and once those variables were updated, useEffect was used again to calculate whether there was a match and if the game was completed.
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 a project that when run will let you sample each sound. You can download it from GitHub, or see the code below.
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 to find the right approach to centering things. It’s not a comprehensive list of techniques, but a short list meant to help the confused.
In this tutorial, I’ll cover the basics of adding ScrollMagic to a page and creating basic animations. I will also introduce more advanced animations with the help of GSAP.
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, with mixed results. Below is what I encountered.
My logo has many more shapes and gradients than most logos. My feeling is that some of the optimizers work better with simpler images
The logo was made in Sketch, and with multiple shapes that are copy/paste from other shapes, then flipped and rotated (this seems to affect some of the optimizers)
What I’m posting here is the default settings for all apps, unless otherwise specified
This is a very simple, image specific test, but I thought some may find it useful
In some optimizers, it was easy to tell how the optimization took place, while in others it was a mystery
The Original (PNG)
The original logo was made in Photoshop/Illustrator and had more textures, and strokes. As part of my redesign, I simplified it.