DPI specific image loading ( Not srcset )

HTML5 provides you with srcset attribute on img tags to load resolution-, dimension- or dpi- specific images. But techniques for loading higher DPI images existed since the early days of HTML5 + CSS3 announcement.

Mobile web app developers, especially the ones developing for iOS safari, have been using -webkit-device-pixel-ratio in media queries to load up normal images for non-retina and images of higher dimension for retina display, squeezed into the same space by adjusting background-size property.

The same can be achieved for loading images on a standard page

  1. Set the image src to a transparent 1×1 gif , Data URIs preferred (albeit slow, but we’re talking about a workaround remember?)
  2. Set the dimension of the images via css (also attributes, because performance)
  3. Write/Generate some CSS
  4. Set the background image for the img tag

The only barrier in this approach – dynamic images: Ideally people don’t change the master CSS file for changes in banner images.

The easiest workaround for this problem: Dynamically injected inline CSS straight into the markup that contains the image URLs for the banner images.

MySQL Error in 5.7+: only_full_group_by

database_3
Generally found in: v5.7+
Version on my machine: 5.7.14
Key words: only_full_group_by, 
Remedy:
Documentation: 6.1.7 Server SQL Modes

Solution

The issue is generally observed in 5.7+. If your team/ you previously worked with an older version, then it’s advisable to stay consistent with the stack. However, in specific cases where you can’t downgrade the version, this solution may work.

Disable FULL_GROUP_BY Mode temporarily:

You may need to execute this every time you do a fresh war deployment.

# execute the following commands
mysql> set global sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION';
mysql> set session sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION';

Change MySQL Conf to permanently change SQL mode in MySQL:

First we need to identify the location of the configuration file.

Note: If you’re on Mac, the binary mysql installer (not homebrew) doesn’t create a my.cnf file. You can find sample conf files in the support-files directory located under /usr/local/mysql/support-files.

You can find the cnf file by:

$ which mysqld
# let's say it gives you /usr/sbin/mysqld
$ /usr/sbin/mysqld --verbose --help | grep -A 1 "Default options"
# It'll give the following output
# Default options are read from the following files in the given order: 
# /etc/my.cnf /etc/mysql/my.cnf ~/.my.cnf

# The cnf file doesn't appear in the default non-home-brew installation
# The sample file can be found under the following directory

$ which mysqld
# let's say it gives you /usr/sbin/mysqld
# cd .. to 2 levels back to the mysql directory
# Try to locate the 'support-files' directory

$ cat /usr/sbin/support-files/my-default.cnf
# This contains a sample cnf file
# copy the contents and create one file under the user directory

$ touch ~/my.cnf

Make the following changes to the my.cnf file:

[mysqld]
sql_mode = STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

 

Although not required, restart your MySQL server as a precautionary measure.

webpack sucks, at least for now

2105791

Javascript is an interpreted language and by that I understand that when I hit the F5, I expect zero latency for the new script to appear in local dev environment.

When you take that away by introducing obnoxious compilers like webpack – that first needs to be told how to load, then it compiles, then concats before showing me the output, you’re already the subject of my fury.

The ‘wait time’ for compilation sucks

The reasons why I stayed all these years away from coffee script –

  1. I know how to write ‘good’ javascript and
  2. The compilation time – it sucks.

Let JS remain the interpreted language we all know and love. Don’t put your compiled language genius into it. You’re not welcome here – to the interpreted world.

Debugging is horror

you’ve to trace that line out. Imagine a project consisting of 100 small files with almost similar looking content that you concatenated and now clueless where exactly to hunt and debug.

It’s not uncommon – when you write derived components inherited from parent components, the siblings tend to look similar.

webpack – you’re a clutter builder and clarity killer. And, No. I’m not going to work in large files a.k.a monoliths just to support your existence.

Lack of build blocks

I came from an AngularJS Development environment, where I extensively used yeoman and that allows me to work on an index.html file locally which has references to locally kept css and JS.

That means we don’t have to wait for concat or compile before we hit the F5 or ctrl+r.

Plus, the library files from bower_components stay separate. In webpack, unfortunately, they become part of the compilation step.

Luckily, we’ve wiredep and usemin blocks for our rescue – which simplifies local development and gives great support for production builds.

Learn something from it. Your hotness may look tempting to fools and noobs. I ain’t one. Grow up.

Till then – happy hating.

Remedy

And, I always believe there is no point in complaining, one must find a remedy. Following are some workarounds to reduce frustration:

The little catch with Arrow Functions inside Accessors and Methods

es6-logo

Arrow functions are shorthand notation for function expressions. Although the catch is with the binding of this keyword in the context of accessors

Follow the code snippet below:

'use strict';
var obj = {
  a: 10
};

//Snippet A:
Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; // represents global object 'Window'
  }
});

//Snippet B:
Object.defineProperty(obj, "b", {
  get: function() {
    console.log(this.a, typeof this.a, this);
    return this.a+10; // represents current object 'obj'
  }
});

Though the snippets A & B may appear to be working alike, the only catch is with this binding, in the snippet A, where the arrow functions doesn’t bind the this keyword as expected.

I’m a little puzzled, not sure if it’s a bug or a feature, because MDN mentions:

An arrow function does not create it’s own this context, rather it captures the this value of the enclosing context

 

The binding of lexical this takes place differently in case of Arrow functions.

Examples below:

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); // prints undefined, Window
obj.c(); // prints 10, Object {...}

Common Assumption: this.i should behave like any other function inside. NO.

 

Another example involving call (yanked from MDN):

var obj = { base: 1 };
var f = v => console.log(v + this.base, this);
var g = function ( v ) { console.log(v + this.base, this); };
f.call(obj, 2); // logs NaN, Windows
g.call(obj, 2); // logs 3, Object { base... }  

 

The anomaly in the aforementioned snippet ‘A’ is an ‘expected behavior in ES6’ albeit not anticipated in ES5.

Therefore, it can be safely concluded that arrow functions  can well be used for functions, but they are not ideal candidates for Methods. And, as MDN quotes:

Arrow function expression are best suited for non-method function

 

Bonus: Here is a little mindfuck to play around. Try to guess the output.
(() => ({ foo: () => ({ foo: () => ({ foo: () => ({ foo: () => ({ }) }) }) }) }))();

What? It was easy? Nice. Try the next
(() => () => () => () => () => ({}) )()()()()();

Pacman much?
(() => () => () => () => () => {})()()()()();

Update: Updated the same code as examples in MDN

What is it that you fear about `death`?

While getting drunk with friends on a night atop a water tank, atop a building, a movie-director-friend asks this question ‘Why death is so scary? What’s it that we fear about death?’. The audience, high on drinks, wanted anything but cliché.

We were talking about death in the normalcy, hence, a ‘violent gory gruesome death’ was of course out of the way. The consensus –

The biggest fear we’ve about death is – dying alone, in silence, unnoticed.

Millions die everyday. Nobody cares. I don’t want to be one of those millions who are forgotten. When I die, I want my death to be noticed, I do want that people should feel sad for losing me, they should miss me. I want their attention, I seek their love. I want to live in their memories and I want my story to be told to their children.

..I don’t do this for the money, or the fame, or the glory. I do it because when you write a song, it’s the closest thing to immortality that you are ever going to taste, and when it goes to the public it is magic

Bon Jovi  (Read

Perhaps, it’s our yearning for immortality, that makes death so scary. And, living in people’s memories – is the closest possible alternative.

Pain in the sass

sass

SASS is fun to many – I too love the mixins. But for the majority of time I hate it.

SASS is a family of retarded inbreds

SASS with Compass: often times I’ve felt this largely marketed magic potion is just hype. It’s is akin to snake oil, the panacea of all front-end-css problems. For me, it’s pain in ass. I have seen sass features being abused more often.

Let me give you reasons why not use SASS

People use nesting a lot

Not sure if I worked with stupid people, or it’s just the norm, but when you nest one selector with another, it gets chained in the output file.

Any selector beyond a 3rd level of nesting is a bloat, unreadable garbage.

If you’ve nested that much

  • I’ll assume you’re obsessed about Inception
  • You like to live life dangerously
  • You believe – if it was hard to write, then it should be harder to read
.some-container .content-wrapper .discover-rightpanel .bottomSection .bottomSectionWrapper ul.listmain_Container li.list .wrapper .rightsection .topTitleSection .displayHolder .usercountmain .smarrtplus, .sliderDisplay_label {
  display: block;
}

wtf? seriously!

SASS is slow

While working with CSS files, I’m used to pressing F5 very often. It’s like OCD. When I say that I’m into a lot of F5s, I really expect the file to update instantly, zero latency.

Compass, you sucker, I can attribute several hours of work loss and instances of lost sanity to you and your slowness.

Do you know what happens during those 2.5-10 seconds of css compilation time?

A fairy dies.

Contrary to backend guys, the instant gratification monkey is at the helm of my brain, and it’s not used to it's compiling.. culture.

But then, what’s the point in just whining if I can’t find a remedy?

Here you go – I found libsass. Libsass is – fast, and close to what I can love or at least put up with. Compass is horribly slow – people using it, I really don’t know what to call them, but I’m sure they’ll get brain damage if they are exposed long enough to it.

Searching

Say, there is a P1 ticket – our buy now button (a.k.a. BOB) is terribly out of proportion in production. How do you fix it? Well. you look at the css class or ID and search for it’s occurrence in the directory.

Not to your surprise your selector looks like:

.some-container .content-wrapper .discover-rightpanel .bottomSection .bottomSectionWrapper ul.listmain_Container li.list .wrapper .rightsection .topTitleSection .displayHolder .usercountmain .big-orange-button {
  display: inline;
  margin: 15px 30px;
}

Oh, you can’t use ctrl+shift+f because this nesting is formed only after compilation.

Not a problem. You’re a SASS ninja and so were your ancestors (past programmers) and they’ve done a great job of following the right directory structure. Say, you easily to located that file.

Now what? Search for BOB, Ctrl + F and .big-orange-button?

OK, Found Results:

.some-container .content-wrapper .big-orange-button {}
.some-container .content-wrapper .discover-rightpanel .bottomSection .big-orange-button {}
.some-container .content-wrapper .discover-rightpanel .bottomSection .bottomSectionWrapper ul.listmain_Container li.list .wrapper .rightsection .topTitleSection .displayHolder .usercountmain .big-orange-button {}

OK, you usually won’t have multiple BOBs per page. But let’s say it’s not BOB, but some other important button.

Now, if this is the holy crap situation you’re in, how many ctrl+fs or how many scroll-downs you think you’ve to do to locate the 3rd one? (this can be a better interview question than answering why manholes are round and how many golf balls ..).

If it were normal CSS? Well, just a single ctrl+shift+f and the css selector.

Utopian Software Development doesn’t exist

You’ve been working in the project since years and yeaaaaaaaaars. And you have been pushing boundaries to ensure your team adheres to coding guidelines. But what if –

  • your project was outsourced offshore
  • or your company fired you & rest of staff, replaced them with college fresh men
  • or transferred this project to another team

Assume any of the above case and assume this was done without any knowledge transfer.

The rookies understand your equipment and toolbox. But they do not know where you kept the nuts and bolts. So, they start creating their own, merely duplicate content.

So, all those nicely crafted variables and mixins you painstakingly created and named all over the years is .. poof.. gone in a jiffy.. goes in vain. It’s a pile of garbage now.

Agree, that CSS definitely wouldn’t have been of any greater help in such a situation. But, SASS did no good either. It was rather a wastage of those person hours you spent debating.

Placeholder for future caption

Placeholder for future text

RFC2549

ietflogotrans

Published on April 1, 1999, RFC2549 is an Experimental Protocol for the Internet as found at: https://tools.ietf.org/html/rfc2549 which suggests  using Avian carriers, meaning birds, over other mediums of data transfer and goes into describing the possible implications of it.

This was an amendment to RFC1149, published exactly 9 years before on the same date i.e. on April 1, 1990. Contrary to the former suggestion which involved data delivery only by birds on a small scroll of paper, the modern suggestion suggested sending data over magnetic tapes flown overseas using Concorde’s expedited data delivery, or heavier payloads delivered on Ostriches instead of birds that can fly. More can be explored on the same, ironically, on the internet.

In December 2005, a Gartner published a report on bird flu that concluded “A pandemic wouldn’t affect IT systems directly” – wikipedia

It’s not surprising to see, that both RFCs were filed by the same person, David Waitzman, although from different physical and email addresses, and of course employers.

Never underestimate the bandwidth of PigeonNet! – mayupvoterandomly

The intention of this RFC was to create a protocol that would provide high delay, low/high throughput, and low altitude data carrier services. Readers may visit the following links to learn more about the RFC.

“the carriers have an intrinsic collision avoidance system,” a problem that afflicts the transfer of data on crowded networks – cnet

Readers are also encouraged to ask questions like

Web Scraper Blocker 1

For the uninitiated, web scrapers are applications that can connect to the internet and download a web page, just like a human user downloading it to their browser. ‘Price scrapers’ is the name given to scrapers that connect to eCommerce websites to download the page, go through the textual content and determine the price of the product.

For all site owners, scrapers are pain in the ass.

Search engines also use scrapers a.k.a crawlers, and they use them to download the pages on your website. No doubt, they’re useful. But, crawling is a kind of activity that anybody won’t perform every 20 minutes. So let’s isolate crawlers from scrapers and we’ll see that:

  • Scrapers create unwanted, unsolicited, unwelcome traffic
  • They’re barely useful to the site owners.
  • They consume resources like RAM and CPU by making multiple requests
  • They steal information. Yes, it’s stealing because of the scale at which it happens

For the above few reasons, site owners often time block such scrapers by following few techniques:

  • They determine the source (aka client’s) IP
  • Check the frequency at which they are accessing this site
  • If the frequency goes beyond a threshold level (say 25 requests per minute or so), they block the IP and redirect them to some other page

Continue reading

if a job exists, the task attached to it is difficult

I was reading an article about ‘makeup’ on Vagabomb.com. There was a nice line – “if a job exists, the task attached to it is difficult”. Then, I sent this one-liner to a friend. She din’t understand. So I’m writing this to explain what it means.

A bit of literature, why people should mind their own business and don’t be a jack of all trades

A single person can catch fish, grow crops, hunt, cook food and eat it too. But humanity was not just about surviving. It was about exhibiting the characteristics of an intelligent lifeform – in the form of music, art work, literature, architecture and aesthetics.

Now, imagine, if a single person could do everything on his/her own, we wouldn’t have had these roles. We would have ended with jack of all trades & master of none?

And, then, what if crisis came in? Most of us, are not Spartans. We are not warriors by profession (do check the link if you understand hindi). And, everyone can’t be war ready all the time. And, what if we did, then we’ll be known as a land of half life war boys. If we were just a land of warriors, we’d have been  gullible, aggressive and thoughtless.

We’d have been waging wars on each other and end up destroying the universe. Therefore, we needed a society that’d capable of thinking too.

( not cowards, ok, no Thucydides quotes here please).

Now, what exactly the master of the trade do

So, we, the humans, created specializations.

We needed people to call artists, scientists, politicians, philosophers, engineers, gold smiths, musicians, poets, writers, warriors, doctors, witches & magicians.

The artists creates arts, musicians create music and they sell/trade their art work for the basic needs. We needed politicians to represent us (ok, laugh at it), law makers who understand the people and write/amend the rule book from time to time, law enforcement agencies to protect the laws and citizens abiding by the law and punish who don’t. We needed prophets and spiritual leaders to teach us religion, basically another form of an authorless rule book that instills more fear than the law enforcements.

To enforce specialization, we introduced professionalization in every trade. That’d mean, that one has to work for years on something to gain experience and become perfect at it.

So

  • People worked on only one thing at a time e.g. writing, art work, software programming, music composition, poetry, or body building
  • They depended on others for the other forms of work
  • They started as unskilled workers
  • They get paid during training
  • They worked under someone’s supervision until they were capable enough to go solo
  • Then, the system rewarded them with a higher pay

This reward system will ensure they work even harder to become perfectionist. And, then they should be able to inspire others, and give back to the society by sharing the knowledge.

Now, is it easy to beat this class of people?

They have put many hours of constant effort to become efficient. An experienced coder will find flaws in a large system faster than a noob. A professional copy editor will take very little time for comprehension of a passage of text. What a professional artist will do in few minutes create on a canvas will be pure magic.

And patience – it’s great deal.

Body building takes years of hard work. A pianist takes years to develop his/her muscle memory.

It’s the constant push these professionals give every day in challenging the norms and making an extra 1% progress to exceed the standards that makes humanity prosper.

Therefore it is not easy to beat them. We can try getting better, and may be we’ll beat them one day. But it’ll require a lot of effort.

You can’t watch Youtube videos on rocket engines and make your rocket in the back yard tomorrow. You can’t just read techcrunch and become an entrepreneur. You can’t dribbble.com every day and become an artist.

Make up, though it isn’t rocket science, doesn’t make it any easier. It’s not for everyone.

‘Professional Makeup Artistry’ is not another hobby like gardening or jogging. A make up artist has attained professionalization in the trade by working many years in the trade. He/she has a job of making people look beautiful. The skills required to perform this job is hard to attain.

Therefore, if a job exists, the task attached to it will demand a lot of skill, hence the difficulty.

You can become an expert too, if you try everyday, constantly for hours, under an expert’s supervision, with the similar attitude. But, since you’re into a different specialization, you should rather refrain from buying those expensive make up kits which you do not know how to use.

I hope I’ve explained correctly.

Alzheimer’s

article-2587908-1c88217900000578-101_634x286

There was no internet in office yesterday. We did n’t plank, so you can guess we are not into fitness as much as our silicon valley counterparts. But we did something else. We flipped the chairs to engage in human-to-human-conversation, on all sorts of topics, technology, hypothesis, marketing, growth hacking.

Food is free in office (fall for it people, this is another reason you should work for a startup like us… hihihi). Yesterday lunch arrived a little late.

No internet = No work

Hence, only worry in left in life at that moment was – hunger.

I and Shyam were sitting in the pantry, waiting for food, talking some stupid stuff (precisely, I was doing the stupid part, shyam was doing the talking part). Ranadheer, we call him Rana, our Head of Products, although he prefers to call himself a product manager, came in, saw us and snarkily said Aaahn! See the desperate folks are sitting here already, Shyam smirked.

Then ensued a chain of discussions when Rana stopped at one point, said

“I forgot the name. This has been happening since sometime, may be I’m getting old.”

Me – “May be you’re reading a lot these days?”

Rana – “That could be true as well. I’ve been reading a lot since last few days”

Shyam – “Short term memory loss of a kind?”

Alzheimer’s disease is defined as a progressive disease that destroys memory and other important mental functions. Short term memory loss is one of the symptoms.

Rana went on to narrate the story of his mother. In his words –

My mother is in her late seventies now.And now she has started showing the symptoms of Alzheimer’s. She recognizes me and some other people. But she won’t remember when we met for the last time.

Few years back, when I visited her, she used to have a laundry list of complaints, formed of her anxieties, worries and fears. Like she’ll go whining about why her son visits her only once in a month, when she will see her grandson doing x, when will she meet Y etc. I’ve observed, as she grew old, her anxieties kept building up over the years. At the end of the day, she’ll be a sad old lady who has a lot of worries but she will be helpless about it. It was very saddening to see it happening.

…now, when she has forgotten everything, she is a happy lady

But now, when she has forgotten everything, she is a happy lady. It’s pretty astounding to see this. All of her worries are gone. She is no longer a whining old lady. She no longer fires those questions at me. Although, she’ll occasionally ask me if I’ll come next month or not, but that’s totally ok. I’m happy to see this transformation in her. In the coming years she will forget even more of the stuff. It’s good anyway. I’m happy to see her this way.

Shyam echoed the same sentiments and narrated his story about his grandmother.

My grandmother has Alzheimer’s too. But isn’t it a strange phenomena that people don’t forget everything, like, you know, those things deeply buried in the mind. I’ll give you an example, she doesn’t recognize me often, people around will have to tell her about me before she makes sense of me being there. It’s depressing,a bit disappointing that she forgot me, but you know, every morning when someone plays some records, she’ll recite & hum along the raga. She knows most ragas & still remembers them. Like, if someone plays one on the tv or on the record, she recognizes it immediately.

..every morning when someone plays some records, she’ll recite & hum along the raga. She knows most ragas & still remembers them..

 

Baffled with the deeper meaning this conversation carried, I thought to myself – Clearly the brain works in strange ways.

You forget all attachments, all regrets that you had in life, may be the sorrowful memories you had, and also the lovable memories you cherish all the time. It deprives you of the thoughts that would have made you feel attached in turn would have made your exit difficult.

It’s like the brain preparing you to be happy, may be in a invasive manner by erasing memories of people and events, and thus, erasing all emotions attached to all worldly possessions, so that you won’t have to live in regret and when death comes you’ll embrace it happily.