The Start of Professional Websites

My personal portfolio website

After completing the finishing touches for my personal portfolio website I took away even more that I have learned than with my previous website, and it is also a website I take more pride in making. Of course that means it was not without its difficulties in both the design and implementation phases.

Design

As I mentioned in my previous post, I had wanted to make a portfolio website for quite some time, and had many different ideas I wanted to try. I will admit I was over ambitious with how I wanted to display my content and brand. Furthermore, I was looking around at other popular web design portfolios which all had unique and complicated CSS and JavaScript interactions in their site. They were works of art in the form of a website. So I wanted to jump ahead of myself to make something equally enticing. I chose to brand my website on my love for nature and forests.

My first design complication was in the landing page where I wanted the menu to be signs hanging from a large tree in the center. I quickly learned that making it responsive would be a huge challenge, and I could not get the links to stay perfectly on top the same spot of a shrinking background image. I wanted an owl to swoop down placing each link, finally perching on a tree to the side. I planned for vines going down the sides of the website with the actual portfolio being a custom slideshow displaying each website I’ve worked on. As with all designs after the prototype user test I decided a slideshow is neat to look at, but bad for displaying multiple projects that the view may want to quickly glance at for something of interest. It was changed to each project being a leaf on a vine going down the center of a page.

After many renditions, including a space ship featuring each project as a planet, and another forest with fantasy portals to the projects, I was getting an overall sense of fascinating idea, but impractical and a sense of potentially being tacky in practice. I wanted something more professional to display my skills, potentially even a site that would inspire future clients to want something of similar nature. I was also thinking about how great of an area Charleston is in terms of business and hospitality, and so I was inspired to carry that on through my website — a local and professional website that was still friendly.

Implementation

The simple

While I was finishing up my design for the website I was learning about how to implement a parallax effect where a websites content will scroll over an image revealing and covering parts of the image. More websites have been using parallax, and it does look impressive on a site. I wanted to use the parallax with header text overlaying them to title each section of the website. I was surprised at how simple it was to achieve the effect with just a couple divs and a span in html, and some CSS making the background an image and using background-attachment: fixed rather than background-attachment: scroll to achieve the desired effect. Sadly, I discovered the effect does not work the same on all mobile devices since the device saves battery by not loading the page until the finger scrolling is completed. So the effect would appear studery rather than impressive.

I also noticed the overall time it took for me to implemented the design into an acceptable website was much shorter than before. My favorite way to work through website development is to write all the html content before hand, then go back and make it all start to look nice through the CSS.

The challenge

Surprisingly, or perhaps unsurprisingly most of my struggles involved making the website fully responsive. I found myself struggling most with making the navigation bar working correctly when making it responsive. I had made the navigation bar for desktop computers using a different method than my previous website, so using the same CSS to make it appear correctly on mobile was not working correctly. In the end I decided to recreate the navbar from the ground up in mobile first, and tested it frequently until it was working in all formats.

The other issue that stumped me was wondering why the content in my landing page did not extend the section it was in when shrunk to lower sizes, or when flipped to landscape mode on mobile. The obvious answer was the background I was using was measured with 100vh so the image would always take up 100% of the available height no matter the screen. However, this also means the content in that section must always fit on that screen size. The best solution to this issue was to use media queries to alter the image, header, and button displayed on the landing screen to fit smaller screen sizes. As a result I must admit I used !important on the adjustment for landscape phones as it was competing with width and height specifications. I’ve heard it is bad practice to use, but I felt it was introduced to the language for circumstances like this.

A final note on media queries: one of the issues that I may be creating for myself is trying to keep track of what is changed in which particular media query. To create the best looking content on all screen sizes minor adjustments to image size, padding and margin, font sizes, etc are made when the content indicates it needs changed. I’ve found myself getting lost as to what I changed where once more and more media queries are added, and I have to change something I’ve changed 2 to 3 times before. I currently working on figuring out if this is simply a documentation error on my part, or incorrectly using media queries, and I need to make the content in such a way that those adjustments do not need to be made as frequently.

Responsive Tribute Page

Day[9] Tribute Website

I am really enjoying how freeCodeCamp set up their lessons and projects. It’s nice having a space where you can code and directly see the changes right next to it on the same page. I have also joined the #100DaysOfCode challenge to insure I am steadily making some progress on my skills and goals each day. The idea behind the challenge is to code for at least one hour each day. Overtime all that practice adds up.

But more importantly, I completed my first project on freeCodeCamp, the tribute page. The requirements were simple for the first website: some text, a picture, and links to other websites. However, I took it upon myself to learn something new with it, and really got the hang of responsive web development. After watching a lot of tutorials and observing how others tackled responsiveness I felt confident in using media queries to make a webpage that flows beautifully. I played around with bootstrap and flexbox designs, but I liked using sections and divs with containers and percentages to have more control over the webpage. In doing so I also managed to get a lot of practice in properly using margins and padding which can be a challenge with responsive websites. Another exciting aspect was the navigation bar. I wanted to implement a single page design for the website, and the navigation bar presented more problems than anticipated. Keeping it in a fixed position, and having the links send users to a specific location on the page were simple enough. It was also neat to play around with some JavaScript to create a smooth scroll effect. The real challenge came with making the menu responsive as well. I decided to keep the menu for some larger tablets, and as the screen size got smaller use the hamburger menu design. One thing that made me laugh when developing the menu for phones was during my first test on my iPhone 6. The menu displayed as expected, but it did not behave as such. I was silly enough to assume the menu would close itself after a link had been touched, but nothing a couple lines of JavaScript wasn’t able to solve.

After all that hard work I am proud to say I have completed the website to my satisfaction, and it was a great step towards furthering my front-end experience. Have a look for yourself at how it turned out:

Day[9] Tribute Website

I look forward to any suggestions you may have to improve either my coding or design! Those two boxes with the header, image, and text was another section that proved to be more of a challenge than anticipated when it came to getting them to display correctly in the right location. It also required the most attention when changing the size of the website. I may come back to the page in the future to make some more tweaks. One idea is to have the underline on the navigation bar appear only on the active page. For now though, I feel it is time to move on to another project, and see what I can learn from it.

Now with that finished, I look towards my next goal to create a personal portfolio page which I’ve wanted to do for a while now, so this should be fun. I have a lot of ideas running through my mind, and at the same time trying to decide if they are poor design choices.

Progressing Skills After College

College Reflection

I have graduated with a Bachelors Degree in Computer Science! It’s actually been official for a couple months now, but it felt more like the usual summer break. I hadn’t had the chance for the feeling of achievement to sink in yet or to reflect on the past five years and what I have learned, and even what had been left uncompleted. And that is the focus of what I realized after completing a technical degree, or any for that matter—there is only so much that can be taught in a semester long class, and even less when comparing each class to the entire field of computers.

In an undergraduate degree it must be assumed that the student has zero or very little knowledge of the subject, and for me that was true for programming. I have played around with computers ever since I was a kid, but never stepped into the realm of learning a programming language and experimenting with making computers do basic or impractical yet fascinating tasks. To qualify for a degree in the field students must be introduced to and be confident in the basics of several aspects of technology: object orientated programming, databases, data structures, web programming, mobile programming, artificial intelligence, and user interfaces to name a few. Any one of these may become the single life-long focus of the student, and taking a single class about one of them gives you the basic skills needed to be competent in furthering those skills on you own.

My education has brought me here, outside of searching for a job of course. I have honed in on my passion of web design and have the skills and training to further it to the best of my abilities. I took a few website courses during my studies, but the focus of all those classes where on back-end programming. As I was beginning to discover in an older post, I desired to work on the front-end of websites and really build the best experience for users as possible. It’s my dream to one day really wow somebody with a great design, and keep them there with flawless code execution. I have some experience in developing websites through class, and I even got the chance to work on one for a non-profit organization. However, I desire to improve my abilities and efficiency even more.

Welcome to Summer Camp!

Recently, I came across a twitter post showcasing a dungeon crawler playable in a web browser developed by someone like me wanting to further there web development through the freeCodeCamp curriculum. I found the key to progressing my skills and bringing together my previous knowledge through this easy-to-use open source website dedicated to teaching front-end and back-end web development among other important tools and languages to produce websites from the ground up.

I decided to use my GitHub account to host my freeCodeCamp portfolio where I will display the projects I’ll be working on. Doing so gives me a public location to place projects that may inspire other developers. It also provides additional exposure to version control, and tracks my progress as time goes on. The first is a tribute page which I am currently in production of. I decided I am going to make a tribute to my favorite internet personality Day[9], and I want to implement my favorite website design—the single page layout. I’ve also set a goal to develop it using responsive web design which is becoming more and more important with so many different screen sizes and greater internet traffic coming from mobile devices.

I look forward to posting about my experiences with freeCodeCamp and seeing how my work progresses. Be sure to keep an eye out for my tribute page and future projects here:

Cory Carpenter’s freeCodeCamp Portfolio

Poster Child

Thursday was the poster session for the school of science and maths at the College of Charleston. To wrap up the semester my group submitted our poster summarizing our work with OpenMRS. Here’s a look at how it turned out:

The poster itself turned out nicely, and we are proud to have it displayed at the SSM Poster Session as well as the upcoming Harbor Walk After Five presentation. As much as I appreciate the poster we produced, I also made some observations based on other posters present at the event from the other science fields.

First, computer science at it’s core is very dry and while there are many fascinating advancements, discoveries, and uses actually displaying it on a poster is not very aesthetically pleasing. Our poster template has a calming blue theme with sections that don’t appear to be too overwhelming. The displayed information, however, is not going to catch most people’s attention. A bug fix here and some altering of code there, no matter how interesting to those in the computer science field, is never going to bring in the crowds like a poster featuring a proposed mission to Mars or the discovery of new chemical elements and their applications. That’s not to say computer science doesn’t have other ways to grab the attention of attendees, but our accomplishments were not best displayed using them. The best example for the tech world is the use of demos. If we made new software, added an important feature, or studied a new practical way of using technology then a demo would have been more appropriate and often makes viewers more curious to at least try it out.

Second, even though it’s always talked about and was even considered during the making of the poster the importance of images and a catchy title is not to be underestimated. During the session I was commenting about how great it would be to have two posters. One to display to those looking at it from the computer science department, and one for everyone else. I feel our poster appeals more to those within our field of study rather than to the majority of people. For the second poster more information about the software itself, how it’s used and where, how we interacted with the community and were able to help them, and overall increasing the interest in the concept of open source software independent of our project would appeal more to most people. Being able to further grab their attention with a title reflecting those would appear less intimidating and bring in more questions.

During the course of the session there was an equal number of questions from those inside the computer science department and those from other fields. Their questions varied greatly though. Those who are more familiar with computer science were interested in the bugs and how we fixed them. Those outside the department were curious about free software that they were able to have changes made to, as well as what the actual software we worked on did. Overall, this experience gave me a better understanding of what material to present, and how to go about doing so to reach a wider audience.

OSCON Report

This is a reminder that OSCON hosted in Austin, Texas takes place from Monday, May 8th to Thursday the 11th. Being from the Charleston area with finals and graduation coming up I do not have the ability to attend. The intent was to get in contact with some of the people presenting at OSCON and ask them questions as if going to the event. It sadly does not provide the same experience and since they are preparing for the event themselves are they are either too busy to respond or direct us to the upcoming talk. Having more of a discussion on the topic and questions is more ideal and that is only achieved by actually being there, so if you have the ability to go then I highly recommend it. Some of the talks I was most interested in can be found here if you need a place to start preparing for the days to come during the event. There’s a large amount of talks going on during the event with many more people in the field simply attending, so the chance to network or learn something new is an invaluable reason to attend as is.

Preparing for OSCON

Since the semester is coming to a close, and there are no conferences to go to nearby in the foreseeable future we decided to look towards those presenting this year at OSCON in Austin, Texas taking place from May 8th to the 11th. There are many presenters this year, and the ones I chose to hone in on were Nick Landry with Microsoft, Jonathon Manning with Secret Lab Pty. Ltd., and Gareth Greenaway with Croscon Engineering.

Nick Landry stood out working with the recent boom in virtual reality with Microsoft’s HoloLens technology. It is a dream come true for many technology enthusiasts and his talk on building holographic experiences with the HoloToolkit for Unity demonstrates how anyone can use Microsoft’s open source toolkit to develop their own applications for the HoloLens allowing new and creative ways to integrate developer applications and the real world around us. I would love to talk to him about working with the cutting edge technology, the challenges involved with it, and the opportunities it possesses for various creative projects and games.

Jonathon Mannin, along with Tim Nugent and Paris Buttfield-Addison, all have mobile game design experience. They are teaming up to give a talk on developing mobile applications with Apple’s Swift programming language, as well as how to design games and understand people. Building off of the topic of game design with the HoloLens I would like to be able to talk about getting into game development for mobile devices, how it differs with desktop games and their user base, as well as the style of games often seen on the mobile market vs highly polished games on other devices. With some of the games being released on the mobile market it makes me wonder if they know their audience at all, and are only focusing on potential financial gains.

Garenth Greenaway is giving an interesting talk on leaving an open source project. Everyone in my class will most likely experience this as we move on to our prospective careers and no longer contribute to the open source projects we have worked with over the course of this semester. Most of us will simply stop working on it all together and consider it a class assignment or as an experience to place on our resumes. I doubt anyone will be leaving a message on the forums or over IRC that they are done working on the project. However, how does this constant in and out of contributors effect the open source project, and the energy and time spent assisting all the new people coming in trying to build their project and learn the code setup. Since it is so easy to come and go is everyone who contributed something to the project always considered to be apart of it, or is there some point when they are officially considered gone from it. And since it is so easy to return to an open source project, what happens then, and how often does that occur. It would be nice to go into more detail about these outcomes, and see if there should be some way to denote active members from those who are either on hiatus or never intending to return. Plus, discussing what may happen when you need to contact one of those members that left about changes they made to the code left with poor documentation.

Meeting Charleston

On March 7th I went to the WordPress Meetup in Summerville, SC. The talk presented by Karl Hudson was on multilingual websites with WordPress. There was about 15 people who attended the meetup which made the atmosphere more laid back. I was also shocked to see such a diversified crowd. I was expecting a lot of people in their 20’s and 30’s who build websites for businesses, but there were plenty of older members, and it seemed most were working for specific groups, self projects, or as freelance developers. Everyone there was very inviting, and the organizers of the event was talking to us about our experience with WordPress and the differences between wordpress.com and wordpress.org. I was glad the focus was on the latter as I figured it would be more in depth of website development. Once the presentation was all set up the talk began.

The purpose of multilingual sites is to increase the size of your available audience and make the experience for them more enjoyable in their native language. At first it seems appealing to reach out to as many people as possible, but it was emphasized that if one of those viewers comes to you with a question in the language you translated the website in then you need to have the means to understand and respond to it or else risk ruining the user’s experience, thus rendering the point of making the site multilingual pointless. He went on to show us multiple plugins available to use with WordPress. Some of them were free and some of them paid. Karl mentioned the trick with the paid ones is they often include translations of other commonly used plugins such as the event calendar plugin. However, for most general purposes any of the free plugins such as WPML accomplishes everything that is needed. This is good as he also went on to explain how easy it is for freelance developers to see a new useful plugin, purchase it, and then never use it again, or even at all. There are certainly potential financial risks involved in this method of developing, including the time committed to the project.

While it was interesting to see how easy it was to set up a multilingual website using WordPress, I also had a feeling of disappointment. It all felt too clunky and seemed like a feature that is used on websites where the developers weren’t very competent in their programming skills. Once the language is set the developer still has to go through each page and manually translate the content of the page, as well as the different menus, so I’m not sure what the advantage of a plugin is vs hard coding new pages in the language while handling the various links to them appropriately.I was expecting to get more into the coding side of things including HTML, CSS, JavaScript, and their different variants, so I’m not sure if I’m left pleasantly surprised about how easy the translator is implemented, if it is only in the WordPress platform, or if my doubt has some meaning to it. I also felt the meeting was rushed since it was held in the library so close to closing time. It didn’t allow for longer presentations mixed with quality Q&A with networking afterwards. Other than that, overall it was still an enjoyable experience and gave me some additional insight into using WordPress as a website platform.

Chapter 9

We finally reached the final chapter we will cover in our textbook, Software Development: An Open Source Approach. Chapter 9 talks about user support. In short this chapter focuses on documentation, good writing, target audiences, discussion forums, and user feedback. The advice on good writing and outline of the types of user support in particular serve a practical use in any field. In fact it was in my Interdisciplinary Composition course that I got to focus heavily on these factors. It was entirely based on figuring out your target audience relative to a nonprofit organization then using that information to develop material they may need such as brochures, newsletters, and a website. Much like with developing the user interface for a piece of software, documentation as well as anything that is being worked on needs to be done in respect to the intended consumer. You see this a lot in video game development where the developers get feedback from players to make sure the interface operates as planned when the consumer gets the game as well as where the user feels the game needs improvement. The target audience’s guidance while developing is priceless and guarantees both parties will be satisfied with the end result.

The questions we were asked to answer revolve around the documentation and target audience of the projects we’ve been working on, so in this case OpenMRS.

Exercise 9.1.a

Sometimes it may be the documentation itself that is the hardest part to write rather than the code itself. Clearly many developers want to avoid it if they can despite the constant pressure to clearly detail the documentation in and out of the code. With OpenMRS organization is near perfect. With so much information to shift through, the table of contents on the side makes it easy to see where in the documentation you are, and quickly access what it is you are looking for. It provides the information needed in a clear and precise way, and outlines things when needed. It makes great use of lists when appropriate. The guide to getting started as a developer is a good example of this.

Exercise 9.1.b

The intended audience for OpenMRS are doctors in developing nations. It was developed as a free alternative doctors can use to help bring down disease such as AIDS in Africa. These nations often don’t have much money to spend on such programs, and may not have very many hospitals or trained professionals to provide all the care needed. Thus, OpenMRS provides a free and easy to install program to keep track of patients. Those using the program will be highly literate in the medical field and presumably have a higher education and so working with the program will most likely be simple. The only concern that comes up is the language barrier since it is used in many countries, but English is most likely known by the doctors at the very least.

Exercise 9.1.c

Overall I found the documentation to fit the target audience very well. The main improvement I can suggest is providing multiple languages since English may not be the native language of some doctors, or may not be well known by some of the doctor’s assistants. In terms of developers I think providing more images to follow along with, or potentially more step-by-step tutorials in video format would go a long way since sometimes it is difficult to tell if something is working the way it should or you are missing something the writer had set up already especially in setting up the IDE. It may even go a long way to provide additional details on dependencies for the software to work as well such as commands for MySQL for each OS and how to get Tomcat running as these are both issues I ran into.

Chapter 8

A few years ago I went to get my wisdom teeth removed. Initially I was terrified of the surgery but there was one thing that scared me even more: ugly UI. I sat their looking at the open laptop waiting for the oral surgeon to come in for my examination. The program they were using for the office looked incredibly archaic with so many indecipherable buttons no wonder it’s such a hassle to train new assistants working there. Then it hit me, why did so many of the software I see used by doctors look appear like this? I mean sure it works well, but I wouldn’t enjoy using it, and it certainly wouldn’t make me feel more enthusiastic about my job. To me the UI development just felt lazy. I feel my disagreement with the proliferation of software packages developed that gets the job done, but is not visually appealing or satisfying to use for the user was the thing event that kept coming up sparking my interest in UX/UI design.

Sadly, visually appealing UI is not easy to come by because from a business standpoint to do so would potentially require more employees and take more time and money to achieve. I would say the RMH Homebase falls into the same category of poor UI design, and most prototypes will have no need to focus on the visual elements until much later in development. It’s surprisingly not that easy to make something both look amazing and perform amazing at the same time. That is why the market for UX/UI design is booming, and why I feel it is necessary to set this standard for most software developed where a costumer end user is involved. Software isn’t cheap to develop, but neither is it cheap to purchase either, and so that costumer better be pleased with all aspects of the software.

Chapter 8 of our Software Development: An Open Source Approach textbook brings our attention to the development of the user interface. The questions we were given have to do with the handling of default and forgotten passwords. Even something as simple as passwords can alter the user’s experience with software. For example, I have had multiple instances of my password not being recognized by my bank because of some unknown reason when I frequent the mobile app and the desktop website. Nothing is more frustrating than being unable to log into your account and having to drive to the bank just because of password issues.

Exercise 8.1.a

The RMH Homebase default password is set to be identical to the user’s login id. Clearly this is a problem, and is just as bad as having the password of “password” or even “p@ssword” for that matter. My bank actually runs into a similar problem, except it’s worse in my opinion. If you ever go in to reset your password, you now have the default password to any other user who wants to do the same since it is the same default reset password. Store that somewhere and get wind of someone trying to reset their password, and you can get there first – not very secure.

For both of these instances I would suggest a randomly generated password. String together some numbers and characters of varying length and give them to the user whether through an email or in person. Naturally, the user will want to change the annoying string of characters providing further incentive to alter the default password.

Exercise 8.1.b

There is also no other way to reset your password except by contacting the House Manager. This is also like me having to drive to the bank to reset a password, though I feel safer doing that for my money. This system however does not need to be that secure to identify the person requesting the reset. It also provides additional busy work to employees. Implementing a system where an email is sent with the default password is sufficient for this purpose, but on top of that the use of security questions is an easy way to add an additional level of security.

Afterthought

Another issue about passwords and security I feel the need to bring up is the requirements placed on creating a password. Every website has their special way of doing so, whether that’s 8 characters or 12 characters required, at least one capitalization used, at least one special character used – but wait don’t use any of these characters: ^ or & or * and so our passwords become cumbersome, restricted, and sometimes hard to remember as a result. The purpose is to make it more secure, but it may actually do the opposite for the average user.

If you are going to capitalize a character which will it be? If you are doing it only to satisfy the requirements probably the first one. Okay, how about a special character? You’re probably going to place those at the end. Great, there is now a standard model hackers can use in their initial attempts to get into your account if you are forced into preset requirements.

Likewise the practice of restricting users from using recent passwords is also a bit odd. Again, it is intended for security, but that can backfire on the user’s experience. Let’s say I just set up my password and whoops I forgot it already. No problem, I just change it to a temporary one and then I can set it back to the one I intended to use. Except I cannot actually do that, and so even though there was no security compromise due to an aged password a perfectly good password is now banned from being used. Of course writing down these numerous passwords creates a security risk of their own, but now the blame is shifted towards the user if they get hacked that way. The only real way around it is with the increase in password management software that requires a master key to get into. That way a user can maintain their numerous passwords they are expected to have and still remain secure.

Chapter 7

Continuing on to Chapter 7 of Software Development: An Open Source Approach textbook by Allen Tucker we shift focus towards developing database modules. As mentioned the most common approach to databases is the relational model since tables are profound at easily storing and retrieving data. MySQL is one of the most well known database management systems as it is quick and easy to configure and free to use. All the concepts in this chapter nicely reflect those that were taught in the database concepts course, CSCI 332. Everything from designing and creating databases, data definition language, data manipulation, and normalization. This chapter goes deeper into the concepts of unit testing and refactoring database modules which I found to be helpful in adding onto my database knowledge.

Exercise 7.1

We were asking to find examples of where the RMH Hombase database violates normalization criteria. Specifically the 5th and 6th criteria which states:

• Every entry in the table has exactly one value of the appropriate type.
• No attribute in the table is redundant with the primary key.

The 5th rule is violated in the dbSchedules table where it leaves the persons and notes entries empty. The 6th rule is also violated by the dbPersons table by having the first and last name both “admin” which is the same as the primary key given to that user. One such consequence of these violations is the easy of taking up a lot of storage space with redundant data that builds up over time, or in the instance of not providing a value to each entry creating a potential for errors when an unsuspecting select call is made where NULL is not an expected output.

Exercise 7.2

We were asking to develop and unit test the functions for the dbShifts.php module:

• get_shift_month
• get_shift_day
• get_shift_year

from the dbDates table and:

• get_shift_start
• get_shift_end

from the dbLog table.

An example of the get_shift_month function which gets the month by the ID provided:

function get_shift_month($id) {
  return substr($id, 0, 2);
}

Exercise 7.3

We were asked to design, implement, and unit test the addition of the calendar month view previously requested by a user. This task was achieved by modeling dbMonths after the already developed dbWeeks table. The unit tests are also similar to those provided for the dbWeeks testing.