Alicia Ramirez Logo

Cryptograma – Redo

Posted by & filed under Code, JavaScript.

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.

Play Cryptograma

View on Github

Cryptograma screenshot showing a puzzle with a letter already substituted.
Play Cryptograma

Iconcentration – A Memory Game

Posted by & filed under JavaScript.

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 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.

The icons used came from React Icons.

iconcentration screenshot
Play Iconcentration

Mayan Math Redo

Posted by & filed under JavaScript.

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 represented numbers. It allows you to create a number or convert a number.

For this project, I used Cloudinary to host the images, Framer for animations, and React Tabs.  I exported the project so it could be hosted on a static site.

Visit Mayan Math

Custom Navigation Bar Animations with AOS

Posted by & filed under CSS, JavaScript, Tutorial.

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 your own CSS animations as well.

Continue Reading…

Centering in CSS for Beginners

Posted by & filed under CSS, Tutorial.

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.

Continue Reading…

Dynamic SVGs with Custom Fields, and JavaScript

Posted by & filed under Code, JavaScript, jQuery, WordPress.

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 to be updated every time a booth got sold. Being lazy, I didn’t want to have to do that. I decided to make an SVG that would change a booth’s color with JavaScript based on posts being created.Continue Reading…

ScrollMagic for Beginners Tutorial

Posted by & filed under Code, JavaScript, jQuery, 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 page and creating basic animations. I will also introduce more advanced animations with the help of GSAP.

Continue Reading…

My Adventures in SVG Optimization

Posted by & filed under 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, with mixed results. Below is what I encountered.

Caveats:

  • 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.

Original PNG Logo

Original PNG: 65KB

Continue Reading…