I Code Startups

Why this post:

A couple of weeks back I was browsing on Chrome (latest version) looking for some good offers on a Home Loan. I landed on a famous VC funded Indian website. Browsing for a while, I decided to look at other results which Google had shown. Then, the browser glitched – or so I thought!

Here is how you can replay the above: 

1. Open a new chrome tab
2. Search for the following: “bankbazaar best loan offer”
3. Click on the first result from BankBazaar
4. Wait for the page to load completely
5. Click Back
6. Saw, Shocked!!
7. Looking at this behaviour, I clicked back once again.
8. Guess what happened – it took me to Google.com

And this is not where the buck stopped, as long as you wait for each page to load completely, you will keep cycling between BB pages and Google Homepage for eternity. i.e. you cannot look at BB’s competitors’ pages without having to type the query again.

This looks like a devious Product Managers idea of upgrading their title to a Growth Hacker!

I saw their tricks, felt disgusted & left their website for good.

Okay, why is this a big deal?

Partly because these kinds of activities (called black-hat marketing techniques) becoming mainstream is a bad omen! I don’t like where some companies/teams are headed.

Tech analysis:

These days, I am a frontend engineer and wanted to identify how they were doing this – figures out they are playing with the following constructs:

window.addEventListener("popstate", ()=>{})

Responsible Disclosure: I have, in the past, booked a personal loan from BankBazaar and had a positive experience with their process.

About Me:

I’ve been developing websites for a while, started out in my teens – building WYSIWYG web pages on Geocities, then graduated to hand-coding HTML/CSS and finally decided to pursue a career in web development. These days I’m working on the frontend experience at ThoughtSpot. All views are my own and do not necessarily reflect those of my current or past employers.

I would define currying as invoking a function with fewer arguments than the function expects. This returns a new function that can be called with the remaining arguments. You could also invoke it with lower than remaining arguments and it would return yet another function.

Sounds confusing? Let’s look at the expected behaviour of our curry function:

const add = (a,b,c,d)=>{return a+b+c+d}

let add2 = curry(add,2);
//Here add2 is the curried function. We can use it like:

add2(3,4,5) //results in 14 (2+3+4+5)
//or
add2(3,4)(5) //Same result
//or
add2(3)(4)(5) //Same result

//This works too -
const add2_3 = add2(3)
//The above will now accept two more arguments.

add2_3(4,5) //results in 14 too.

How would you go about implementing this?

Those of you who read my blogs regularly, already know that I have been coding for the better part of the past decade.

A fair bit of that time has gone into building beautiful and usable UI components for projects built for scale. (e.g. Fab, Hem, Tavisca)

So it was not a surprise for me when I saw that RoR community came up with SASS a preprocessor for CSS which allowed you to dynamically create your style-sheets. Eventually, developers could use functions (mixins, extend, import), variables, nesting and create UI components in a much elegant fashion.

All was well, the UI developers were still writing their styles in a separate file which would compile down to CSS and be included into the HTML as required.

But eventually, with Angular and React, users started writing their styles in the HTML directly. It felt natural to new developers who liked keeping their HTML/JS for a component in a single JSX file. They had no qualms about using CSS in the style attributes of their DOM nodes.

Even though in my opinion (please note the term ‘Opinion’) inline-styles pollute the DOM and get in the way of development.

Also, keeping styles for each component in its own JSX makes it difficult to use the power of SASS and visualize the entire hierarchy that we get by looking at a SASS file (if done properly.)

Enter, styled-components which lets you write CSS as JSON objects and auto assigns a unique class name to every component. It also auto links the class to every instance of the component.

What I dislike about this approach is the fact that we are adding inline-style nodes and the browser has to generate the same class during every execution of the app/page. This does not play well with the fact that browsers can easily create the class, pre-process its properties and cache it for future use across reloads.

What are your takes?

This morning I received an e-mail on my HipChat linked account.

According to Atlassian, they have detected an incident that may have resulted in unauthorized access to my user account information which very well includes the username, email address and hashed password.

They go ahead to mention that there is no evidence for other Atlassian products having been breached. They also claim that they did not detect any unauthorized access to financial data.

While Atlassian may have already deleted your password to force a reset, my recommendation is to change your password across other websites if you happen to re-use your password.