Model-View-Controller Design Pattern in Play

This week’s module was rather an interesting one.  It was the hardest module to tackle on so far because of Scala integration within the Play.  However, the dynamic nature of MVC amazed me in so many ways.

WOD #1: Digits Mockup

We were to create a mock up version of Digits application using the Play framework.  I’ve done similar WOD before so the activity itself wasn’t too hard.  It just required me to reference to Bootstrap documentations for certain things like table and such.  This WOD took me about 24 minutes to complete.

WOD #2: Digits Form

We were to take an input from New Contact page and display it on the Play console.  I was not able to complete this exercise on my own since I am still a beginner in the web development field.  I referred to Dr. Philip Johnson’s YouTube video for guided help.  It was confusing to be honest because I had no idea what to do and how different programming languages interact with each other in the project.  This required me to watch the video over and over.  When I finally understood why things are done in certain ways, I was able to finish the WOD in about 26 minutes.

WOD #3: Digits Form Validation

We were to validate the input given on the New Contact page for this WOD.  I had to watch Dr. Johnson’s video first again as I had no idea what to do.  At this point, I felt like this module was a matter of getting familiar with the syntax and the interaction between the languages, or at least that’s how I felt.  It still confused me as to why we need to use a combination of Scala and Bootstrap together to display error messages.  I was able to finish the WOD in about 28 minutes.

WOD #4: Digits Model

We were to create a model so that contact information submitted by users can be displayed on the Index page.  This was my first time creating a model and a database (more like a data structure).  Just like the previous WODs in this module, I referred to the video and was able to quickly learn from it.  This WOD was relatively easy compared to others because of the use of Java.  I was able to finish the WOD in about 23 minutes.

WOD #5: Digits CRUD

We were to create CRUD (Create, Read, Update, Delete) application without the deletion feature.  I learned about how user ID is used in (pseudo) databases and I didn’t find it that difficult to complete this WOD.  I completed this WOD in about 22 minutes.

Conclusion

This week’s WODs were very difficult because I have never worked with multiple programming languages at once for a project (LabVIEW and C++ combination doesn’t count!).  What made it really hard was that I am still new to the web development.  Sometimes, Play framework would violate some of my conventional thoughts on programming.  But after doing the WODs multiple times, I feel more comfortable creating my own MVC based websites.

The Beauty of Bootstrap

I’ve heard a lot about Bootstrap from my IT/CS major friends and the ‘beauty’ of it.  I never knew what it actually was about until this week.  All this time, I thought modern web UI designs were written from scratch using CSS and HTML combination.  Well, Bootstrap is still a CSS but rather a  framework created for others to adopt.

Using the Bootstrap would have made my life easier for previous week’s WODs, but it is more beneficial to learn the basics before moving onto systems like the Bootstrap.

WOD 1: Bootstrap BrowserHistory

We were to modify previous week’s A History of Browsers to use Twitter Bootstrap 3.0.  Since we already had the base code, it was relatively easy to convert to a new page using the Bootstrap.  It took a few tries to understand the basic concepts behind the Bootstrap.  This WOD took me about 15 minutes on the first try.

WOD 2: Responsive Kamanu

For the second WOD of the week, we were to reimplement a portion of Kamanu Composites website using the Twitter Bootstrap.  Reimplementing a portion of the website wasn’t much of a struggle.  I was able inspect page elements using Internet Explorer 11 instead of Chrome.  It did take me quite some time to find the info I needed for CSS but I was able to finish the WOD in about 41 minutes.

WOD 3: Responsive Castle High School

Last but not least, we were to give Castle High School website a makeover by taking the old design and modifying it to conform with responsive design.  I have to say, this WOD required a lot of copy and paste for links.  On my first try, I did not finish the WOD on time as I was not able to properly display the website for mobile.  I went through the screencasts again to see what I missed and eventually found a documentation about it through one of the bookmarks we created.  On the second try, it roughly took me 42 minutes.

Conclusion

Using Bootstrap definitely helped the process of creating a webpage.  Additionally, it allows us to have responsive web design without the need of additional coding on our part (relatively).  I may consider making my own website utilizing Bootstrap in the near future out of the classroom environment.

Web UI Design Basics

Web development is an alien subject to me.  I had very minimal prior experience with any web related coding.  The most I did was for MySpace back in 2007 for simple text editing.  I didn’t really grasped the concept of HTML back then.  Which might be why I prefer embedded programming over web development to this day.

I never thought I would revisit HTML (or any web development subject, for that matter).  Ever since the introduction of HTML 5 standard, I got interested in web development.  Now here I am, learning HTML and CSS for a software engineering class I’m currently taking.

WOD 1: Browser History 1

The first WOD was straight forward, even when I am completely new to the web development.  We created a simple webpage containing the history of various web browsers such as Internet Explorer, Firefox, and Chrome.  The first iteration took me about 21 minutes which isn’t a stellar time but I was able to finish it before the DNF time.  Second iteration took me about 16 minutes because I had Google’d less for other online resources.  Through this, I got acquainted with basic editing using HTML for a web page.

WOD 2: Browser History 2

The second WOD was completely foreign to me as I have never encountered CSS before.  I had to refer to a lot of different online resources to get an idea for CSS.  This WOD particularly took longer than other ones.  The first three tries, I DNF’d.  I just was not familiar with syntax and some ideas behind HTML and CSS integration.  On the fourth try, without referring to other references, I was able to to complete the second WOD little under 15 minute mark.

WOD 3: Browser History 3

The third WOD was a little familiar to me thanks to the second WOD that I completed four times.  But by no means it was easier to complete.  This third WOD did not provide a clear instruction (for a person who is completely new to this).  So it came down to a lot of reference to Google and trial and error until something worked, without breaking the page.  I have learned about different ways to create navigation bars.  However, I wouldn’t be able to code one if I was asked to do so right now.  I need more practice to get familiarized with HTML and CSS.  It took me about 17 minutes 30 seconds on my second try.

Conclusion

This week’s WODs were interesting to do.  Every aspect of it were completely new to me.  Some were challenging without clear cut instructions but that is what search engines are for, I guess.  This was a good learning experience for me as I was interested in developing websites for some of my side projects.  HTML and CSS were easy to learn.  Organizing and making sense out of all the syntax (wall of texts, literally) was a bit challenging for me.

 

Beauty of Coding Standards

Elements of Java Style was an interesting book to read.  The book lists code styling conventions for Java and it should be a must-have for any programmers.  It contains 108 style rules to follow, which makes your code look standardized and easier to follow for external developers.  This book would be really help to start someone off in Java, not requiring new learners to adjust their coding style.

This week’s practice WOD (workout of the day) involved Scribble, repository found in GitHub, where we had to correct any styling errors.  For the software engineering class I am currently taking, we followed 108 rules found in Elements of Java Style and additional 19 rules used for this particular class.  We were given a custom checkstyle.xml which we used for CheckStyle in IntelliJ.  We did a similar practice WOD in class, so I was able to correct all errors within 17 minutes.  This time could be reduced if I could find a way to set the custom rules as default for the CheckStyle in IntelliJ.

I personally think this athletic software engineering approach is allowing me to quickly obtain skill sets introduced and master it in relatively quick pace.  And the fact that there is a time pressure allows me to work quickly, driving me to improve my results wherever I can.

Honestly, it will take me some time to memorize all the style rules for Java.  Without the custom rules provided in xml file, I wouldn’t have been able to finish the WOD in 17 minutes.  Maybe one day (very soon, hopefully) I will be able to write a code with 0 styling error.

Experience OSS Licenses

Open source software is meant to be cannibalized by developers other than the original authors for potential improvements to the code published.  However, this good intention could threaten the livelihood of the author in legal terms.  In order to protect oneself, or to receive credit where is due, author of the software could utilize one of many open source licenses.

There are many three main types of OSS licenses: MIT License, Apache License, and GPL (v2 or v3).  MIT License allows other developers to freely use the source code as they wish as long as the author is credited and is not legally liable.  Apache License is very similar to the MIT License, however, it grants legal obligation to the developers by the means of granting patent rights from authors to external developers.  GPL License binds external developers to release their own derivative work under the same license, thus promoting continuous improvements to the code base.

If I were to publish an open source software, I would probably pick the GPL v2 license as it encourages other developers to improve the source code in a way or another.  Additionally, the software stays open source even though derivative work based off of original source code is developed.  Personally, I believe in open source projects and we as software engineers should promote the open source movement.

How to Ask Questions the Smart Way

People ask questions everyday.  Questions are asked in many forms.  However, there is a “smart” way to ask questions and not so “smart” way to ask questions.  How to Ask Questions the Smart Way describes the way one should ask a question if they want to receive positive feedback when seeking for help.

The following two examples demonstrate what is a “smart” question and what is not a “smart” question.

Example 1:

This question can be found here, where the poster asked:

Give your buttons some behavior. change the foreground color of the Button that was clicked. Choose at random among Color.RED, Color.BLUE, Color.YELLOW, etc. To change the color of the Button, call setTextColor on the Button that is passed to the event handler. However, note that although Button has a setTextColor method, View (the parent class of Button) does not. So, you have to cast the View to Button before calling setTextColor.

This question is not a “smart” question in many ways.  As some of the commenters speculate, it seems the poster has just copied and pasted a portion of assignment onto Stack Overflow.  The poster was expecting someone to do their own assignment for them rather than seeking for guidance or showing any sort of effort that was put into this particular problem.  Additionally, the poster did not even state what the problem was, as demonstrated by the following comments:

What you want to ask ??

College assignment?

It is clear that no effort was put into the question, resulting in negative feedback from the online community.

Example 2:

This question can be found here, where the poster asked:

Given a software system written in Java consisting of three layers, A -> B -> C, i.e. layer A uses layer B and B uses layer C.

I want to make sure that a class of one layer only has access only to classes of the same layer or its direct dependency, i.e. B should be able to access C but not A. Also A should be able to access B but not C.

Is there an easy way to enforce such a restriction? Ideally I want eclipse to complain at once if one tries to access a class of the wrong layer.

The software currently uses maven. Therefore I tried to put A, B, and C into different maven modules and to declare dependencies properly. This works fine to prevent B to access A, but does not prevent A to access C.

Next I tried to exclude C from the dependency to B. This now also prevents access from A to C. However now I am no longer able to use copy-dependencies to collect all transitive dependencies needed for run time.

Is there a good way that allows me a clean separation of layers, but also allows me to collect all needed runtime dependencies?

This is a good example of how to ask questions in “smart” ways.  The poster described their problems, steps taken to mitigate the issue, and how they went about it.  As seen in the post, this particular question was well-received and garnered several responses.  The poster demonstrated their prior attempts to resolve the issue, thus showing the willingness to learn.

If you could demonstrate your willingness to learn, online community will respond positively and try to guide you to answer.  It shows that professionals are willing to help people who are willing to help themselves.  Ask specific questions.  Show your willingness to learn.  Show that you put in effort into the question.  You may not always get the answer you were looking for but the online community will be more willing to help you out.

Experiencing the Three Prime Directives of Software Engineering

Overview

is an open source Android library that provides developers the ability to easily create application sliding menu like the one found across Android applications published by Google.  This library is free to use for either commercial or private use given that the project is cited and license is included in the application.

Prime Directive #1: The system successfully accomplishes a useful task

The SlidingMenu satisfies the first prime directive of the software engineering.  This Android library allows developers to create sliding menus, inspired by applications such as Facebook and YouTube.  Sliding menu is intuitive in a user experience sense that end-users do not have to scroll the entire application to look for options they are seeking for.  Some of the popular Android applications such as Linkedin, 9GAG, Foursquare, and Rdio utilizes this library for their services.  Therefore, the first prime directive is satisfied.

Prime Directive #2: An external user can successfully install and use the system

Installation instruction can be found in README.  All that is needed is to import the SlidingMenu library then add it to project as one of the dependencies.  The README file also provides instructions on how to integrate into an existing project easily.  Therefore, the second prime directive is satisfied.

Prime Directive #3: An external developer can successfully understand and enhance the system

The library does not contain extensive documentation to provide explanation for other developers to easily contribute to the project.  Only form of explanation of code was done through the comments within the code.  However, the project can be forked allowing other developers to enhance it for their own purposes.  As a result, the third prime directive is conditionally satisfied because external developers can successfully understand and enhance the project but with no documentation to aid the process.

Placeholder