Choose Your Theme
Warren Shea

Archive for the ‘Megaman’ 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…

Posted in All Posts, GMail, Google+, Megaman, Naruto, Web Development, worldofwarren.com | No Comments »

(Major) Site Updates

Sunday, April 24th, 2011 at 2:32 pm

About a week ago, I started some heavy dev on warrenshea.com.

Here are my fixes:

  • The ul/li spacing on bullets (for all 4 themes)
  • Added FourSquare and Flickr (signed up today!) to my Social Media Icons
  • Twitter feed is now taken via PHP as opposed to JavaScript
  • All JavaScripts have been combined into 2 JavaScripts: JavaScript libraries (which contains JQuery, jQueryUI, SWFObject, Konami Code, and JQuery prettyPhoto libraries) and the regular javascript file (containing various inline JavaScript, etc). Originally I wanted a single JavaScript file but I figure that the JavaScript Library file doesn’t change but gets loaded every time. This way, the 143kb file, which is of considerable size, can be loaded via cache while the 22kb file that changes dynamically with each theme and page will be loaded each and every time. Better to do it this way than to load a 165kb (143 +22) file every time.
  • All CSS has been combined into one as well, including media print and media screen
  • Megaman theme has combined 18 images into one sprite.
  • Blogger theme has combined 4 images into one sprite.
  • Naruto theme has been tweaked slightly, the kunai is now gone and it’s now a functional, usable site. I’d been meaning to do this for ages…but I was lazy
  • Gmail (and Megaman) themes used to use JavaScript to determine the width of the main content. It no longer uses JavaScript and the width is determined via CSS. This means that the page loads faster on both these themes (this is due to the width not longer loading during page load, as it was before via JavaScript). Now it loads “instantly”.
  • Due to the revision, all pages should be 1/5-1/3 smaller in file size, as well as have significantly fewer server calls. It’s quite a considerable improvement!
  • On a backend side, made it so that only 1 “sidebar.php” (the right navigation) file exists, all in one spot as opposed to the old way, in which every directory had it’s own sidebar.php…just another way of centralizing things

To Do:

  • Any (unseen) fixes due to the code changes
  • I’ve done .GIF sprite conversion but I still need to do .PNG sprites…and, not sure if it’s possible to do repeating background images with sprites but I found it not possible…so all my repeating images are still single, standalone images. Will need to research that more.
  • Professional Theme, Simple Theme (already sorta done…), and Mobile Theme
  • Fix Mega Man item preload image

While the changes are mostly unseen, it’s not to say they aren’t felt through the hopefully faster load times and less server processing…or is it more? Less client-side stuff at least, which is a good thing…it also makes it easier (for me) to create more themes. Anyways, glad it’s done. I worked pretty crazily on this the last 6 days….it honestly felt a lot like when I played Zelda. I’m a creature of….obsession. Once I start something that’s within my grasp and motivation to complete, I just spend all my time on it. The real question is…what’s next?

Posted in All Posts, Blogger, GMail, Megaman, Naruto, Site Updates, Web Development, worldofwarren.com | No Comments »

Radical Web Ideas

Tuesday, April 19th, 2011 at 9:03 pm

I have begun a revamp of my entire site (warrenshea.com). I started yesterday but I was finding warrenshea.com/megaman too hard to fix while maintaining the other themes.

I can change the stylesheet but I can’t change the name of divs in the HTML without changing global code, which means I would have to change the other styles. Anyways, big pain.

What I decided to do, temporarily, is make worldofwarren.com my warrenshea.com dev site, at least while I do these major updates. You could check it out but it might be down…I figure this will take some time to do. I’m excited though.

So anyways: Radical Web Ideas

  1. Combining Stylesheets
    Turning
    -reset.css
    -stylesheet.css
    -stylesheet_blog.css (the wordpress css)
    -print.css
    -prettyPhoto.css (the image viewer)
    into one css.

    But the thing is, there are actually 4 stylesheet.css and 4 stylesheet_blog.css files, one for each theme. So instead of combining 5 stylesheets together, it’s actually combining 11 stylesheets together. That’s actually quite difficult.

    So what I’m doing go to is load a .PHP with a CSS header (instead of a .CSS). I’ll put all my stylesheets for every theme in there, but only output the necessary CSS needed, keeping to stylesheet small, all in one place, and have it only do one call to the server.

  2. Combining Javascripts
    Same deal as above. Rather than call Google and the jsapi (making numerous calls – jquery, jquery-ui, swfobject), I will house all the scripts locally, in one file as well. Also, I call a bunch of scripts too…custom one. I’ll centralize that as well
  3. Get Twitter feed via PHP and Twitter API and output via PHP, w/o JavaScript
    Rather than need Twitter’s JavaScript to load to make the rest of my site load, it will all be PHP, reducing a JavaScript call.
  4. Re-write HTML for many of the pages. A year ago, when I built the site in Apr, I thought my skills were great. Now, I feel my skills are just as good but I can see how bad I used to be. “You don’t know what you don’t know”.. Anyways, I plan to fix some terribly badly named divs, switch some ids to classes, etc.
  5. Re-evaluate my wordpress changes and code/css for those items
  6. Re-do the RSS feeds…currently they’re outputted with wordpress widgets…I want to change it to standalone code written by myself.

Overall, the point is optimization. Yes, my site loads slow (especially lately… :S) and it’s probably me.

Right now:
1 – HTML Request
5 – CSS Request
9 – JS Request

Ideally I want to make it
1 – HTML Request
1 – CSS Request
3 – JS Request (maybe less if I can…)

Anyways…yeah, working on worldofwarren.com as my dev site.

Posted in All Posts, Blogger, CSS, Development, GMail, Megaman, Naruto, PHP, Site Updates, Web Development, worldofwarren.com | No Comments »

Site Updates: Mega Man theme (kinda-not really-could be downgrade?) upgrade

Sunday, September 5th, 2010 at 11:51 pm

Given my most recent post regarding re-doing the navigation, I decided to tweak the Megaman theme around a bit…it no longer mimics the blogger theme (just harder to read). It now does a pretty different thing all together, the middle div being the scrolling div and the header and footer staying consistently where they are. I hope that it’s still okay to read on smaller screens….i’ve been testing it on Chrome 5, FF 3.6.8, and IE8 on both the 1280×1024 resolution and my widescreen 1920×1080 and I’ve got everything working in all 6 scenarios.

What do you think? Improvement or regression? evolution or devolution? shinka or…(opposite word for japanese “evolution”). Shinka…I learned that from Digimon. My favorites were Angemon and Angewoman and Wargreymon. Basically, angels (go figure), and Wargreymon…cuz his name was kinda like Warren. A nickname of mine was “Warrenmon”…cuz…well, I hope I don’t have to explain it.

Whoa, got a little side-tracked there.


Yes/no?

Let me explain the icons:
Blog Man -> Proto Man (MM3+) – Cuz Protoman is cool…and like, the main character…if not for Mega Man, thus he should be the main page…
About Me Man -> Gemini Man (MM3) – Cuz I’m Gemini
Hobbies Man -> Metal Man (MM2) – Cuz Metal man cuts things…like Arts and crafts…which are my hobbies?
Projects Man -> Napalm Man (MM5) – Cuz he’s got a freaking missle on his head. He’s awesome. That’s what I do. I DESTROY projects…in a good way.
Portfolio Man -> Quick Man (MM2) – Cuz Quick Man is quick…and when I do my stuff, I’m quick. This doesn’t bode well with the ladies though :/
Gallery Man -> Drill Man (MM4) – Cuz Drill Man looks kinda like this Chouji relative (Naruto series)…and I like to doodle Naruto

Drill Man

Akimichi

Code Reference Man -> Wood Man (MM2) – I just like his icon…he’s got a leaf shield! Isn’t that the worst, protective shield ever?!
Resume Man -> Magnet Man (MM3) – Cuz when people read my resume, they’re drawn to me…like a Magnet…cuz I’m so attractive (on paper…and IRL).

I feel bad if you read all that, it’s gotta be some of the worst BS I’ve ever written.

.
.
.

I’ve been going over the Naruto theme in my head recently….excited to start it :D

/spits in Sleep’s face. It’s okay, it gets me back…in the form of drool…that my face rolls around in whilst I sleep.

Posted in All Posts, Megaman, Site Updates, Web Design, Web Development, worldofwarren.com | 2 Comments »