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.

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 stop 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 at 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. Needless 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 is a lot of podcast from iOS professionals that will help you stay current, and get a better understanding of 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…