Alicia Ramirez Logo

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

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.

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

Continue Reading…

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

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!

Template Areas

You can make a site responsive simply by changing the template areas with a media query.

In this example, let’s imagine a regular page where on desktop the main and aside are side by side, and on mobile, they stack on top of each other. The header, nav and footer always span across the entire page.

Here’s the mobile first CSS that would accomplish that just by reconfiguring the template areas. No need to modify the main or aside themselves:

Responsive Equal Width Elements

It’s common to have a series of elements (pictures, products, cards, rectangles of some sort) in a grid. You may want to show 4 or 5 per row, but as the screen gets smaller, show fewer, until you only see one per row.

You don’t even need a media query for this one:

Rachel Andrew wrote an article more in-depth about using minmax and autofill.

Further Reading

Check out Wes Bos’ tutorial, anything by Rachel Andrew, or Mozilla’s web docs.

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

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

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…

Redirect to Dashboard after login with WooCommerce enabled

Recently, I had to work on a site that had a few things going on:

  1. It had some users with custom roles, and capabilities
  2. Those users had a simplified dashboard
  3. WooCommerce was enabled.

The problem was that when those users logged in, WooCommerce would redirect them to the “My Account” page, instead of their simplified dashboard.

I found a lot of places where they showed how to redirect users after login to “any” page, but it didn’t seem to work when the dashboard was that page.

After some digging around, I discovered that WooCommerce also redirects users that try to access the Dashboard directly to “My Account”.

So, if you are ever in this situation you need to do two things:

  1. Redirect the login (and registration) to the Dashboard
  2. Allow them to access the Dashboard

Here’s the code (change “custom_role” to your users’ role):

Hope this helps someone.