Slider Customization

Slider Flex Caption CSS

Since not all my posts will contain a feature image I had to find a work around that would allow the text content to show properly in the slider.  In order to do this I added a very tiny white square as my featured image.  When it first displayed the caption for the post was at the bottom and ran out of the visual area (couldn’t even see ‘Read More’ button).  In order to accommodate this I modified the CSS for the slider so that the caption starts at 20% from the top instead of its default of 40%; in hopes this will also work for future blog posts without a featured image.

I had to change a block of CSS which starts at line 235 in theme.css from:

	width: 800px;
	position: absolute;
	left: 50%;
	margin-left: -400px;
	text-align: center;
	z-index: 120;
	color: #fff;	

To the following:

	width: 800px;
	position: absolute;
	left: 50%;
	margin-left: -400px;
	text-align: center;
	z-index: 120;
	color: #fff;

It is worth noting that a caveat I have discovered is that this is insufficient for smaller screen sizes so I may have to become more ‘clever’ in my featured images; like I did for this post, when I can.

Why Develop a Tracker Web Application?

Ahh, it is so nice to have completed my Masters and be able to focus on some personal projects I have been pondering.  The first was this website and the second is a tracker application.  I have been using an Excel spreadsheet I store on Google Drive for tracking various things, which does work pretty well for just maintaining one long list of, for instance, the novels I have read and the novels I’d like to read.  When it comes to tracking items with more complex items like rounds of golf played and at which course they were played dealing with the relationships becomes a little more cumbersome though I could also implement this in a spreadsheet; however, I thought this would be a great opportunity to learn more about web applications.

The technologies I will be using to develop my web app are C#.NET, Entity Framework, and MVC for the main framework of the application.  I will also be utilizing CSS to style my application forms and views when necessary.  I am going to attempt utilizing a MySQL back-end, since my web host provides more storage for MySQL databases, which requires additional configuration from utilizing MS SQL when using Microsoft technologies.

Security is an important aspect of any application making it necessary to implement a login system for my web app.  The login form will be the first page a user sees when accessing the site.  The web app will test, when access to other pages are attempted, if a valid user is logged in prior to granting access to any other page and redirect to the login page for unauthorized users.

Once the basic create, read, update, and delete (CRUD) functionality is implemented I am going to generate various dashboards for the users to provide statistics and further information at a glance based on database records relevant to the user.  This will include elements like what was the last novel you read (and completion date) and the number of novels you read over a specified time frame.  Related to golfing this would include calculating your overall golf handicap, average score for 9 and 18 whole games, and a further drill down to information per course will also be available.  I’m thinking at least 5 rounds will have to be played for a handicap to be calculated for a given category and averages will always show as only courses you have played will be presented as options.  I may also show the number of different courses you have played and a map of where they are located.  Additional technologies I plan to use in accomplishing these tasks are Google Charts (Google Visualization API) and Google Maps API.

Theme Customization

Original Look

Ever since I decided to start up my own website (again) with the intent of having it for a long time I knew there were two key things I needed to do, besides the content itself. The first was to come up with my domain name and the second was to find a WordPress theme that I liked. I wanted the theme to contain some key features I was looking for as well to have a style that I liked. I spent time over the past month or so looking at themes and testing some I thought I might like before finally settling on Revera as a solid start to what I was looking for.

Revera is a free premium WordPress theme that contains many features that I was looking for. This includes being a responsive WordPress theme utilizing the Bootstrap 3 framework, custom menu, portfolio page template, and blog (which might not be so much a feature as ‘just is’). One feature it has that I am still uncertain as to how much I am going to like is featured images for your posts. I do like how they display prominently on the homepage to advertise new blog posts and display for portfolio elements; however, since I am not using it for photography there may be cases when an image in my post does not make sense, or that it should not be featured. I intend to utilize the portfolio section to showcase applications once a stable release is completed.

Since I discovered a theme that had a solid foundation for me to build off I progressed into performing some customizations to brand the theme for me and gain some additional functionality.

The first customization I performed was to ‘mini-brand’ my site by changing the colors to what I wanted, which was a darker shade of green as it is my favorite color. In order to do this I modified theme.css by changing the appropriate hex codes to the appropriate hex code for the shade of green I required.  Below the left hand side represents the hex code for the default color and the right hand side represents my color choice.  I also modified the color for the arrows on the homepage to match by modifying bg_direction_nav.png using MS Paint.

ed564b -> 339614
f96b61 -> 5eb42d
f4473a -> 308715
-> ff0000 (inColor)

Above, inColor, is a special addition I made as I wanted to use links on the homepage feature section which has a background color the same as the default link color.  In order to obtain this I added a child class for links called inColor:

a.inColor {
	color: #ff0000;

a.inColor:visited {
	color: #ff0000;
a.inColor:active {
	text-decoration: none;

I am not sure if I am going to stick with the red link color or not as  I plan to get some opinions on the look of red on green.  I at least have the CSS styles in place for if I want to change that color or have a different color for visited links.

Lastly I needed to add templates for full width pages, one with and one without a comment section.  In both cases I also did not want the page title to duplicate. I accomplished this by modifying the page template, page.php, and creating two new template files full-page-no-comments.php and full-page-with-comments.php.  The key here was stripping out the sections I did not need and in order to remove the title I had to modify the get_template_part function call to point to my new content template, which I called content-pageNoTitle.php.  The naming is important as you can see the parallel between the parameters passed and the file name (left and right side of the hyphen).  The function call becomes:

<?php get_template_part( 'content', 'pageNoTitle' ); ?>

You also need to add comments within php tags at the top in order for the file to be recognized as a template file when you upload it to the appropriate theme directory as follows:

Template Name: Full Page No Comments

Lastly I modified the contents of content-page.php by stripping out the header section and saving as content-pageNoTitle.php, accessed by the aforementioned function call, so it becomes:

 * The template used for displaying page content in page.php with no title.
 * @package web2feel

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="entry-content">
		<?php the_content(); ?>
			wp_link_pages( array(
				'before' => '<div class="page-links">' . __( 'Pages:', 'web2feel' ),
				'after'  => '</div>',
			) );
	</div><!-- .entry-content -->
	<?php edit_post_link( __( 'Edit', 'web2feel' ), '<footer class="entry-meta"><span class="edit-link">', '</span></footer>' ); ?>
</article><!-- #post-## -->

That’s it! Besides some basic text changes for various displays (i.e. blog section) that is all the code modifications and additions I made, to date, in order to get the theme to what I have envisioned for my virtual home.

Natural Language Processing

Initial Starting State

This application imports electronic medical records (stored in text files) from the selected folder and runs each file through the natural language process of:

  • Removing stop words
  • Stemming words
  • Creating an index

For stemming the Porter Stemming Algorithm is implemented to transform a word into its root form and contains six steps:

  1. Get rid of plurals and –ed or –ing endings
  2. Turn terminal y to I when there is another vowel in the stem
  3. Map double suffices to a single one
  4. Deals with –ic-, -full, -ness etc. endings similarly to step 3
  5. Takes off –ant, -ence, etc. in context of <c>vcvc<v>
  6. Removes final –e if the measure of the number of constant sequences between 0 and j is greater than 1, i.e. <c>vcvc<v> gives 2

A trie (prefix tree) is an ordered data structure used to store the index in memory.  All descendants of a node have a common prefix under the same branch.  The common prefix eliminates the need for storing the same prefix each time which increases memory efficiency.   A simple representation containing the words aspirin, ankle, and pain is:

Trie Data Structure

When the user searches for keywords, Figure 1, spaces are seen as an AND condition and commas are seen as an OR condition.  A list is displayed to the user showing the file names of the documents which contain there search terms.  Double clicking on a particular document will open a new tab displaying the documents contents and highlighting the keywords present in the document, Figure 2 & 3.  When mousing over the keywords found the SNOMED and UMLS IDs are displayed.  These are determined based on a separate trie data structure built from the SNOMED CT data.

Pain Search Result
Figure 1: Pain Search Result
Encoding of Aspirin
Figure 2: Encoding of Aspirin
Encoding of Pain
Figure 3: Encoding of Pain

Games Room Application

Games Room Application Icon

This application consists of three main parts which are the client, server, and the game of SOS.  The server ran on an Elastic Cloud 2 (EC2) instance with Amazon Web Services where I configured the Windows server and supporting software.  This includes creating a database in MS SQL Server, creating the necessary users and assigning them to the database they can access.  Mappings are set for the user which grants the necessary permissions.  The firewall also needed to be configured to allow the appropriate ports access so clients could connect to the server (and the server could receive connections).   Internet Information Services (IIS) was also configured so that the Java Network Launch Protocol (JNLP) MIME type was recognized by the web server so that the client could be launched using Java WebStart from a webpage.

Client-Server communication uses a server socket that listens for incoming connections.  When a connection is accepted a new thread (ClientHandler) is spawned which handles communications with the client through a socket.   Java’s ObjectInputStream and ObjectOutputStream are used in order to send and receive Java objects.

Threading is used on the client side to listen for messages from the server.  On the server side each client connection is ran in its own thread and handled by a ClientHandler class.

Database access is handled by the server using Java Database Connectivity (JDBC) drivers.  Any information retrieved from the database is sent back to the client using a data transfer object (DTO) and packaged as a games room message of the correct type.

The application allows users to chat in a main room or create their own chat rooms which can be public or private.  Users are able to join any public room but the only way a user can join a private room is through an invite from an active participant.  Files can be sent to users of a room.  This is done by reading the file as bytes and sending the byte array along with the filename as a string to users in the room.  Java’s FileOutputStream class is used to write the file to the recipient’s local machine if they chose to accept the file and saved it.

Users are able to manage their profile information, Figure 1.  Which allows them to change certain information, including updating their password.   The application uses a hash implementation using the password-based key derivation function 2 (PBKDF2) algorithm with HMAC and SHA1 (part of RSA public-key cryptography standards) for hashing user passwords and then storing the hash value in the database.  When a hash is being created for a password the string is converted to a byte array and a salt is created using for the specified salt byte size.  The PBKDF2 hash of the password is then computed by creating a password based encryption (PBE) key of variable-key-size PBE ciphers utilizing the users’ password, salt, number of iterations, and how many bytes the result should be.  Javas secret key factory, part of the javax cryptography package, is then utilized to generate the secret key (hash of the password) for the PBE key specification.  All relevant data is then placed into one string which takes the format of ‘iterations:salt:hash’ where the salt and hash is first converted to hexadecimal.  The colons are critical as they are utilized for splitting the information when validating passwords.

Users are able to play the game of SOS, Figure 2, when they are in a room they have created.  The first two members to join the game can play, as it’s a two player game.  The game implements the MVC pattern, using as the controller, as the view and the ChatClient as the model for how to handle requests from the user to the server and vise versa.  DTOs are used to transfer data between the clients through the server as well as for saving game states.  The DTOs are Board, Player, PlayerMove, SavedSosComponents, ScoreCard, and Turn.

Users are able to save the contents of a chat session for later viewing and a facility to view and manage any saved chats is provided, Figure 3.  Users can also save a games state to be continued at a later date and when loading a saved games both participants must be logged into the application.  Game states are converted to XML using XStream to be stored in the database.

Validators are created by implementing my Validate interface and a separate class for each validator (i.e. is created.  This separates out the process of validating information entered into the GUI from the actual GUI code itself.

Profile Manager
Figure 1: Profile Manager
Playing SOS
Figure 2: Playing SOS
Saved Chats
Figure 3: Saved Chats

Tron Game

This was a group project in which my role was to handle the networking / multiplayer aspect of the game.  This application implements the Model-View-Controller (MVC) pattern.

The server runs in a thread and handles all client connections.  Each client connection is represented by its own class (Client) which handles sending a message to the individual client and receiving data from a particular client to the server.  Each client runs in its own thread.  The run function listens for messages from a particular client and handles it by the message type.  While the length of the message is less than the message length data is read from the socket and added to a message variable.   A check is done as to where the end of message flag is and adds the overflow into the buffer and then passes the message type and packed message to be processed by the server.

The client runs in a thread and handles all communication between the client and the server.  Interpreting messages received from the server and packing messages prior to sending them to the server.

The server controller runs server side to handle updates from the client and the client server runs client side to handle events from the user interface to be sent to the server as well as to update the view based on messages received from the server.

Figure 1 and 2 show UML diagrams for the key components of the application I worked on, the server and the client respectively.

Tron Server UML Diagram
Figure 1: Tron Server UML Diagram
Tron Client UML Diagram
Figure 2: Tron Client UML Diagram