Posts

Making cleaner imports with Webpack and Babel

You can bring in modules from different javascript file using require based javascript code, or normal Babel parse-able imports. But the code with these imports often become a little bad because of relative imports like:

importComponentfrom'../../path/to/Component'
But a better, more cleaner way of writing ES6 imports is

importComponentfrom'~/path/from/jsRoot/Component.js'
This hugely avoids the bad relative paths  for importing depending on where the component files are. Now, this is not parse-able by babel itself. But you can parse this by webpack itself using it's resolve attribute. So your webpack should have these two segments of code:

resolve: { alias: { '~':__dirname+'/path/to/jsRoot', modernizr$:path.resolve(__dirname, '.modernizrrc')         }, extensions: ['.js', '.jsx'], modules: ['node_modules']     },
and

module: { rules: [             { test: /\.jsx?$/, use: [                     { loader:'babel-loader'…

What's a ShadowDOM?

Image
I first came to know about Shadow DOM from my curiosity about how browsers implement tags like <video> with all the controllers or <input> which changes based on the type attribute. We can never see any HTML code for these implementation and yet they are shown. How? That is when I stumbled upon this blog by Dimitri Glazkov which explains beautifully the concept of shadow DOM encapsulation used by browsers to implement such tags.

However, none of the browsers allowed developers to write their own custom shadow DOM (though google chrome had a v0 version implemented). I stumbled upon shadow DOM again while looking at an issue in jQuery to fix. So now, since 2018, most of the browsers have started supporting shadow DOM APIs and hence jQuery needed to implement support for that too.
So, what is this shadow DOM and why do we even use it?
What's a DOM? W3C specification describes it as "a method of combining multiple DOM trees into one hierarchy and how these trees inte…

What to expect from GSoC?

If you were searching for a post about how to get selected in GSoC, and landed on this blog, you might be a little confused by the blog title. Because, well, this blog isn't about how to get selected in GSoC, or as many have sadly started saying, how to "crack" GSoC. There are plenty of blogs out there addressing that.

In this blog, I am going to write more about what you should expect from GSoC. And given that the applications for GSoC are about to start, it is high time you get your expectations right if you actually want to get the most out of it. So let's get started.

1. Don't "Crack" GSoC Unlike many other computer science and engineering programs, there is no pill that you take and you magically get selected overnight. Nor is there a particular curriculum or book that you can read over and over and practice and get selected.

Getting selected in GSoC is a gradual process that needs lots of patience and contribution and the slow but steady accrual…

iTerm + zsh + tmux for your MacOS

Being a linux user for most part of my developer life, the most important thing of my life is the terminal (or shell or command line or console or whatever you want to call it) followed by text editor. Here I am going to talk mainly about the terminal (yes, I am just gonna call that throughout). So, when I started using a Macbook, the first question (apart from when to use CMD and CTRL) was which terminal and how to set it up with zsh and tmux. So I am gonna talk a little about that.

What's the preferred unit in CSS for responsive design?

Obviously, it's %. What a stupid question? Well, you can sometimes use em maybe. Or, maybe vh/vw.  Well, anything except for px for sure.

Sadly, the answer isn't as simple as that. In fact, there is no proper answer to that question and depends a lot on the design decisions taken rather than a fixed rule of making websites responsive. Funny thing is, many times you might actually want to use px instead of % because the later is going to mess things up. In this blog, I will try to describe some scenario's when each of the units work better in a responsive environment.

PS: All of this is mostly my personal opinion and working experience. Not to be mistaken as a rule book.

FOSSASIA 2018: Conference Report

Image
FOSSASIA 2018 was my 2nd FOSSASIA conference and this year it was at a new venue (Lifelong Learning Institute), and for a longer time. As always, there were a lot of speakers and a lot of really exciting sessions. Last year I was a little confused, so this year I planned earlier which all talks to attend and what all to do.

It works in Firefox, but not in Tor Browser

In today's world, where websites play a major role in providing various technical services to users, web developers have an important role. Though the war between back-end v/s front-end is never ending, nonetheless we all can probably agree on the fact that front-end does provide the non-tech users with an interface so that it becomes easier for them to use the back-end functionalities. Thus, the great problem of making front-end easy to use while also looking good comes into play. With the advent of the web, web technologies have also advanced a great deal. One of them is definitely CSS. CSS now has enough power to create a really interactive decent looking website only using it. With attributes like filter, masking and so on, you no more even need photoshop to change your images every time; with the help of grid-layout and flex you don't need to bang your head about laying out items properly on your webpage properly. Now you must be wondering why am I telling all this and n…