Choose Your Theme
Warren Shea

Archive for the ‘Web Development’ Category

worldofwarren – CSS & PNGs optimized…sorta

Wednesday, February 27th, 2013 at 11:38 am

So when I built worldofwarren.com, I thought it’d be a great idea to use 1 CSS file (in PHP), and pass the theme as a parameter into the “css” file via querystring and have the php figure out what to output. I guess the + side is that the php would do server-side compilation of the code. So I thought maybe it was faster. Also, I’d only have to maintain 1 css file and I wouldn’t have that much css duplication in the php file because styles that could apply to 2 themes could go under the same if statement.

But…I realized…that was probably incorrect, in terms of optimization. Because each time a user requested the “css” file, the server would have to serve up different php compiled code, based on the querystring. I don’t think such a file can be cached as well (can php be cached? it likely changes all the time…)…and cache without the need for server-side code is probably the fastest method to achieve quick load times.

So I’ve created separate CSS files, 1 for each theme, to improve load.


I’ve also re-optimized my PNGs. Someone told me about a site, http://tinypng.org/ that greatly reduces PNG size, while keeping the quality relatively similar. I’ve cut down the images on warrenshea.com from 6MB to 2MB. It was like shopping at a closing Zellers: HUGE SAVINGS!

I guess I’m learning more and more about the web and thought it’d be good to apply these optimization methods to my sites. One of my interview questions is “How would you optimize page load of a site” so if anyone ever asks me that, I not only want to be prepared, I want practical experience!

I’ve also been doing quite a bit of photography lately. I’m at 13/43 statues. From 1/8 to 1/3 done :) I’m getting there…

HordeRockCafe.com updates!

Wednesday, February 20th, 2013 at 3:26 pm

LULUL touched this site like, 2 times in 7 years.

Recoded ASPX to PHP

horderockcafe.com

It’s crazy to see the code there from 7 years ago.
TABLES EVERYWHERE.
SPACER FUNCTION EVERYWHERE.
INLINE CSS EVERYWHERE.
I didn’t really understand CSS at the time.

Other worldofwarren.com updates!

Wednesday, February 20th, 2013 at 1:27 am

Just realized that I should also blog about my other changes to worldofwarren.com. After all, it’s awfully rare to do updates to this site…
Also..I wanted to bring up my Feb blog post count up >_<

  • Removed div tags with id “header”, “footer”, “navigation” and replaced it with real HTML5 tags.
  • Also cut down quite a bit on the CSS naming/names. Removed unnecessary code that I thought was required for specificity…but now find better ways to find elements (CSS 101…taken again cuz apparently I failed the first time). Swapped some ids out and put classes in. Made names shorter which meant I had to change CSS and JavaScript references to those items
  • Updated the JavaScript to use jQuery a bit more for retrieving and modifying DOM elements
  • Removed some “clear:both” div tags and replaced it by adding the “cf” class to divs, which is a clear-fix…um…fix. Got that from responsify.it
  • Was planning to include Modernizer into this…but decided not to. Don’t really see a need to cater to older browsers, not worth the bloat. Should include it on my warrenshea.com

Tomorrow: Responsive layout for kotobishoujo.com OR PHP MVC admin tool

Responsive Layout + worldofwarren.com

Wednesday, February 20th, 2013 at 1:04 am

About 5 minutes after my last post, I realize…I can’t really do a fully responsive layout with all my themes. Some of the themes will work with a responsive layout (gmail, google+); some (megaman, naruto) will not. So I’ve decided not to support multiple themes on mobile devices, much to my girlfriend’s dismay (she likes the megaman theme).

As such, I’ve been able to create a responsive layout that will occur upon using the Google+ Theme (which is the default theme).

Going to my site on a variety of resolutions will now show different results. Breakpoints are:
1000px, 768px, 480px.

It looks like:


Click the picture for a bigger one.

It was pretty easy. While it’s not the proper 16-grid responsive layout that I originally wanted to do, this custom responsive layout serves its purpose. If not for my multiple themes, I’d definitely want to properly do this. Not sure if I should be doing it for my warrenshea.com site. Its current layout is so much a part of the site…I don’t know if I can/want to mobilize it.

Anyways, feel free to check out this site on your iPhone or Android! I’m very happy with the results. Having the navigation in a dropdown; having the search at the top will really make going to my site on those drunken nights at the bar when I bring up something from my life easier. That’s the main purpose for this responsive layout, to make my site more usable when i’m drunktarded.

Also – two resources I found useful to do a responsive layout:

  • Responsify.it – a good place for a responsive template. Rather than use some person’s template, I found (and asked around) that it was better to create your own to understand and eliminate bloat.
  • Viewport Resizer – The best thing ever! Saves a bookmark to your bookmarks which, when clicked, adds a small viewport toolbar to change the viewports of your webpage but stay on the same page. You have to see it/use it to believe/understand it. But this thing is AWESOME.

Another domain! Sorta…

Tuesday, February 19th, 2013 at 6:10 pm

Okay. I finally have a DEV/QA environment. Sorta.

Originally, I was going to put WAMP on my local machine…but then I would have to export the database (which is huge) and load it onto my machine. Didn’t really wanna do that, since I’m not touching the database, just the code (at least for this project). Also – I don’t like local development when my computer has a much higher chance to crash than the server where my information is being stored. And they do backups.

So my new dev environment is dev.worldofwarren.com
Note: It looks exactly the same (from a Google+ theme) but its code is different

No longer will I have that line of code at the top of my site indicating it’s being worked on. No more working on the production environment on the fly. I generally don’t mind as my changes are quick but this time, they’ll take a while.


I’m working on a responsive layout for worldofwarren.com (and some of it’s themes). It’s not very hard but has some fundamental structure changes to the code including a 16 column grid system.

I’ve also taken the structure of the code and improved it based on my current skills. I understand CSS a lot more than when I did this site, 2-3 years ago and my changes reflect that. I’ve been able to cut part of the structure by 10%. I did find that with my understanding of CSS, my CSS code has actually become bloated, following this structure. So as I’ve acquired more skill, my code for specificity has become too specific – and it needs to be minimized. So I’m trying to do the same with CSS with less code. Tricky for one such as I, who fundamentally opposes the principles of “less is more”.


In the process of building a simple CRUD + Login tool in PHP at work. Going to use an MVC Framework with it…maybe eventually build my own PHP Framework like some people I know.


Photography is going well. 10/43 statues done. 25% of the way isn’t bad :) Gonna keep on truckin!