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.


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

5 Tips for Learning App Development

For the past few years, I’ve been teaching myself how to make native iOS apps. I’m still not super strong, but I hope to release my first app in the fall (I’ll keep you posted). I hope the following tips will help you do the same.

5 – Do it as fast as you can

The reason it’s taken me so long to learn to make apps, is in part because I would often stopped for months at a time, and then I would have to start from scratch given how fast things change in the iOS world.

As a web developer, I’m used to fast changing environments, but I was surprised how drastic changes are in iOS. A new version of the OS is released once a year, and you can expect significant changes every time.

The biggest change I saw was the adoption of Swift as the new language for iOS development. Swift has had 3 upgrades (at the time of writing this article), each one with syntax changes in less than a year.

4 – Avoid printed books

I once had to buy a newer version of a book before I finished reading it. This is because of what I mentioned above.

When Swift came out, authors rushed to put out books. Most of the books out there are written for Swift 1.x, but Apple announced Swift 2.0 at the last WWDC. All those books are obsolete.

As much as I love physical coding books, opt for the eBook, and especially if the book offers free updates. I’d recommend Ray Wenderlich‘s books, and tutorials. Apple offers free Swift books and resources, as well.

3 – Be wary

Do your research before signing up, or buying anything. You’ll find a lot of online programs, and courses that promise to teach you to make apps, no programming knowledge required.

I once wasted $10 (originally $199) online course that I assumed was for programmers to learn how to make apps. I never went past the first lesson, which included an explanation of how to copy-paste.

Go for reputable sources. For example, Stanford University offers a free iOS app development course. Needles to say, it’s excellent. They update the course every year, so make sure you are taking the latest one.

2 – Listen to industry Podcasts

There are a lot of podcast from iOS professionals that will help you stay current, and get a better understanding on the industry. Personally, I’ve been listening to:

Like a lot of people getting started, I had a lot of illusions about making apps, and these podcasts talk in realistic terms of what the industry is really like.

1 – Learn to Code

No way around this one. If you want to make apps you need to learn how to code. If you don’t know how to program at all, Stanford University offers a variety of Computer Science courses online, including CS101.

To be able to make apps, you need to be at a level where Object Oriented programming is not new to you. That alone can take quite a while. Just keep at it.

Good luck!



Skrollr for Beginners Tutorial

Skrollr is a scroller library that allows you to perform animations or changes to your web page’s content based on screen position. For example, you can make a div slowly appear, or slide in, as you scroll down the page. You can see it in action here.

This tutorial will cover the bare minimum you need to get Skrollr working. There are plenty of tutorials out there that show you how to do more advanced things, but this one will help you get your first Skrollr powered page. Continue Reading…

Advanced Custom Fields Google Maps Tutorial

Update (Oct. 31, 2016): Google Maps now requires that you have an API Key in order to add maps via ACF. The tutorial reflects this new requirement.

One of my go-to plugins is Advanced Custom Fields. It is versatile, and makes adding custom fields to posts, pages, custom post types, and even user profiles a breeze. Unfortunately, their documentation is sometimes not very beginner friendly (I’ve written about this in the past), so today I’ll try to help out those trying to use the Google Map custom field.

Unlike some of their other custom fields, which allow you to simply use <?php the_field('field_name'); ?> to output the content of the field for that particular post or page, this particular field, requires quite a bit of extra code. It’s all listed in their code example; I will simply explain step by step where to put in that code. Continue Reading…

Move WordPress from MAMP to a Server

There are many ways in which you can migrate your WordPress site from MAMP into its final home, to make it “live”. The way I’m going to show, has worked well for beginners.

What you will need:

  • Access to the cPanel (or similar) on your server
  • Migrate DB plugin (or similar) in your local installation
  • FTP access to the server, or a way to upload files to your server (in cPanel>Files>File Manager)

Continue Reading…

HTML5 is for Slackers

I can’t deny it, I’m an old curmudgeon when it comes to HTML validation. I remember with fondness the good old days of XHML and a draconian W3C validator that wouldn’t let you get away with anything. I miss the unquestioned pride of a green “This Page is Valid HTML 1.0 Strict”.

Why this old lady rant? Last week, while doing some validation tests, I noticed that the validator no longer gives you an error if you don’t encode HTML entities, such as ®, ©, ™, or even & (when followed by a space), and >.  Every year I notice something else. Last year, I noticed that the validator no longer complains of unclosed tags (under certain circumstances). I know that is part of the spec, but I still don’t like it. It rubbed the wrong way so much, I made my own Closing Tag Checker.

I know these changes are meant to make things easier, more efficient, and all around better for everyone, but they make me uncomfortable. I’m a pretty uptight person who finds it hard to relax, and go with the flow. God knows it took me years not to cringe at the sight of a <br>  (notice the missing / at the end? Just madness!)

Eventually I’ll overcome this fastidiousness, but today I feel like kvetching! It’s Monday, and I don’t like that either!