I always think that I am a Magpie developer. I don’t know if others do this often; But, most of the times, I switch between my IDEs, trying out new frameworks ( even though it doesn’t solve most of my problems ).
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.
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.
Here, we’ll see how to achieve some productivity improvements by effectively using these tools.
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 ).
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.
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:
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.
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
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.
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:
- Desktop notifications in chrome
- I don’t need to check my phone whenever any message is arrived. The chat window is in the right corner of my screen.
- The main one: I can type as fast as writing an email or using a chat application.
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.. :)