Posts

Showing posts from 2015

Adding and deleting Angular directives dynamically (Part 1)

Image
There comes a time in the development of angular applications when you get into the nitty -gritty of directives. Yes, of course, it was the first thing slammed at you when you started with angular and you soon began to enjoy using ng-this and ng-that. But now writi-'ng' one of those and manipulati-'ng' them dynamically? OMG!! Its like when someone threw this at your face. At first you say "Whaaaa?"  Then you lick a little off and say "Hmm!"  Then you lick some more and say "mmmmmmmmmmmmm" And then you're asked to make something like that. From scratch. My reaction? Alright alright, getting to the point! Ill use this post as the first of three posts, each post covering the following: 1. Write a directive (duh! aren't these a gazillion posts already?) But Ill be using this directive to explore # 2 and #3, hence the introduction.  2. Add a directive dynamically .  3. Remove a directive dynamically . Th

d3 Collapsible tree vertical

Image
I have just finished playing around with M. Bostoc's collapsible tree. Here is a link to his original version. This tree has a right to left orientation, and I wanted a top to bottom. He does provide an option for tree orientations here .  Sources showing how to vertically orient it online, showcase a very simple non interactive tree.  SO i just changed his original code a bit, just small x, y tweaks (mainly the diagonal and the node transitions). Quiet simple actually. And this is what it looks like.  Also including the code and the hierarchical JSON object used.  Hope this helps. :)

Weave Analyst note #2

Note # 2 Purpose of these notes is to serve as personal logs as i continue modifying the Weave Analyst. Weave Analyst Using the Webstorm 10 IDE. Trying to deploy a web application. Webstorm uses its own built-in server port, but I wanted to deploy it to the Tomcat server. Quick fix : move the development folder in Tomcat >> webapps >> Root >> Git updates from this new directory TODO : write build files and deploy to the server. 

Weave Analyst Notes : #1

Weave Analyst Notes : #1 Purpose of these notes is to serve as personal logs as i continue modifying the Weave Analyst. Weave Analyst ng-if VS ng-show So my angular app was taking longer than i expected it to load yesterday. It was a tiny app, not more than say 50 lines. Turns out i was running into an issue with ng-if. ng-if does something depending on the true or false evaluation of its expression. Turns out ng-if removes or recreates an element from the DOM, and recreates the DOM tree from scratch. Every removal destroys the old scope and every recreation creates a new one. Not good if ng-model and ng-if together are inheriting something from the parent scope. Not good at al!! On the other hand ng-show and ng-hide simply modify the CSS(namely the display property) of the DOM element. The element is never destroyed. Additional documentation :  ng-If

Embedding gist code in Blogger

Image
Embedding gist code in Blogger Moski provides a really simple and quick way to do this here.  Awesome.  However I would like to add that the source for his gistLoader. js file gave me problems. It took me forever to understand how to do this right. And if one is new to blogger or not very proficient, things seem to take forever. Ok! Ok! Giving you a quick solution. If you're having problems getting Moski's code to work for you after following all his instructions, try replacing the github source he mentions with another one. So instead o f <script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"> Use another source like : <script src=" https://s3.amazonaws.com/ moski/gistLoader.js "></script> </div> HTML content of blog should look like this Worked for me. Hope it works for you. 

React Day1

Started with React finally. :) Just getting hands dirty. Theory and understanding will follow. Main goal of React help develop large apps which handle data that changes continuously over time. Whenever underlying data changes React automatically updates only the specified parts that have changed. Starting with React.render() requires: a single component HTML element or custom component the parent element to mount to optional callback function tried this and it works!!