Web page design / formatting is not easy, a look-simple effort of moving search box and pagination controls from top of page to fixed header took 2 days or 8+ hours.
Motivation
as a tool enthusiast, I am addicted to useful and easy-to-use tools such as google, gmail etc, and because of this addiction, I spent 10+ hours to put out 2 fires over the weekend, both fires are related and were started from my motivation below.
I am therefore passionate to creating such a tool if possible. With that in mind, one feature I have desired for Buytition Quote List View and Message List View for a long time is to move search box and pagination controls to fixed header section. Before this change, both search box and pagination controls are at top of the views and if you scroll down the list, both of them will be gone until you go back to page top, but both controls are so useful and I feel very inconvenient that I had to scroll back to top to either modify the search term or scroll to next or previous page.
But for a long time I was busy with something else and did not have a chance to get to this wishful thinking, until recently, my TODO list is finally cleared somehow to an extent that on Saturday morning I woke up and felt it's a good time to get this long-waited wish fulfilled..
Fires and Firefight
First of all, I am not a front-end professional but I do have experience modifying and improving a web application based on AngularJS.
My previous Front End effort with AngularJS application left a legacy problem which I wanted to solve first because I believe solving that problem will not only make this effort easier but also make subsequent front-end effort easier. That problem was CORS issue when using `ng serve`, I like ng serve feature from node.js as it makes developing AngularJS applications much easier and more convenient, however, one problem I encountered with ng serve for more than 1 year was inability for ng serve http://localhost:4200 to access API served on another port of same server.
This fire has existed for more than 1 year, I know it can be put out, but I did not have a good idea of how to put it out and it was not that urgent to put out, so it was there for that long time. Now I have determined the urgency to put out it, I focused on solving it and that focus did pay off, after a few hours of research and try, I found a solution that problem by doing
ng serve —-proxy-config proxy.conf.json
thanks to this online tutorial.
That did make my life of making change to AngularJS application easier than before and then comes the 2nd fire.
For the 2nd fire, I do not want to elaborate too much on it except acknowledging that, as title indicates, it's caused by TD not taking full width of TABLE which is caused by mysterious incorrect configuration of Cascade Style Sheet which I do not know the real root cause up to now.
Lesson Learned
I want to thank Google Chrome to make it possible to solve this problem without being a CSS expert, and the way I solved it was to try different CSS styles to problematic TABLE element in Google Chrome until I see a satisfactory appearance.
If you run into similar problems or would like to learn more details of this story, please contact buytition@gmail.com
No comments:
Post a Comment