Initial Markup & UI Code Trick
A few days ago, I shared the screenshot to the left as part of an initial mock-up for the MOOVPAD Web App and the MOOV program view UI that allows users to view an existing program and make any changes needed. Although I didn't share any updates regarding this UI screen yesterday, I did spend some time thinking about how to optimise the UI code.
First, I needed to simplify the markup itself by reducing the number of elements, and so I generated the graphics seen in the larger screenshot above and the image to the right. By adding the month and weekday labels to the month graphics, it meant I could remove these from the markup. So... that's a bonus. Second I needed to find a way to reduce the overall UI code required. And so I used the approach seen in the markup screenshots below. Notice how each month will have "onmouseover" and "onmouseout" events unique to that particular month, but then all the task/method calls are the same even across different months?
This method allows me to use a total of 24 tasks to set the month context, and only 42 tasks to select the particular box within the month using standardised event handler tasks. And so we go from needing 42 x 3 x 12 = 1,512 tasks... to just 42 for the days and 24 for the months. Of course the code within the tasks will also be optimised further, but that's a pretty big chunk of code-savings, yeah?
Work continues 🙂
Stay awesome,
EMH
HOW MOOVPAD IS BEING BUILT
For the overview of how MOOVPAD apps are being developed, the reasoning behind particular decisions during development, policies, and more in relation to all the technical things, please see the link to the left.
This will be an ongoing work in progress, and will always be linked to the bottom of each upcoming Blog post.