We should all be automating our image optimization

The problem statement: 
When building an image heavy site — like a social network for photography enthusiasts — you’ll need to handle images well. To automate image resizing we started using Google Cloud functions and the trusty Imagemagick.

Image resizing should be easy to do if you’re just serving dynamic transformed images. But again — this is something you have to build and maintain forever. And fix vulnerabilities for. If you think about optimizing the image for even a little while, there are more challenges.

• How do you find the optimal encoding format? (jpeg, png, webp, etc.)
• How do you find the right compression settings? (lossy vs. lossless)
• Determine which metadata should be kept or stripped
• You’ll need to handle building multiple variants of each for each display + DPR resolution (for @2x and @3x)
• Do you account want to handle a user’s network type, speed, and preferences?

The best way to learn is from the experience of others.

While looking for resources on how to do this better ourselves. I found images.guide by Addy Osmani. A phenomenal book for any web developer who works with images. Go save it for reading later right now, please.

This book has learnings from Google, Facebook and 500px — amongst others.

It’s always surprising to me that any little facet of today’s world has someone’s lifetime spent. The Butteraugli score, for example, could be someone’s life work.

The Solution: 
That’s when we decided to use Cloudinary. A media management solution which solves the optimisation challenges that we talked about earlier, along with ones that we didn’t know existed, and delivers the optimised media from a CDN.

The demo on their homepage is mental. The way you can manipulate images with just the URLs. That’s something we wanted right away.

The generous free plan is great to get started.

Where we use Cloudinary.

• Responsive images — Show smaller images to smaller devices. The picture element has made that job much easier. Now Cloudinary made it easier. We define the image URL with the size and quality needed.
• Client hints — Chrome and some mobile browsers support WebP — an image format by Google that gives smaller files. Cloudinary will convert our images to WebP — if they’re smaller then will send them over to browsers that support them based on cloud hints. More on client-hints here
• Placeholder images — For a better user experience, it’s a great idea to give users an idea that we are trying to load an image. We saw this feature on Medium where they show blurred image placeholders. It’s easy to implement — now we have a 10x10px transformed image as the placeholder before we show images. Check it out on a client’s site. https://getpepped.com/app/inspiration/wedding/2w5g7kxe1

Closing comment. 
Instead of trying to solve image optimization yourself, try integrating a solution that works for you. We should all be automating our image optimization. #perfmatters

How we got our webapp hosted on a separate server to show up as a subdirectory

We get it, marketing wants easy control of the website on the root domain. And because it’s so easy to setup a CMS there to publish marketing content, that is why most web apps are setup on subdomains instead of the root domain. This is alright if all of the app content is under a login. If that’s not the case — it’s so much better to get users to share the domain.com/xxxx url instead of the app.domain.com/xxx domain. Easy to remember and share.

Most SEO professionals agree that subdirectories are better than subdomains for ranking on search engines.

Search engines keep different metrics for domains than they do for subdomains, so even though Google itself has stated that — from a ranking perspective — content in subdomains and subdirectories is treated roughly equally, it’s still recommended that webmasters place link-worthy content like blogs in subfolders rather than subdomains (i.e. www.example.com/blog/ rather than blog.example.com).

— Moz SEO Experts, Domain Setup Guide

Sadly, it’s not easy to setup a redirect from a subdomain to a subfolder. While this is possible to do by setting up a reverse proxy. The maintenance of this complex engineering would have been a nightmare — attached to a client’s frontend. Something that should never go down.

We’ve been telling our clients that this cannot be done, until I found this very pretty article by fly.io http://onehostname.com/

Fly describes itself as a global JavaScript platform that gives you the power to build your own CDN.

We started by using fly sites. The fly site did not play well with the hosting that we were using — to server side render our angular app. Had a major issue with fly sites that we were not able to decode. While fly “sites” has a great UI to setup redirects, we found through support that they’re not actively supporting this functionality.

We then decided to build a Fly Edge Application using the github repo https://github.com/superfly/onehostname which was easy enough.

This is what we ended up doing.

https://getpepped.com — the root domain , redirects to our squarespace site with marketing controls directly.
getpepped.com/app — our angular app, shows the server side rendered angular application from roast.io

An added benefit by involving fly.io is they give free automatic SSL.

The one more layer in the stack to handle part of this exercise, does increase debugging efforts and needs a lot of technical know how — but I’m sticking to fly.io till we get similar results for such a small investment of time.

pro-tip —Get on the slack channel for quick support
Also read their articles to get more value out of fly.io. They do a lot more than just let you manage hostnames.

The tech we’re excited about — after Google Cloud Summit, Mumbai

The thing that I’m most excited to do after yesterday’s summit is Cloud AutoML. The ability to build custom machine learning models and getting a google vision style API endpoint to use that model from the cloud sounds like magic. The keynote demo where a raspberry pi was used to classify Indian Mithai was too good.

Pros — We do have a lot of pics in a project that we’ve been working on recently. I’m not sure what to use Cloud AutoML in that case. — but this could be slightly fun to do. Maybe use it to do automatic ratings.
Cons — It needs a lot of segregated image data to build a good model.

Cloud spanner —We need more of a realtime database for our mobile apps. We’ve been very happy with firebase and have started testing Firestore. Cloud spanner is the database powering Google’s flagship apps like GMail and GSutie. The way it provides RDMS features with high availability and scaling sounds like a technological marvel. The pricing is prohibitive for the MVPs and small projects. Enterprises are going to love this though.

Data Studio — Seems interesting for using the data that we have generated from our projects and turning them into beautiful charts. We could use this as a solution in building out admin reporting dashboards. Have to try this out.

PubSub — I’m not sure how firebase does it, but I’ve been meaning to use messaging queues for a long time. It sounds like the right thing to do. We’re big users for serverless cloud functions in our apps, and they usually don’t need queuing. But I could be wrong.

Flutter — Spoke to a google cloud developer — who incidentally wasn’t very fond of JS and JS devs . He wanted us to try flutter instead of Ionic. Flutter is Google’s counter to React Native, a cross platform mobile application development platform. We’re going to try out flutter over the next couple of weeks and am eager to see how it progresses once it goes stable.

All in all the event gave us good exposure to existing google cloud infrastructure. We would have loved some firebase platform talks. Hopefully they’ll be part of the Google Cloud Summit next year.

The psychological tactics that keep me going back to Fortune city.

It’s a mobile app — that I feel stupid being an addict of. I’ve tried a lot of expense tracking apps. Personal expense tracking is important. It’s helpful to know how much you spend each month. As a business owner it’s sometime tricky to know how much you make. But it’s easier to figure out how much you spent. Little victories.

Let’s start with the the Fortune city app does. You add an expense each day, and assign it a category. The category defines the kind of building. A food entry builds a restaurant and a drink entry builds a juice bar. You get the picture. The reason most expense tracking apps did not work for me was because I wouldn’t go into the app everyday. I would do it only when I remembered to. And that is what’s different in fortune city. It’s a game based on the expense tracking that you do.

There are a lot of mechanics in the game to keep you coming back.

Here’s a list of things that the game does well.

1. Incentivising the prime focus. 
   The foundation is one thing. Expense tracking. that’s what gives you the city that you play around with. They give you gems and other rewards for maintaining streaks. Giving you an incentive to fulfil the aim of the game.
2. An app with one purpose
   It’s very rewarding for your user to do that one task. Building a product around one aim helps the product manager focus more on improving that one thing. This sort of increasing focus has lead to unbundling of apps. Swarm and Foursquare did this well. Not that the other way doesn’t work too . I’m in favour of singular focussed apps more than apps that do everything.
3. The game is simple to understand but has complex details. 
   The aim of the “Game” is to improve your city’s prosperity. It increases when you add buildings. Adding buildings increases the population limit. This in turn gives you more people to put in those buildings. The people in the buildings generate money. Money can be used to merge buildings together. You can do an in-app purchase to buy gems as well. Simple game mechanics, which this app does as well.
4. The prosperity score
   This is the number one thing to track in the app. One thing to track makes it easy for someone to try to get better at this game. Reddit does it with karma and Swarm does it with coins for the week. 
   Prosperity increases slightly everytime you have a higher level building. That is simple. You get a lot of badges and gems for hitting milestones of number of entries of a type, or buildings or population. Which makes sense — as an incentive.
   Prosperity depends on the kind of people you add to each building. 
   That’s one detail that I figured out only after playing for a long time. Each person has a score card of what their skills are like. Adding someone with a 10 out of 10 in Food — to a restaurant will increase the prosperity of the city. This amount of money that’s generated from the building increases as well.
5. Monetisation. 
    You get a fixed number of buildings you can create everyday. It starts at 5. The game has a set of builders — 5 — that make you the buildings. Adding the 6th expense does not add a new building since you only have 5 available for the day. The limit resets everyday — that’s your incentive to come check the app everyday. They also want you to buy stuff — so you can buy gems which you can use to upgrade your builders. But if you want to stay in the freemium tier, they’ve got you covered as well. There’s gems you can get by viewing video ads. These are reset everyday — there’s 7 of those. And these are reset regularly — you have to check the app to see if there’s a get gems symbol showing. To make you click through the people — they have random quests that give you gems as well. Similar to ads these are regularly reset. Most of these quests involve cycling through all the people in the city. To find a particular person.
6. Competition. 
   There’s a section which shows you your ranking based on your prosperity score. This is the primary reason I’m hooked to this game. I’m currently 14 in India. I check this country ranking screen at-least once in two days — to see where my competition is. I find myself playing to keep my ego satisfied that I’m better than the rest of the folks out there.

I think it’s important to keep looking at things that work in apps and find out why they do. That’s how you make your product better. Emulate the best.

We build web and mobile apps — talk to us if you want us to help in your product journey.