It was a windy day in Vancouver, and I was watching the trees slightly bending down through the windows. It was the memory leak of a complicated component that struggled me, and I had to walk away to get some fresh air and clear my mind for new thoughts. The problem would be easier if the component were not that complex and tightly coupled, and the issue would be identified easily. Refactoring the code was necessary, but I felt like I was just one step away from finding out the root cause of the leak.
Visualizing the data in a dynamic and continuous way gives the real-time feeling to be in sync with the data status, especially true for audio. I was looking for a JS library for circular audio wave, which was in a form of a circular continuous line that changed when the audio frequency changed, but I couldn’t find one. There is a great list of audio visualization libraries on github called awesome-audio-visualization. I couldn’t find anything that fit my need there. Therefore, I decided to create a library for this purpose.
I still remember how difficult it was when I tried to search for the courses that were transferable to university. I had to go to different websites, talked to school counsellors, and planned my courses well to achieve the required GPA. If there were a platform that could gather all these tasks and information at one place, that would help my first-year course search journey a lot. So here is the platform I have been building for my friend Brian who initiated this idea — 1000class.com. A centralized platform provides online course information of California community colleges, and GPA calculators to track course progress in transferring to university.
Recently I experienced a weird behavior of an old AngularJS directive which simply added a wrapper DOM using jQuery wrap function together with ngRepeat. Of course there are many better ways to provide the same functionality without use of jQuery, but this is not the focus of this blog. I want to show the reason behind why jQuery is not recommended to be used with AngularJS for DOM manipulation. The demo is set up on JSFiddle here. The directive just calls ‘elem.wrap(‘<div class=”wrapper”></div>’)’ to wrap the DOM, which will make the text black; otherwise it will be in red. Then an element using this directive is rendered with ngRepeat on an object to show two texts. A button “Reset allTexts” is used to clone this object and reassign itself. Sounds easy enough and there shouldn’t be any changes after resetting the object? Try it. As you can see, the DOM structure is changed and the texts are now not inside the wrapper DOMs. What happened?