26 April 2017

Aren't you using retina images already?



With the advent of higher resolution devices increasing every day and the need for the end users to getting used to seeing high-res images, anything that is default or standard definition looks inferior if not ugly. As a developer, it is a must to consider this design impact and how to accommodate and give a seamless experience to the end user across various types of devices. I am going to quickly touch base on how to understand what High Dpi devices are how to exploit all those pixels available in a device real estate.

DPI
DPI stands for Dot Per Inch. I am a 90s kid (don't know if that is proud statement or a something to be trolled about), one of the highest resolution I use to see was 1024 x 768 - almost square sized monitors. It simply means that many pixels available and that many colors one could see in screen irrespective of the size of the screen. Take a look at a simple example below. If you closely observe, we are trying to draw a circle in various devices with different pixel densities. If you see on the far left assuming 1 pixel = 1 unit we won't get that much of a resolution as each slot of rectangle can show just one color at a time. If we can increase the density by 4x (or twice in area), the resolution becomes better and if its 9x (thrice in area), it will show a better curve.

The current HD Televisions are having 1920x1080 pixels and if you observe it very close literally, you should be able to decipher the pixels. But viewed at a particular distance, the human brain will not be able to separate that out. However, in small devices like phone where the proximity is more, it is vital that every developer understand this basic concept in order to give high-res content.




For the web

Before we dive into how to optimize rasterized images for the web, if there is an option available to go with Vector Graphics (example .svg), always go for it, it should be a no-brainer. They are relatively lesser in size and come ready made to be rendered across any kinds of devices. However, practically this is not always the case.

Rendering high pixels for the web should be easier. For demonstration purposes, let me take Pramati Logo as an example. Following are two versions of the same image rendered differently. If you see this image on HD monitor, you will call it both look alike. However I would urge you to look in a high resolution device like an Apple iPhone or a Retina enabled Macbook or any high DPI device, you will clearly see a stark difference between these two.



To put in "lay-dev" terms, the image on the bottom is not retina ready whereas the top one is. For the stubborn folks like me, who won't take the time to see it on a retina device, I am attaching a screenshot (deliberately enlarged) captured from an Apple iPhone below.



As you can see, it is pretty clear there is a significant difference in the edges and the symbol.

The trick

The technique is very simple - you have to use an image four times larger its size and use css explicitly to set the width to the initial or base size. For example, if you want to render an image in an area of 400x150, you need to get your image four times larger than this (or twice larger in the sides). So, you should use an image of dimension 800x300 and set the resulting width to 400px. This would ensure that it renders with the maximum pixels in a Retina device.


Emails
Whenever you are developing this for web, you are going to test it in most of the common browsers where CSS3 standards have become a norm in order to guarantee a consistent experience. However, when you are developing for email clients (especially the bloody outlooks), I would urge you to consider and craft every minute thing. With lots and lots of emails consumed in mobile devices these days, heading towards Retina images is a no-brainer. However, almost all the emails I see and consume are ignoring this main fact and are not retina friendly. Even a lot of famous companies ignore this trivial design difference and send image as-is.

I've already written an article on the tools and techniques required to develop rich and responsive emails for different emails clients which is a short read. And don't forget to use Litmus - they have clearly monopolised the Email testing market!



Maximum compression
I am a huge fan of PNG images because of their size, transparency and supreme compression it offers. If you are not going to link the pictures directly with the email, compressing a PNG can save a lot of file size especially when they made as attachments and referred in the final email.

I use a tool called as ImageAlpha which is phenomenal when it comes to compressing images with transparency. For PNG, the number of predefined colors can be reduced to 32 or 64 depending on the color usage your picture has and voila, you can achieve compression as high as 80%! It is 100% free as well!



I often say that Design nuances and intricacies are not just for "designers". Any "Engineer" should be able to understand why we do what we do and then dig on the how we do part to become proficient thus increasing your productivity and your edge multi-folds.

Hope you were able to learn something today.

Cheers!
Braga

24 February 2017

Is your experience an Asset or a Liability?



We are already into few weeks into 2017. As with any new year, a lot of resolutions would have been made. I wanted this year to be the best one, better than any other year in the past and I am very sure most you would want the same. As with any year progressing, there are two things that will happen whether we wish or not. For professionals, (which is where I direct this article), you age a year and your experience will increase by a year. I am going to analyse on whether this natural progression is good or bad for our careers.

The Information technology is a niche industry that started booming, exploding, rather, in early 2000. Due to this immediate inflation and vacancy, opportunities opened in every direction and everyone wanted to cash in towards this boom as the demand of resources was on the rise. As for supply goes, it was relatively young. In fact, the potential was so high that there was a surge in Engineering colleges worldwide in the past 20 years. In a country like the growth can be said as almost Exponential. As with any emerging market, this enormous demand was met with lots and lots of Information technology professionals since the start of the millenia. The profession was considered Youth's epoch into the industry. The salaries that this generation got suddenly raised the eyebrows and at times irked a lot of the older folks respectively a generation above. It was a flourishing period for a lot.

Any sudden growth like this is bound to bring with it a perception of sameness spread across time. This Inflation, occurring right at the start, was destined to reach equilibrium at some point. That is what has started to happen. Around 2006, any Software Engineer with 6 years experience and a working knowledge of Java was considered highly valuable irrespective of their objective competence. The folks who were entering the market then started to observe this pattern and there was this natural association people started to make - that the more the experience, the more the intellect and knowledge, thus more money. People started to value themselves high with time irrespective of the type of choices they were making for their careers. This attitude was deeply rooted within the entire industry and it became a pressing problem for the companies as the experienced non-performers have started to become a nightmare.

The current phase is that organisations are fearing to take a stance or a bold decision because when I say organisations - they are not some idealistic machines, they are people in flesh like you or me where some of the problems to be solved are the problem solvers. It is kind of intertwined right now.

Normalisation phase
However, as with anything else, time will play catch-up. Since the new set of engineers are learning a lot of new and novel ways to do things and the amount of startups that are exploding with their own sets of ideas, the perception of time being reduced, these bad outliers have made themselves sitting ducks. The ones who are in the most pathetic state are the ones that think that "I deserve this and that" simply because they have more experience on paper. It will be a harsh fact to accept when reality reveals itself which it often does.

An analogy I can relate to is with our planet. My brother hates when people call “Save the planet”. His argument is that the planet does not need any saving. Planting trees and making it greener does not matter an ounce for the scale of something as big as earth - perhaps the beneficiaries are none but humans and other species with humans always being the primary. Whatever we try to do to Mother Earth, she has her own defence mechanism to bring things back to Equilibrium. Perception of time on our human scale - may look very long, but the laws of the universe do not change a bit. Only our perceptions do.

Same is the case with the perceived experience factor. I am seeing this first hand that experience has become a problem especially during recruitment. When we want to fill a particular position, obviously we don’t want more engineers with 10-15 years of experience. Here are some arguments towards the same.

  1. Recruiting an experienced player is a difficult job. For one to hire an experienced player, there needs to be a good availability in the assessment front as there is going to be a considerable investment. So the one who is assessing should be theoretically at least as good as the position that has been sought out for. Unfortunately when people are trying to add resources at scale, this becomes a problem. The chances of making a mistake are high.
  2. Experienced resources are expensive: This is a very “current” trend. The ones who are experienced are usually expensive for the reason that both the market and the candidate perceive themselves as valuable and hence the cost factor.
  3. Experienced resources are older: With the sample space and the heavy availability of young blood, people tend to prefer younger engineers as there has been a lot of stagnant folks big organizations are finding ways to shed. This may be a hard thing to digest, but this is how it is.
  4. Distribution of experienced resources are very thin: Although there may be 10 million resources each with 10+ years of experience, the industry does not need all the 10 million because of the hierarchy structure. If you consider the pyramid, the volume accounts more towards the worker bees and not more towards the Queen bees. This does not mean that Queen bees are not needed, but the spread or distribution is very thin. So the more experienced you are, chances are more likely that you are going to face a very harsh time in the coming decade as the number of positions to fill will exponentially reduce.

So how to avoid this deadly trap?
Fortunately, the situation is not all that bad! At least, not yet. Yes, this is a problem that many organizations inevitably have to address and many have already gone through multiple cycles addressing it irrespective of the backlashes it face, there is still a chance from the individual’s perspective to convert any baggage that one has a into an X factor that is bound to increase the value.
  1. Switch from a knowledge worker to a deep worker: Ask yourself whether you are a knowledge worker or a deep worker. It is not a rocket science to know where you stand. Perhaps try to answer yourself these simple questions honestly and you can assess whether you fall on the knowledge or deep worker. Do I proactively look for sensational/political/social feeds? Do I use facebook/twitter/social media sites multiple times during a day? Have I solved any real problem which only a few in my industry could solve? Do I have a learning/positive habit building routine? Have I worked in recent time on an issue in total isolation for days together?
    Based on answering some of these questions, you could roughly assess whether you are a knowledge worker, gathering a bunch of haphazard information which is easily repeatable by others and does not add any special value. If that is the case, you should switch from being a knowledge worker to a deep worker. The best resource I can point you to is the book Deep Work by Cal Newport where he dives deep and emphasizes why it is very important to go deep and why it is a valuable asset amidst a highly distractive environment.
  2. Attitude check: This is a very subjective and a tough thing to assess for anyone to do it to themselves. Our ego may interfere and will give some sweet answers that are acceptable to hear. Your number of years ARE NOT directly related to your experience. Perhaps on paper, yes, but do a fair judgment. Again this should be easy. Ask yourself this question. Assuming you are having 10 years of paper experience in the industry - How long will it take for a truly “focussed” engineer to be able to meet the job profile I am performing today. If the answer is 10 years, either you have not understood my question or you have skipped most of what I’ve said earlier.
  3. Technology immune: One other pattern I am seeing very closely is that people are associating themselves with a particular technology. I am  a Java person, I am a Manual Tester, a Scala guy, and they believe that working in that field magically makes them a subject matter expert. Again I am talking about the players who are with the "I-Deserve" attitude. These players are very reluctant to change. When the technology or the process becomes obsolete, they get obsolete along with it. Making them cross-train into anything else is both a painful and costly juncture which many organisations assess and instead shed them. That is the reason, the change should not come from the outside, but these things should be realized by the professionals themselves.

Being lethargic and thinking things will take care of themselves is not going to work, not with the pace at which the industry is moving. Being proactive is no longer merely an option for the passionate but a necessity for the normal. The good news is, before things are dictated to us, we can take the baton in our hands and realise where the industry is heading and make the right moves. Wishing you all a fantastic year!

Cheers,
Braga

05 February 2017

15-Game in Android

Having developed this game earlier (for fun) in Java Swing and Actionscript years before, I thought I would port this to Android as well. Spent a good 6 hours from New Project to put it live on the Play store! Click here for downloading it.



Cheers,
Braga

23 January 2017

A simple formula to rapidly succeed

This is a well-known formula. Wanted to see how it looks in code. Only 5 lines, not bad!



Of course, you can force kill this infinite loop :), how far you go is up to you, though!

Cheers!
Braga

21 January 2017

Gotchas while Appifying your website in Android with Webview



Android's Webview class is an excellent way to convert your website instantly into an app provided it is responsive. There are a lot of tutorials out there to convert your website into a webview instantly. I too wanted to convert one of my websites into an app.

However, there are certain things you need to keep in mind before you go ahead and submit in the app store for publication.

Since this is a relatively newer experience for me, I did not anticipate certain obvious gotchas. My application went through two sets of rejection before I could make it live, perhaps these could be useful for someone in similar waters.

Ensure that you are aware of all the policies that are set forth by Google Play; may it be copyrighted content, Privacy policy, Impersonation Policy, Ratings etc., I thought I had it all covered until I got this email from Google assuming that my application was an impersonation of an existing website.


Rejection#1


Notification from Google Play

Google Play Support <googleplay-developer-support+no-reply@google.com>

Hi Developers at ***,

After review, <may app>, has been suspended and removed from Google Play as a policy strike because it violates the impersonation policy.

Next Steps

  1. Read through the Impersonation article for more details and examples of policy violations.
  2. Make sure your app is compliant with the Impersonation and Intellectual Property policy and all other policies listed in the Developer Program Policies. Remember additional enforcement could occur if there are further policy issues with your apps.
  3. Sign in to your Developer Console and submit the policy compliant app using a new package name and a new app name.

What if I have permission to use the content?

Contact our support team to provide a justification for its use. Justification may include providing proof that you are authorized to use the content in your app or some other legal justification.

Additional suspensions of any nature may result in the termination of your developer account, and investigation and possible termination of related Google accounts. If your account is terminated, payments will cease and Google may recover the proceeds of any past sales and/or the cost of any associated fees (such as chargebacks and transaction fees) from you.

If you’ve reviewed the policy and feel this suspension may have been in error, please reach out to our policy support team. One of my colleagues will get back to you within 2 business days.

Regards,

The Google Play Review Team


My Appeal


My initial reaction was wtf! I have created an application for my own website, why the hell would google want to reject it? But the rationale behind this rejection made sense. What if a random person uses my website and tries to monetize my application? Or myself for that matter take a bunch of existing websites and start appifying them for my personal benefits.
I appealed. During the appeal, I uploaded a bunch of documents supporting that I am the owner of the website and that I have the rights to appify. The documents included - Google Analytics statistics page of the site and the Digital Ocean hosted app screenshots. Plus a small write up on claiming myself to be the owner.

Google understood and accepted my appeal. This is the email I got from them afterward.


Reinstatement


Re: [<my case#>] Your appeal for reinstatement

Hi Bragadeesh,

Thanks for contacting the Google Play Team.

We’ve accepted your appeal and your app <appname> has been reinstated. For the app to appear on the Play Store, you’ll need to sign into your Developer Console and click "Submit update" to submit your app again.

If the option to resubmit is not available, please make a small change (such as adding and deleting a space in your Description in the Store Listings) to reactivate the button.

In the future, if you have proof of permission you can submit it to our team proactively using this form:
https://support.google.com/googleplay/android-developer/answer/6320428

The link can also be found on your Store Listing page underneath the box for Full Description.

If you're an AdMob publisher, you'll need to contact the AdMob team to re-enable ad serving:
https://support.google.com/admob/contact/appeal_policy_violation

The AdMob policy team will review your app(s) and decide whether to re-enable ad serving.

Please let me know if you have any other questions or concerns.

Thanks for supporting Google Play!

Regards,
<Google Engineer>
The Google Play Team

At this point, I was elated to have successfully appealed to my rejection and went ahead and resubmitted the application. However, later I found that, this feeling was short lived as I got a second rejection from Google Playstore.


Rejection#2


Notification from Google Play about <app name>

Hi Developers at ***,

Thanks for submitting your app to Google Play.

I reviewed <appname>, and had to reject it because of an unauthorized use of copyrighted content. If you submitted an update, the previous version of your app is still live on Google Play.

Here’s how you can submit your app for another review:
  1. Remove any content owned by a third party from your app. For example, your app Store Listing contains: images of “<a celebrity>” in the Tablet 7" Screenshots. Affected Translations: en_US, en_IN
  2. Read through the Unauthorized Use of Copyrighted Content article for more details and examples.
  3. Make sure your app is compliant with the Impersonation and Intellectual Property policy and all other policies listed in the Developer Program Policies. Remember that additional enforcement could occur if there are further policy issues with your apps.
  4. Sign in to your Developer Console and submit your app.

What if I have permission to use the content?

Contact our support team to provide a justification for its use. Justification may include providing proof that you are authorized to use the content in your app or some other legal justification.

If you’ve reviewed the policy and feel this rejection may have been in error, please reach out to our policy support team. One of my colleagues will get back to you within 2 business days.

I appreciate your support of Google Play!

Best,

<Google Engineer>

Google Play Review Team


This rejection though was totally valid. I felt so dumb to have used a celebrity picture for demonstration purposes in one of my tablet screenshots without a copyright. Google was sort of kinder and patient to me. In order, not to test their patience too much, I thought I would remove the image in question they've said and three other images as well which I thought would fall under the violative category. 

I then resubmitted my application and voila! My app is now live at the play store. It was an adventurous learning because they could have blocked my entire developer account for life if I had one or two more policy strikes as many other developers have had. 

Cheers!
Braga