Warren Shea - World of Warren

Archive for the ‘Web Development’ Category

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

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.
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
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.
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.
Re-evaluate my wordpress changes and code/css for those items
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 »

Developers start counting at 0

Tuesday, October 26th, 2010 at 4:45 pm

So I spent a good hour or so trying to get subcategories to show up on the right panel….
It wasn’t showing up, despite putting in parameter for it (below)…so I thought maybe it was the wordpress code I’d modified. That wasn’t it either.

To show categories, you have to put:
<?php wp_list_categories(‘depth=1‘); ?>

By default, wordpress shows subcategories…so you just have to specify the depth.

So here I’m thinking all categories belong in depth 0
Subcategories belong in depth 1
Subsubcategories belong in depth 2, and so on.

And after of trying to debug this, (and I probably should have done this at the start), I modified depth to 2 and it worked.

So basically,
Categories belong in depth 1
Subcategories belong in depth 2…
and so on.

Man, I feel stupid…but…it’s an honest mistake no? I guess I’m just so used to counting at 0, especially when I see all this code….”who starts counting at 1?” I asked myself…but…the answer is non-developers. But still, this *is* still PHP code…so…man, i dunno.

Anyways. Time wasted….

I need to re-categorize everything. I hate my categories. Can’t find/do anything.

Posted in All Posts, Development, PHP, Site Updates, Web Development | No Comments »

warrenshea.com VS CGI Timeout

Sunday, October 24th, 2010 at 7:08 am

It took a while, but I’ve finally removed that pesky CGI Timeout issue….I think.

I’m pretty sure it’s been caused by having the themes session variable you’ve all been using when you browse my site. I imagine that because the session variables are stored on a session server, if the session server takes too long retrieving the variable, my page can’t load….so it times out.

I’ve rectified the issue by making the theme variable store inside a javascript cookie. Anyways, here’s hoping this fixes it! :D

I’ve been updating my last post, Vacation Time frequently! I may not blog much during my vacation but I plan to keep that schedule updated!

Posted in All Posts, Site Updates, Web Development | No Comments »

Site updates and annoyances

Thursday, September 23rd, 2010 at 6:18 pm

Site update:
My homepage, the blog aspect, and all my themes on warrenshea.com is now HTML valid! I learned you cannot, validly, put an anchor tag around a div tag….so i had to modify my megaman icons as well as my social media icons to have div around empty anchor. set the anchor to width 100% and height 100% and you’re golden.

Annoyances:
I almost always have my GMail open. My favorite and most used theme is my GMail theme (it’s so easy to read stuff on it!). The fav icon for my theme is done a little TOO well, I get my site and my gmail confused all the time! it’s certainly annoying to build something and, even though you built it, have it bother you…and not be able to change it (because it’s perfect the way it is!)

EDIT:
oh man, i completely forgot. there’s an addition to the gmail theme I wanted to do like, 2 weeks ago but forgot about it. i’ll do that asap, it should be quick. nothing special but kinda interesting.

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

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.

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