GSOC15 adventuring

Create Page

I'm starting to refactor the Create page for Weblogo. I'll start laying out the div containers. I'll be testing a different a more horizontal layout vs. the current vertical layout. I pushed the updated documentation for the manual page to github.

Laying out manual page

I stepped back from working on the fixing the jquery plugin on the example page's images to refactor the manual page. The new layout uses horizontal definition/description lists tages instead of li, ul, and table tags. The result is improved readability and scanning ability for the technical details of WebLogo, and the html is much cleaner to read as well. The code is working correctly, and the page scales properly with the lists, codes snippets, and table.I will push this code to github after I finish prettifying the html code and complete the documentation of the divs. I'm quite happy with with the results of this page.

The example page's viewport and image pop-out is functional, but not yet to my satisfaction. The viewport seems too large for the image and the popout image doesn't seem zoom far enough. I 'm unsure whether I should just keep looking for a more satisfactory plugin or keep tweaking the one currently in implementation. My goal this week is to start working on the "Create WebLogo page". This is the critical front-end page, and all the button and forms need to work. There are many more divisions and dynamic details, such as buttons and dropdowns that need to be refactored and documented.I will be including the dropbox access features on this page. I expect this page will occupy most of my time.

Thinking about APIs and product development

The talks about APIs was very informative for my WebLogo project. The WebLogo is not currently compliant with the RESTful API methodology. Also clear and easy-to-read documentation of the API is critical for third-party developers to adapting the code. The talks inspires me to ask the main author about the API and whether making WebLogo's API RESTful would be possible within the GSOC timeframe or if this would be a later project.

Last week, my class was invited for a tech talk about product development cycles and scope with an Uber project manager, which made me understand PSU's GSOC application requirements . The blog entries are like "stand ups", short meetings (where engineers stand instead of sit) to check in with the team on progress and blocks, with our PSU mentors. The speaker also talked about the "iron triangle" of product development: scope, time, and people, and if you make a change to one aspect, you change the other two. for example if you thinking about adding a feature after you write your timeline (your product specs), no matter how cool it is, you'll be spending extra time that you didn't plan for and might not complete the project because you can't add extra people to your one-person team.

These talks help me keep my project in scope and give me a new perspective on how PSU and GSOC grows a person's experience with professional software development environments. I really appreciate the PSU's guidance with GSOC!

Learning about APIs

I'm still working on the implementing responsive images correctly. This might be the part where I throw my computer out the window. But since I don't have another computer to spare, I contacted a mentor who has a lot of experience with javascript. She agreed to meeting up to look over my code if I get dishearteningly stuck (which is not today! ...yet). Also I'm going to a talk about APIs for an understanding of how they work and best practices for documentation.

responsive images

Working on responsive images is proving tricky. I corrected the viewport and then broke the zooming of the images. I read the documentation and customization features for fluidbox. I will continue debugging to get this to work.

Scaling examples

I decided to work with the fluidbox jquery plugin. Making the images responsive require more work. I made progress in zooming the images, but the examples aren't scaling properly. Also the zoomed images are being interrupted by other images and text. I think the viewport for images is not completely implemented either. I'll be playing with the layout and the plugin's javascript implementation.

image resources

I'm working on implementing the zoom features on the images on the examples page. After researching options over the weekend, I selected a "lightbox" jquery library. However, implementation needs to be debugged though. The example images do not zoom yet.

laying out examples page

I'm laying out the examples page for the initial html & bootstrap classes. The example pages pass dna sequences to the WebLogo engine, so the code behind the scene the html is more difficult to navigate. Sectioning the page into workable divs will take more time than I expected. While i'm updating the html, I have to make sure not to break the buttons that link to WebLogo.

Dynamic Examples

I'll be working on coding the examples page. In addition to updating the html, I'll be adding javascript elements to make the images dynamic. If the static graphics scale to mobile size, users won't be able to see the details of the sequence alignments. I'll be adding javascript listener events so that when users click on an example image it will scale back up to a larger size so the sequence alignment details will remain readable.

css vs. frameworks

The main author opened a discussion about using frameworks for the responsive design features. He has a general reluctance toward adding dependencies because the application becomes less independent and more reliant on other people's maintenance of code. However, the benefits are that tweaks and fixes for different devices and browsers are built in, and there is a user base that maintains and debugs the code. Writing responsive CSS for the front end is possible but would take a long time to implement and test. I offered to put together a test page as an extra bonus project. However, I think I have the go ahead with bootstrap. I added comments to the html index page to help sort the div demarcations, and I pushed images and examples to github.

Syndicate content