Thoughts on scalable UI in the world of JSX, SASS, React, Styled Components and the likes.

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?

Atlassian’s HipChat user data breached.

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.

Origins of JavaScript, or ECMAscript.

ECMAScript (or JavaScript), legend has it, was built in 10 days flat. In the year 1995 when I was 5 years old, Brendan Eich had been tasked with developing a scripting language for the Netscape browser.

Eich took parts of Scheme (first-class functions) and Self (prototypal inheritance) and made the syntax “look-like” that of Java. (of course he did a lot more than just that.)

The language was made for amateur scripters who wrote simple code for client-side execution. Not many had predicted that the language would become a popular choice for building dynamic websites, server side frameworks, databases and even powering drones.

Today, JavaScript is a single-threaded, non-blocking, asynchronous, concurrent language. It features a call-stack, an event-loop, a callback queue and some other APIs. Node has a call-stack and a heap.

JavaScript programmers like to use words like, “event-loop”, “non-blocking”, “callback”, “asynchronous”, “single-threaded” and “concurrency”.

Let us go back in time and see the timeline for JavaScript:

After the initial release in 1997, the first major release came in 1999 called ECMAScript 3. Post which the language was stagnant for a long time. While there was a draft for ECMAScript 4, it was never released due to lack of consensus on the featureset.

During this time, libraries like jQuery helped JS stay sane by handling browser quirks and kinks. Creative users were trying to make beautiful animations and innovative hacks for various tricks. But performance was an issue. Then began the browser performance wars. In a bid to get a bigger market share, browser vendors started optimizing Javascript execution to make run faster.

This led to a dream-run for JavaScript performance. With the launch of V8 in 2008, JavaScript was 10 -1800 times faster than previous generation compilers. This gave the language a resurgence amongst web developers. Latest browsers like Google Chrome, could run client-side scripts at blazing fast speeds. Other vendors soon caught up with their own compilers which optimised code for execution. (JIT)

Developers started handing off non-business critical calculations like template rendering to the client, thereby improving server response times and reducing loads on backend servers. Websites were suddenly faster than ever.

Mr. Douglas Crockford evangelised the language to a big extent, his book “JavaScript – The Good Parts” has eventually become a must read for most beginners.

Crockford also contributed directly to the language, most notably his specification and implementation of JSON. Today, it is the most common data format used for asynchronous browser/server communication, largely replacing XML, and is used by AJAX. AJAX made it possible for single page applications to gain popularity.

In 2009 ES5 was launched with JSON support baked into the language itself. This version also added a ‘strict mode’ aimed at capturing silent errors. According to John Resig – “This strict context prevents certain actions from being taken and throws more exceptions.”

Eventually, Ryan Dahl, a talented developer picked the event-based, non-blocking, single threaded V8 engine, developed by Google, and made Node.js® which is a JavaScript runtime for server side programming. It is inherently lightweight and efficient for non-compute heavy tasks.

As Node started getting popular, a huge ecosystem of contributors started creating and maintaining libraries to host servers, manipulate images or even stream data. Thus npm was born, which today is the largest repository of open-sourced packages in the world.

But all this while, the language itself remained almost the same. ES5 (the most widely supported version of JavaScript currently in use) was standardised in 2009. Since then the “Ecma International, Technical Committee 39” has been working on introducing new features to the subsequent releases.

The committee has since 2015 decided to launch a version of the language every year in the format ES2015, ES2016, ES2017 and so on. Those features which cannot make to the current release get added to the next draft.

So today, JavaScript has a wide array of new features available, which cannot be used in production code since few browsers might not support them.

But, as is always the case, another bunch of geeks have come up with Babel which is a transpiler which can take in any version of JavaScript and emit ES5 which all modern browsers support.

I know we have covered a lot in this post. We would eventually dig deep into the basic fundamentals of the language and then eventually work our way till we know how to read new drafts and know what to expect from future versions of the language. We will also explore various libraries written for client-side (Backbone, Ember, React, Redux etc) as well as back-end execution (Express, Meteor, Kraken etc) and learn how to use a few of them to create modern fast applications which solve real-world problems.

Edits, Tips, Suggestions, Feedback? Please let me know in the comments below.

Overscan/Underscan issue with ATI Radeon Legacy Cards (4000, 3000 and 2000 series) on Windows 10

Recently after I upgraded to Windows 10, my monitor started behaving weirdly. It would show black border around the screen and hence my 1080 monitor showed an underscanned version of my screen.

Continue reading Overscan/Underscan issue with ATI Radeon Legacy Cards (4000, 3000 and 2000 series) on Windows 10

I invest with Goalwise. Here is why.

Last week I was discussing with my bunch of close connections about a new investment platform Goalwise. The most common question was what does Goalwise do and how could it help them. (questions like Why Goalwise or Why not a competitor)

In this post I try to explain in brief what Goalwise does and how it does it better than it’s competitors. Continue reading I invest with Goalwise. Here is why.

JavaScript and “First-class functions”.

js-minJavaScript is one of the languages which claim to feature “First Class Functions”. So, what does it mean to be first class function? Let’s explore.

I like to compare it to being a first class citizen. Basically the right to freely move across boundaries in the country without being questioned of your purpose.

In the programming context, being first-class, gives JavaScript functions the ability to be saved in variables, passed around as arguments or even returned from other functions. Taking this a step further, functions can reside inside objects as one of the properties. Continue reading JavaScript and “First-class functions”.

Parse Shutdown – What Next?

In a recent mail the Parse team mentioned January 28th 2017 is when Parse APIs would stop responding.

If your app uses Parse, the best immediate course of action is to host a private instance of the Parse Open Source Server on a Cloud Instance (or Dedicated Instance if you choose). Migrate the data to the new server.

There are simple ways to ensure there is no downtime during this activity. You could follow the migration guide here. I am available on a pro bono basis to help with the migrations.

The real meaning of UX.

UX, short for User eXperience has suddenly come to the forefront of the technology driven startup era.

Everybody is talking about providing the best interface possible to make any user’s journey on their platform as friction-free as possible.

But what exactly does UX comprise of? Is it the improvement of visual appeal, the increase in page load speeds or slick animations? Continue reading The real meaning of UX.