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

No optimization

Exporting directly from Sketch gave me an 89KB SVG file.

SVG export from Sketch screenshot

SVG export from Sketch: 89KB

SVG optimiser by Peter Collingridge

Some of the articles I read recommended this site, but it did not work for me at all. It gave me some errors:

Error message screen caption

I tried troubleshooting the code, but life is too short, so I didn’t try very hard and kept going.

SVG editor by Peter Collingridge

By the same author, but here you can play with the settings. For my test, I chose the default “Conservative”. The result was a 61KB, but the image was also changed.

Conservative settings result screen shot

Conservative Default Settings: 61KB

To be fair, after playing with the settings (leaving the decimal points unchanged, but removing whitespace, empty elements, and unnecessary groups), I got the file to 65KB, without any loss of quality.

SVGOMG! (SVGO’s Missing GUI)

SVGO is an optimizer for Node-js (i.e. it can be used with task runners like Gulp or Grunt), and SVGOMG! offers a GUI for it.

I suspect that if I had used SVGO directly, I could have fined tuned my setting to obtain a good result, but right out of the box it gave me a good, not great, compression of 66KB, but as you can see, the shapes that I had flipped and rotated are pointing the wrong way.

Screenshot from SVGOMG

SVGOMG!: 66KB

Compressor

This online tool not only optimizes SVGs, but also PNGs, JPGs, and GIFs. This tool has no settings and offers no clues as to how the compression is achieved. I opened both files and compared them, and as far as I can tell, the only difference is that my decimal points got rounded up to 3 decimal points, but there must be something else I’m missing, since the SVG Editor rounded even further to 2 decimal points, yet it’s still bigger.

For me, this was the winner. It didn’t change the image quality, and the resulting size was 53KB. I could compress is even more, to 52KB, if I uglify it and remove all line breaks and extra white spaces.

Compressor result screenshot

Compressor: 53KB

Conclusion

I can only speculate as to why some tools work well for some, but not in this case. I’m not sure if they are too aggressive for my lazily created SVG, whether it’s the code generated by Sketch or some other reason.

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!

 

Integrate Isotope with WordPress, Part 2 (Categories)

A few months ago I wrote a post on how to integrate Isotope with WordPress. Since then, I’ve received some requests on showing how to limit it to one category. In this tutorial I will show how to add the Isotope code and scripts to a  template, filtering the posts that belong to one category by it’s sub-categories.

You will notice that most steps are the same as with the original tutorial, but I have left them here, so people won’t have to go back and forth between articles. I’ll highlight the lines of code that differ from the first article.

Continue Reading…

How to Make a Kindle eBook from Scratch

Update (Sept. 11, 2015): The character set for Kindle eBooks is now UTF-8. And recommends using the UTF-8 character over entities (© over &copy;).

There are many ways to create a Kindle eBook, but creating your own source files, and then using KindleGen to convert it into Kindle Format 8 will give you more control over the end result, than relying on a plugin.

If you are a web designer, like me, you already know the technologies you need to make Kindle eBooks from scratch: HTML, XML and CSS. All you need to know is how to put those technologies together, and you’ll be in business. Continue Reading…