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.
Kelvin Au
I have been planning to write more articles, but in last few months I was quite busy on working for the project 1000class.com, which is a platform that helps students in California to find all the transferable courses with continuous up-to-date data from 100+ colleges. The project is quite stable now and I have more time to write more articles (there is a list of items I want to write….). Anyways, let’s get to the topic.
Live Demo: Circular Wave and Sunburst (Remember to adjust your audio first)
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 – A centralized platform provides online course information of California community colleges, and GPA calculators to track course progress in transferring to university. Now it’s on here.
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?
My redesigned website is ready for release! I want to start a blog to write technical articles, share interesting findings, and mark my achievements – having a place to view all the achievements, as a gamer, that’s what we usually love (I am also starting a project for helping gamers. Stay tuned!). So I have started to redesign my old website.