Days 26 and 26- The Launch

These past two days have been awesome. I have officially finished and launched the team excel website- it can be found here.  The client and our company have exchanged numerous emails and I have implemented all of their desired changes.  Now that that project is over, I will have to find a new one.  For a couple days, I will finish up wp-bullhorn and hopefully push that live, too.  So THEN, I might need a new project.  I was thinking it could be some sort of crazy web game, completely different than something like my other game, Shloop. It would be a sort of mmo and I would try to make it inventive. I have no idea about the details, but I have an outline in my head.


Day 24: Wrapping up

I was able to close up all of the known bugs for Team Excel today and get the live site up to date. After this was completed, I went back to wp-bullhorn. It took a crazy long time to this this project working. I just built a new computer, which I am typing on right now, so I had to get everything up and back up and running. After buxfixing excel and downloading bullhorn, I had to figure out how to run a virtual host. I need a virtual host so I can work on bullhorn and excel at the same time. Essentially, I need to host two sites, but there is only one built in local address: localhost. I am using localhost to run excel and wanted to set up bullhorn to run when bullhorn.dev was typed into the browser. It took a couple hours, but I managed to get this system working. After that, it took me another hour or so to actually get gulp to work again. If you recall, I wrote another blog post about getting gulp to work at the beginning of this same project, on my other computer. Luckily, this time it was quite a bit easier and I didn’t need my hand held to do it.


Days 22 and 23: Bug fixing

Once again, I have been working hard and forgot to post yesterday. The Team Excel project is really getting down to the wire- the pages are done, but not all of the content is in. I have been working on bugs and restructuring the site today and yesterday. For example, I needed more breakpoints so I had to create a mini custom grid for the navigation menu. While I was doing this, I accidentally created a pretty awesome effect of a sliding underline. To create a orange underline under white text, I have been using a colored bottom border. Today, by mistake, I put a smaller bottom-padding of the link when it was hovered over, forcing the border to move up when hovered on. It looks pretty juicy and I decided to keep it. Other than that change, I have done various things to make the site more responsive, like giving the call to action 3 different layouts which change depending on screen size. The real stress lies in the fact that we will be sending out a test link to the client tomorrow and I need to make sure the site is ready for that. Launch will also be soon, but I am taking this one step at a time.


Day 21: ExcelPress

A ton of work was completed today.  I completed all of the pages (at least the desktop layouts) to the best of my ability.  Some of the content is not available yet, so pages like Our Team are almost completely empty.  Also, other pages have only a very small amount of content, so they are not quite done.  In addition, Less than half of the pages have a unique header image, so those will have to be swapped out before the site goes live.  So although I have done almost everything I can do at the moment, the site has work to be done.  I filled in the blank spaces with an amazing tool: Placekitten. You simply take this link: http://placekitten.com/200/300 and use it as the source of an image, replacing the enign numbers with the dimensions you desire. If /g is added before the dimensions, then it is black and white. I’ll add a few here for your enjoyment.

Anyway, after I finished all of that, I integrated the site with wordpress. This took quite a while, as I had to change paths to work with WordPress and add all of the pages into the WordPress system.


Day 20: The Scoreboard

Unfortunately, I do not have very much to write about today.  However, work has been pretty awesome!  I am getting a lot of work done and am learning a ton of valuable information.  With a lot of the legwork already done for Team Excel, I was able to complete the front page’s formatting as well as iron out the rest of the about page today.   After that, I still had time to finish a completely new page, the “standings” section.  In this section, I needed to create a table-like structure for team and individual standings in the program.  The formatting was a little tricky, but I got it down after about an hour.  There are 6 entries in this page, each one being fairly long, but identical.  As a result, the html for the page is quite a long mess, but it is as good as it can be.  Then, I got a start on the contact us page and was able to embed an interactive map.


Day 18: Media Queries

I started on the about page today and redid the way that media queries work on the site. I built it using the wrong approach- desktop down. This means that I built it in the browser and used max-width queries to shrink it down. In layman’s terms, this means that things are triggered when the browser gets smaller. For example, say you have a large image that is only to be displayed in a large browser window. You would then throw some css into your image that looks like this:

@media screen and (max-width: 1080px) {
your.img {
display: none;
}
}

This wastes bandwidth, as the image will be loaded and then taken away if the browser is too small.  On the other hand, this code:

your.img {
display: none;
}
@media screen and (min-width: 1080px) {
your.img {
display: inline;
}
}

This, on the other hand, will disable the image by default and only load it up if necessary, saving valuable bandwidth.  I spent a lot of today convirting code that looked like the first example to that of the second.


Days 16/17: Home Page Completion

I didn’t write a post yesterday because I was working until the moment I left the office. In the past two days, I have been working exclusively on the project for Team Excel. It is truly insane how much time goes into fixing fairly small problems. Yesterday, I finished the main layout for the page. I talked with the designer and was able to get the site looking nearly exactly as she envisioned it. However, it only worked on very specific screen resolutions and looked terrible on all others. For this reason, I had lots of work today to make it responsive. Making this site work on other resolutions consisted of rearranging columns, resizing fonts, and redoing navigation, among other things. It took a long time for everything to fall into place, but I did eventually get it to a place I was happy with. After all of that actual work, I was determined to have some fun. So, I added an animation to the navigation icon. On my search for awesome animations, I ran into a few really cool sites. Unfortunantly, the one I like the most (this) was not working on the site, so I switched to another. However, I am still more than happy with the result.


Day 15: Exceleration

I worked almost exclusively on Team Excel’s website today. Since last post, there was a fairly minor site redesign, so I had to redo just a little bit of my work. However, it DOES look quite a bit nicer, in my opinion. The largest challenge I faced today was opacity- dealing with the navigation and the gradient/texture for the call to action. Firstly, the navigation bar is on the top of the page, half transparent. This increases legibility of the navigation items while keeping the header cohesive. In the end, the difficult part of this was getting the correct positioning of the opaque bar. It could not collide with the navigation items, the logo, or the background image. After it was in place, a simple opacity= 0.5 did the trick. Much harder was the call to action. The way it is set up is rather odd; a subtle gray -> darker gray gradient is placed behind a half-transparent texture, which is scaled down by half. First, I had to find the repeating texture. Then, I had to use Photoshop to scale it down and add the transparency. For some reason, Photoshop hates me and the texture did not repeat well after being processed. So, I had to go into GIMP, another image editing software, and redo everything. This time it worked and I set it as the background image. After that, I had to create a gradient with CSS which matched the one from the PSD that I was given. Finally, I was able to layer the two on top of each other using CSS. Many other silly little things got in the way today, but I managed to get through them and get a lot of work pounded out. I now have the most difficult part of the project finished: the head and the call to action.


Day 14: Excel

Today, I was given another development project!  The site is for Team Excel, a program based in Varina high school, and it will be featured on espn.  This gives me a huge opportunity to develop a web site that will likely gather a large amount of public attention.  In addition to this project, I am writing a script with Yeoman to simplify the process of creating WordPress templates.  Here is everything the script must do:

  1. Create project directory (prompt for it, folder and name)
  2. download wordpress (wget lastest)
  3. unpack wordpress
  4. delete tar
  5. copy the index.php file that is in the wp folder
  6. paste that file into the project root directory
  7. add /wp to the require dirname
  8. choose base theme (or use default)
  9. download theme
  10. unpack theme
  11. delete tar
  12. navigate to theme directory
  13. run npm install
  14. create SQL database
  15. Prompt user for database name
  16. edit wp-config-sample
  17. hit the browser for the salt
  18. place in file
  19. randomize table prefix
  20. put in db name
  21. change user and password to root
  22. insert wordpress site and home url parameters after WPLANG
  23. save

Clearly, this is a large project.  Hopefully, I will be able to make it well enough to benefit CO+LAB.  If done properly, this project could save a significant amount of time for each developer starting a WordPress site(about 75% of their sites are WordPress, like this blog).  I also came across some awesome preloading animations today on a design site called behance.  Below is the one I found the most visually pleasing:


Day 13: Photoshop

Today, I tried to learn how to become proficient with Photoshop.  It is such a large program that this will take weeks, if not months.  However, I think I have nailed down the very basic elements of the program.  As I have mentioned before, it is the main design tool used at CO+LAB, so I need to learn to use it regardless its difficulty.  I think I officially decided that I am not the designer type today.  I enjoy development but design is just over my head.  I love taking a great design and turning it into a reality, and that is what I am proficient at.  For some reason, my designs just never look like I imagine they will.  For now, I will stick to my development roots.  A cool site I found today was a browser built in-browser with JavaScript. It is weird. And I mean weird.  That’s all for today: Photoshop and wacky browsers.