Choose Your Theme
Warren Shea

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

(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?

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.

It started with a kunai….

Sunday, September 12th, 2010 at 2:50 am

Naruto theme launched! (it’s ironic that if you’re on the Naruto theme, you can’t click this link…more on that later)

I’ve launched a new theme (finally). It took about 3-4 days/nights of work and about 6 months of procrastination. Now THAT’S being proactive :D

Let’s see…how did this theme come about?
I knew when I developed the website, which launched April 4, that Naruto would be my third theme. I’ve had this idea in my head for a whole half a year but had been busy with other stuff that I couldn’t get to designing/developing this theme until recently. I’d started to see the usefulness of PNGs and I wanted to work with that. I had a desk theme in my head with a kunai stabbing it; its shadow cast over the content. That’s how the idea started…

Awesomeness of this theme:
1) The scroll (which I gotta say I LOVE). I absolutely LOVE the effect it has when you scroll up and down on the page. It’s not apparent on a long page like the homepage/blog but if you go to any other page and scroll to the end, you see it’s interestingness.
2) The photos/shuriken (ninja stars). Basically, I had to figure out WHERE this desk was…originally I didn’t want to show any Naruto characters on the site, I didn’t want one of those “image of person on the screen for no reason other than design” themes. But the photos work itself out so that you can still see characters, without being taken out of the scene. Originally, I had the idea to just have the kunai as a prominent, constant image, as well as some shuriken. Giving it some more thought, I decided to randomly organize the desktop. It literally changes on every screen/refresh. 3 possible combinations/rotating items, around 12 or so different images for each (w/o repeating 2 on the same page). What’s the math for that? 12x11x10 (trying to figure out how to write that in permutations/combinations…but it’s been a long time) 12!/9! ?? <insert cry for help>

Problems with the theme:
1) Glaring problem which I’m well aware of: The kunai.png is on the “top layer”, over the content. What this means is that if you click on a link in the content, there’s a chance you could be clicking on the kunai.png which basically renders the click ineffective. NO WAY AROUND THIS given the effect I want. To be honest, I don’t care. This theme is done for the visual aspect, not the usability.
2) The width of the content is really tiny. I’ve been resizing all my images for a 450 width…that would be my smallest content size. Unfortunately, not all my content fits that, despite trying…sometimes it goes out of the scroll.
3) There’s less content on the right than there used to be for the Naruto theme. The reason is that I didn’t want that content to scroll, on a desk, it didn’t make sense so I cut out a lot of the content but made it static on the page.
4) On a smaller resolution, like 1200×800, the scroll height at the top is far too large. Minimizing the height requires a LOT of work….and not something I’m interested in doing right now. So my apologies on that, I had done the scroll before testing a resolution of that height and well, it was too late to change! >_< Things I've learned: 1) You can do so much (more) with PNGs compared to everything else. Well, I'm still an old school animated gif maker...but I LOVE PNGs. It's like a Photoshop layer...on the web. 2) My site, even 6 months ago, was coded VERY WELL. The framework for CSS possibilities was totally done well, the need for editing the actual code on this page was minor. CSS DOES IT ALL. The difference between my megaman, blogger and naruto themes: all CSS/JavaScript. I'm a bit embarrassed to say that I used quite a bit of JavaScript on this page http://www.warrenshea.com/common/naruto/scripts.js
(At least I commented it :D I -almost never- do that!)
Originally, much of the image placement relied on the size of the user screen, something I need to determine with JavaScript. That actually changed today….so hmmm, maybe I can eliminate some JavaScript. I’ll give that some thought, the load time of this page is a bit much….

One note: I’m an awesome cross browser developer !
I had been developing this site in Chrome and Firefox…and actually launched it without testing IE8 or Safari…but once I launched it, I tested those 2 (had to download Safari -_-;). The page works flawlessly on:
FireFox 3.6.9
Google Chrome 6.0.472.55
Safari 5.0.2
Internet Explorer 8.0

Naruto Part 1:
Oh yeah….I chose Naruto Part 1 (pre-time jump) over Part 2 because…well, frankly I like Part 1 better. The characters are developed, interesting, everything is new and the ideas they introduce are awesome. Almost a decade later and Naruto’s got some nice fights, some interesting backstories…but overall I don’t have the same excitement from it that I did when Part 1 was going on. I’m excited to see new manga but not as excited as I see the fans of One Piece, which I believe has gone on longer than Naruto. I gotta start that, everyone just raves about it….Bleach also is kinda meh for me lately too…despite it looking like it’ll be over in the next few weeks/months. We’re at the final battle but it’s still meh.

Anyways, that’s it for now, take a look at the theme and provide feedback.