Alicia Ramirez - Web Design Blogger in Winnipeg, Manitoba

Iconcentration – A Memory Game

Posted January 24, 2022 by Alicia Ramirez & 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 August 2, 2021 by Alicia Ramirez & 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.

Sample iOS’ systems sounds

Posted February 27, 2021 by Alicia Ramirez & filed under iOS.

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.

Custom Navigation Bar Animations with AOS

Posted May 13, 2019 by Alicia Ramirez & 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.

Centering in CSS for Beginners

Posted March 21, 2019 by Alicia Ramirez & 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.

My Favorite Responsive CSS Grid Techniques

Posted March 20, 2018 by Alicia Ramirez & filed under CSS, Tutorial.

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.

<div class="grid">
    <header>Header</header>
    <nav>Nav</nav>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
</div>

```
<div class="grid">
```
```
    <header>Header</header>
```
```
    <nav>Nav</nav>
```
```
    <main>Main Content</main>
```
```
    <aside>Sidebar</aside>
```
```
    <footer>Footer</footer>
```
```
</div>
```

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:

.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "hr" 
                         "nv" 
                         "mn" 
                         "sb" 
                         "ft";
}

header { grid-area: hr; }
nav { grid-area: nv; }
main { grid-area: mn; }
aside { grid-area: sb; }
footer { grid-area: ft; }

@media (min-width: 767px) {
    .grid {
        grid-template-columns: 2fr 1fr;
        grid-template-areas: "hr hr" 
                             "nv nv" 
                             "mn sb" 
                             "ft ft";
    }
}

```
.grid {
```
```
    display: grid;
```
```
    grid-template-columns: 1fr;
```
```
    grid-template-areas: "hr" 
```

                         "nv"

                         "mn"

                         "sb"

                         "ft";

```
}
```
```
 
```
```
header { grid-area: hr; }
```
```
nav { grid-area: nv; }
```
```
main { grid-area: mn; }
```
```
aside { grid-area: sb; }
```
```
footer { grid-area: ft; }
```
```
 
```
```
@media (min-width: 767px) {
```
```
    .grid {
```

        grid-template-columns: 2fr 1fr;

        grid-template-areas: "hr hr"

                             "nv nv"

                             "mn sb"

                             "ft ft";

```
    }
```
```
}
```

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.

<div class="grid">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
</div>

```
<div class="grid">
```
```
    <div class="item">Item 1</div>
```
```
    <div class="item">Item 2</div>
```
```
    <div class="item">Item 3</div>
```
```
    <div class="item">Item 4</div>
```
```
    <div class="item">Item 5</div>
```
```
    <div class="item">Item 6</div>
```
```
    <div class="item">Item 7</div>
```
```
    <div class="item">Item 8</div>
```
```
    <div class="item">Item 9</div>
```
```
    <div class="item">Item 10</div>
```
```
</div>
```

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

.grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

```
.grid {
```
```
    display: grid;
```
```
    grid-gap: 20px;
```

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

```
}
```

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

Dynamic SVGs with Custom Fields, and JavaScript

Posted September 6, 2017 by Alicia Ramirez & 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 January 16, 2017 by Alicia Ramirez & 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.

My Adventures in SVG Optimization

Posted January 10, 2017 by Alicia Ramirez & filed under Uncategorized.

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: 65KB

Redirect to Dashboard after login with WooCommerce enabled

Posted March 11, 2016 by Alicia Ramirez & filed under Code, PHP, WordPress.

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

It had some users with custom roles, and capabilities
Those users had a simplified dashboard
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:

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

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

// After login or registration, redirect users with "Custom Role" to the Dashboard instead of WooCommerce's My Account
function mytheme_login_redirect($redirect) {
	if (current_user_can('custom_role') || current_user_can('administrator')) {
		$user = get_current_user_id();
		$redirect = get_dashboard_url($user);
 	}

	return $redirect;
}

	add_filter('woocommerce_login_redirect', 'mytheme_login_redirect');
	add_filter('woocommerce_registration_redirect', 'mytheme_login_redirect');


// Allow users that have "Custom Role" to  view the Dashboard
function mytheme_woocommerce_admin($access) {
	if ( current_user_can('custom_role') || current_user_can('administrator')) {
		$access = false;
	}

	return $access;
}
	add_filter( 'woocommerce_prevent_admin_access', 'mytheme_woocommerce_admin' );

// After login or registration, redirect users with "Custom Role" to the Dashboard instead of WooCommerce's My Account

function mytheme_login_redirect($redirect) {

	if (current_user_can('custom_role') || current_user_can('administrator')) {

```
		$user = get_current_user_id();
```
```
		$redirect = get_dashboard_url($user);
```
```
 	}
```
```
 
```
```
	return $redirect;
```
```
}
```
```
 
```

	add_filter('woocommerce_login_redirect', 'mytheme_login_redirect');

	add_filter('woocommerce_registration_redirect', 'mytheme_login_redirect');

```
 
```
```
 
```

// Allow users that have "Custom Role" to  view the Dashboard

function mytheme_woocommerce_admin($access) {

	if ( current_user_can('custom_role') || current_user_can('administrator')) {

```
		$access = false;
```
```
	}
```
```
 
```
```
	return $access;
```
```
}
```

	add_filter( 'woocommerce_prevent_admin_access', 'mytheme_woocommerce_admin' );

Hope this helps someone.

Template Areas

Sample HTML

CSS Using Template Areas

Responsive Equal Width Elements

Sample HTML

CSS Grid Responsive Repeat

Further Reading

The Original (PNG)