Sagar Ganatra's Blog

I have been developing applications using React and Redux for quite some time now and I feel there are several starter kits out there. Although some add too much of boilerplate code, some include several libraries (to make it one kit that includes all) and some take the route of adding minimal boilerplate to include only the required libraries. I plan to write about these React-Redux starter kits/boilerplates in the coming weeks. This post focuses on a starter kit called Rekit. Rekit provides basic scaffolding and comes with a CLI that allows you to add features to your React application. Rekit focuses on application structure. It divides the application in terms of features, wherein each feature acts as a decoupled component and then assembled at the root level.

Hugo provides a good workspace for creating layouts and content. I'm very much satisfied with the options available to customise the site. However, Hugo does not have a say in how CSS and JavaScript should be structured so that it can be included on our site. In Hugo, the DOM nodes are already created and we need a mechanism which we can employ in adding event listeners to these DOM nodes. SPA frameworks like Angular and React, create DOM nodes and define event listeners in the controller of the component. To attach event listeners to an existing DOM tree I came across a JavaScript framework called FlightJS . It's a framework created by folks at Twitter that helps in adding behaviour to the DOM nodes. It's a minimal framework which does not dictate how the DOM nodes should be rendered nor it dictates the other aspects of the web application, such as routing, request/response handling, structuring data so that other components can consume it etc. FlightJS provides only a m...

Layouts in Hugo allow you to define the how the posts in the content directory would be displayed. In addition to defining layouts for the content posts, you can define the layout for the home page, define partials and include it in different layout templates, also define the default layout to be used in case the matching content type layout is not found.

Over the last few weeks, I've been looking into a Static Site Generator - Hugo. A Static Site Generator is useful if you're building an application which does not require dynamic data to be served. A blog can be considered as a service which serves static content. Instead of storing the content in a database field, the content is stored in a file (HTML file). Thus when a page is requested the content is served immediately instead of it being generated on demand; resulting in accelerated response times and thus better user experience.

Last week I looked at the use of let and const keywords in ES6 . This week I have been looking at Arrow function expressions, which enable you to create functions without using the function keyword. They provide a shorter syntax to represent a function. I assumed that arrow functions only provide syntax sugar and all function expressions can be replaced with the new syntax. However, the scopes -  this and arguments refers to the enclosing scope and not that of the caller.

I've finally started to learn EcmaScript 6 (ES2015) and thought it would be good to start writing about it as I learn. There are a bunch of features in ES6 and a good place to start would be to learn the use of let and const . I haven't deep dived into all the features yet, but I eventually will. This post is about the use of let and const keywords to create variables. I'm a big fan var scope, but I think I'm going to abdicate var scoped variables in favor of let and const .

There are many UI frameworks out there - Bootstrap, Foundation, Semantic UI etc. I have used Bootstrap in the past, however I'm very much inclined towards using Material Design for Angular. There are many good reasons to use Material Design over Bootstrap or any other framework that you might consider.