The Start of Professional Websites

Cory Carpenter Lowcountry Web Developer
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.

Advertisements
The Start of Professional Websites

Responsive Tribute Page

Day9_Tribute_Screenshot_small
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
Day9_Tribute_Screenshot_2_small

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.

Responsive Tribute Page

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!

wide-social-banner

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

Progressing Skills After College

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:

CSCI 462 OpenMRS Poster

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.

Poster Child

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.

OSCON Report

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.

Preparing for OSCON

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.

Meeting Charleston