Undefined NULL - by Shidhin

Scribbles of a UI developer, JavaScript enthusiast

React Redux Part 1 : Implementing a Counter Component in React by Using State

| Comments

The frontend world is moving so fast these days. The hottest trend is React along with the Flux pattern. Flux is a architectural pattern introduced by Facebook to solve some of the problems in large data centric applications. Facebook introduced flux as a concept, but there’re number of flux libraries born from then. Today we’re gonna talk about the most popular library in that category named Redux.

iTerm Tips and Zsh Plugins for Better Development Environment

| Comments

This post is about the two tools I use regularly in my development environment: iTerm and oh-my-zsh. iTerm is a mac terminal replacement and zsh + oh-my-zsh is an excellent combo to replace the bash shell with some cool stuffs.

iTerm and Oh-my-zsh

Here, we’ll see how to achieve some productivity improvements by effectively using these tools.

iTerm

As I said already, iTerm is a mac terminal replacement. It comes with ton of features missing in default terminal. Below, you will see some of them which made me choose iTerm.

Multiple tabs and split screens

Often we have to work with multiple terminals. iTerm support splitting the current terminal panes vertically/horizontally and adding any number of tabs. The shortcuts for splitting the terminal is CMD+D ( for vertical ) and CMD+SHIFT+D ( for horizontal ).

React TDD Example: Unit Testing and Building a React Component With Jest, Gulp and React Test Utils

| Comments

Update Feb 9 2016 : The ReactJS version is bumped to 0.14 in the seed project and updated the article accordingly.

React and Jest for TDD

ReactJs has attained lot of momentum since its initial release in 2013, and became the best JavaScript library for developing rich UI interface. React also popularised different concepts like Virtual DOM, Uni-directional data flow and Componentization in the front-end community. As of today, React has more than 20,000 stars in Github repo, and actively maintained by the Facebook team.

As I said already, React is a solid piece of work from Facebook. Any solid software will be built with testability in mind; And React is not an exception to that. Facebook built React with complete testing support — They even released their own testing framework named “Jest” and React Test Utils for unit testing React components.

Here in this post, we’ll see how to build a react component in TDD approach.

Repeating Multiple Elements Using Ng-repeat-start and Ng-repeat-end in AngularJS

| Comments

When the AngularJS website is released, the TODO example in their website was one of the main attractions. The example was simple and just below 30 lines of code ( Here is the link if you want to check ). The whole trick behind the scene was done by a directive named ng-repeat, as shown below:

1
ng-repeat="todo in todoList.todos"

Till Angular 1.2, ng-repeat was designed to work on a single DOM element. In other words, ng-repeat can repeat only the DOM element on which it is added. Therefore, some of the situations — see below — lead Angular community to think about modifying ng-repeat in version 1.2. In the next section, we’ll see the problem with ng-repeat and the solutions introduced.

Implementing a Curry Function in JavaScript Using TDD

| Comments

TDD

TDD stands for Test Driven Development. To those who don’t know what TDD means: In a typical TDD Environment, a developer start with a basic test case describing the minimal requirement for implementing the module. Then he writes the actual implementation code for making the test case pass.

Next, another test case is written for a different expectation for the module, followed by writing the implementation to make the test pass. This process goes on till the all the expectations for the actual module is implemented.

This way of development ( driven by series of test cases ) is called TDD.

Setting up the tools

Here we’re going to use Mocha as the unit testing framework. For running the tests, we will be using Testem.

Remote Debugging Localhost With Weinre ( and HTTPS Too )

| Comments

Debugging mobile websites/applications is a real pain. No debuggers for Javascript, no console logs, cannot inspect html/css, and so on.

Sometimes I think that I am debugging like the old IE6 days where I had to put alert in every line of the code to find out where the actual issue is. If you also came across the same, you know the pain.

Lately, Google chrome came for the rescue. They relieved this pain by introducing remote debugging support in chrome mobile. Chrome remote debugging was a real life saver, where we get the same chrome devtools connected to the webpage in mobile browser. And, We can debug like the way we do it in desktop browsers.

Whatsapp Web Client: Hide/blur Thumbnail Images Preview

| Comments

The most anticipated Whatsapp web is here finally. If you haven’t seen it go check it out: http://web.whatsapp.com. I really like it because of these reasons:

  1. Desktop notifications in chrome
  2. I don’t need to check my phone whenever any message is arrived. The chat window is in the right corner of my screen.
  3. The main one: I can type as fast as writing an email or using a chat application.

A Brief Walk-through of the Ng-options in AngularJS

| Comments

Using ng-options was bit tough for me. I banged my head couple of times when I actually used ng-options in my code. And most of the times, I had to google and find out how to make it work. Looking the AngularJS documentation didn’t help much, as it’s less informative and doesn’t have much code samples.

But, I could find lot of Stackoverflow links, and infact I understood the concepts after reading those links only. Here, finally, I decided to write a blog posts about what I learned. And you know, this post is going to be mostly useful to me more than any one; because next time, I don’t need to google it.. :)