Choose Your Theme
Warren Shea

Archive for the ‘Web Design’ Category

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.

…in three years…

Monday, January 7th, 2013 at 1:01 am

Today is a special day for me. It’s the 3rd year anniversary since I quit World of Warcraft. Ironically, I was playing casually last month but that whole phase seems to have gone. I’m not sick anymore and back to doing/working on things that “matter”. I wrote a similar post last year and the year before.

What I’ve done in the last year

worldofwarren.com
2012: 164 posts between Jan 7, 2012 and Jan 7, 2013. On average, roughly 13.7 posts/month. As with last year, falling in line with my hope of 150-200 posts.
2011: 187 posts between Jan 7, 2011 and Jan 7, 2012
2010: 308 posts between Jan 26, 2010 and Jan 7, 2011

warrenshea.com
Completed! Even though one year ago, I was saying this was almost done…but I only finished in May 2012. Anyways, finishing this was a great feat and led me to my next project

kotobishoujo.com
45 – retroactive blog posts
55 – pages including statues
3 – other pages (checklist, faq, contact)

Twitter
2012: 594 (totalling 3425 since Jan 10, 2010)
2011: 1486 (totalling 2831 since Jan 10, 2010)
2010: 1345

Improved development skills

  • Improved quite a bit in jQuery, HTML5, CSS3, AJAX this year mostly due to warrenshea.com
  • Improved a lot in PHP due to the Facebook work project I had including learning the JavaScript/PHP SDK, Facebook App Creation, Like Gates, and Facebook and Twitter Share Dialogs
  • Installed/learned WAMP and Media Wiki

Note: Keep in mind that for 95% of these movies/shows/cartoons, I’m not technically just watching them. They’re just ON while I do other stuff, like dev or photography.
Movies

  • Karate Kid [Rewatch]
  • Catch Me If You Can [Rewatch]
  • Rise of the Planet of the Apes [Rewatch]
  • The Terminal [Rewatch]
  • The Prestige [Rewatch]
  • Karate Kid (2010) [Rewatch]
  • Tremors [Rewatch]
  • Training Day [Rewatch]
  • Superman Returns [Rewatch]
  • Gattaca [Rewatch]
  • Kick-Ass [Rewatch]
  • Back to the Future [Rewatch]
  • Wall-E [Rewatch]
  • Avengers [Rewatch]
  • Star Trek [Rewatch]
  • Men In Black [Rewatch]
  • The Rise of the Planet of the Apes [Rewatch]
  • Memento [Rewatch]
  • Jurassic Park [Rewatch]
  • The Lost World [Rewatch]
  • Jurassic Park III [Rewatch]
  • Good Will Hunting [Rewatch]
  • Gone in 60 Seconds [Rewatch]
  • Teenage Mutant Ninja Turtles 1 [Rewatch]
  • Teenage Mutant Ninja Turtles 2: Secret of the Ooze [Rewatch]
  • Teenage Mutant Ninja Turtles 3 [Rewatch]
  • TMNT [Rewatch]
  • Turtles Forever [Rewatch]
  • Casino Royale [Rewatch]
  • Quantum of Solace [Rewatch]
  • Skyfall
  • Independence Day [Rewatch]
  • Jurassic Park [Rewatch]
  • Catch Me If You Can [Rewatch]
  • The King’s Speech [Rewatch]
  • Pursuit of Happyness [Rewatch]
  • Star Wars IV: A New Hope [Rewatch]
  • Iron Man [Rewatch]
  • City of God
  • The Butterfly Effect
  • Indie Game The Movie
  • The Goonies
  • The Illusionist
  • The Prestige
  • Anchorman
  • Avengers [Rewatch]
  • Amazing Spider-man
  • Brave
  • Dark Knight Rises
  • Spider-Man [Rewatch]
  • Spider-Man 2 [Rewatch]
  • Spider-Man 3 [Rewatch]
  • Jiro Dream of Sushi
  • Avengers
  • Titanic 3D
  • Titanic [Rewatch]
  • Scott Pilgrim [Rewatch]
  • Battle Royale [Rewatch]
  • Up in the Air
  • The Godfather Part III
  • Show

    • House S1-S7 [Rewatch], S8
    • The Walking Dead S1-S3
    • Gilmore Girls S1-S7
    • Glee S1-S2 [Rewatch], S3
    • Pushing Daisies S1-S2
    • Hell’s Kitchen S9 [Rewatch]
    • Breaking Bad S1-S5 [Rewatch]
    • MasterChef S3 [Rewtach]
    • Dawson’s Creek S1-S6
    • Big Bang Theory S5 [Rewatch]
    • Mistfits S3
    • One Tree Hill S1-S4 [Rewatch]
    • Glee S1-S2 [Rewatch]
    • The Glee Project S1

    Cartoon

    • Teenage Mutant Ninja Turtles (1987) S1-S9
    • Teenage Mutant Ninja Turtles (2003) S1
    • Samurai Pizza Cats E1-E13
    • Spectacular Spider-Man S1-S2 [Rewatch]
    • Batman The Animated Series [Rewatch]
    • Justice League: Doom

    Anime

    • Tekkaman Blade II
    • Tekkaman Blade
    • Steins;Gate
    • X-Men Anime
    • Persona
    • Spirited Away

    Reading

    • The Art of Racing in the Rain [Novel]
    • Ultimate Spider-Man 1-89 [Comic]
    • Amazing Spider-Man 654-700 [Comic]
    • Prince of Tennis Vol. 1-42 [Manga]
    • Hikaru no Go Vol. 1-23 [Manga]
    • Neon Genesis Vol. 13 [Manga]

    Gaming

    • Super Mario Bros. Wii U [Wii U]
    • Contra III: Alien Wars [SNES][Replay]
    • Teenage Mutant Ninja Turtles IV: Turtles in Time – Normal Mode [SNES][Replay]
    • Teenage Mutant Ninja Turtles IV: Turtles in Time – Hard Mode [SNES][Replay]
    • Kirby: Return to Dreamland [Wii]
    • New Super Mario Bros [DS]
    • Super Mario 3D Land [3DS]
    • Zelda: A Link to the Past [SNES][Replay]
    • Braid [PS3]
    • Kirby: Return to Dreamland [Wii] [Replay]
    • The New Super Mario Bros 2 [3DS]
    • The Legend of Zelda: Skyward Sword [3DS]
    • World of Warcraft – 80-85 – Annataz
    • World of Warcraft – 80-83 – Aldino
    • World of Warcraft – 80-83 – Sheaman
    • World of Warcraft – 80-82 – Blackcanary
    • World of Warcraft – 80-81 – Sudoku
    • World of Warcraft – 80-81 – Grimlock
    • Tiny Tower – 161 Floors
    • Diablo 3 – Level 43-52 (Monk) – Normal mode, Nightmare done, Hell mode Act 1
    • Diablo 3 – Level 1-20 (Demon Hunter) – Normal mode

    Art
    None

    Photography

    • Kotobishoujo: Scarlet Witch
    • Kotobishoujo: Phoenix
    • Kotobishoujo: Dark Phoenix
    • Kotobishoujo: Batgirl Black Costume
    • Kotobishoujo: Poison Ivy
    • Kotobishoujo: X-23 X-Force
    • Kotobishoujo: Christie Monteiro
    • Kotobishoujo: Catwoman
    • Kotobishoujo: Liara T’soni
    • Kotobishoujo: Supergirl
    • Kotobishoujo: Evil Supergirl
    • Kotobishoujo: Wonder Woman
    • Kotobishoujo: Batgirl Black Costume
    • Kotobishoujo: Supergirl
    • Canon Rebel T3i – new DSLR camera!

    Video

    • Converted 22 VHS Tapes to Digital
    • Converted 12 Camcorder Tapes to Digital

    What I hope to accomplish this year

    worldofwarren.com
    I hope to consistently update my achievements section.
    I also hope to do a few figure reviews. I have a lot of toys that don’t get much spotlight and I’d like to give them some.
    If this blog stays as is – a journal of my life – I plan to leave it as it. If I change the direction of this blog, I would hope to create a Facebook page for this.

    warrenshea.com
    This is done and I haven’t been updating/needed to update it much. At some point, I’ll have to gather any projects worth showing from May 2012 to now and add them to the Porfolio section. Otherwise, I’m pretty content with this.

    kotobishoujo.com
    I purchased the domain for this last year, in Oct 2011 but only started doing stuff with it in May 2012. It’s been about 7 months and while I’ve done a lot, there’s still much to do. My hope is to definitely finish this thing this year. And then I can start with other stuff…

    Blogging
    I’m content with my blogging. It’s not as much as I’d like but I don’t have the content to fill…so it all works out :)

    Reading, Art
    Don’t really care about these two things anymore…

    Gaming
    Here’s my Gaming TO DO list:
    The Legend of Zelda: Ocarina of Time [Replay] – In progress already
    The Legend of Zelda: Majora’s Mask
    The Legend of Zelda: Skyward Sword [Replay]
    Mega Man 1 – 5
    Mega Man Zero
    Super Mario Galaxy
    Super Mario Galaxy 2 (maybe)
    Final Fantasy III (VI)
    If I stick to this list, I should be able to get it down fairly easily.

    Photography
    Learn more about Photography !
    Improve on my macro shots including finishing my Kotobishoujo.com pics and adding some figures to my Figure Review section
    Purchase a 50mm (details pending) lens for everyday shots.

    Improving development skills
    Learn MVC and apply it to warrenshea.com (via backbone.js)
    Improve my OOP.
    ASP.NET MVC?
    Become Microsoft Certified in something? SQL?
    There’s a lot I could put here, but technology is always changing…it’s hard to predict what I’ll want to know in the year.


    How I’ve changed professionally this last year

    It’s been a critical year professionally for me. I’ve been looking at posts from the last 3 years and 2 years ago, I had a crushing experience – not getting the senior developer role despite both applying and feeling qualified for it. Oddly enough, I got the role, unofficially a few months after. And I had that role, title and responsibility, but not the pay for a year+.

    After doing the role but not getting paid for it (for a year~) my work ethic changed. It got worse – I’d come in late, and I’d leave early. In a way, justifying my job and low(er) pay by working less hours, to increase my pay ratio I guess.

    And 1/2 way through last year, I finally got my promotion + salary increase. But unfortunately, my work ethic stayed around the same – poor. It only becomes great when I work on an interesting project. And that’s more for personal gain/motivation than professional (well, I guess it’s both).

    So basically, I’m enjoying my life now. I got my senior developer title. I got my senior developer pay. But I don’t work that hard. And I choose the jobs I want…cuz I’m a diva. Though I tend to also take shitty projects. Funny thing is, I actually downgraded my title (but not my pay) to Intermediate Developer, so I that can still develop and do less project management/overseeing. I’d still rather develop than be in meetings and talk/consult. There’s still much to gain from being in the front-lines. I got very good at being confident with my voice and critical thinking/situations – making the right call/judgement in a critical situation. It’s a skill I think will help throughout my life. To weigh my options and determine what’s best.

    How I hope to change professionally this year

    I’ve been casually interviewing. Talking with headhunters. I’m finding that a lot of people find me on LinkedIn, but once they go to warrenshea.com, they’re sold. They want to talk to me about job…cuz my website is so awesome :D Unfortunately, in these scenarios, most of the jobs they offer suck. Not interested in being the only developer on a site/in a company. Sigh…stop offering me that crap.

    Not sure where I want to go professionally actually…but I want to improve my development skills personally and professionally. Again, I don’t always know where I’m headed but as long as I’m pointed in the right direction.


    …in three years…

    I’ve done a lot since I quit WoW, three years ago today. It’s funny, WoW’s not even a part of my life anymore, it seems odd to pay some kind of tribute to not playing it when I barely think about it nowadays. But I guess I must always remember the 5 years, 400 days of playtime I wasted to that game. I must always remember to keep busy to make up for that time.

    Reading last year’s post, I’m in a much better place happyness-wise. And isn’t that what it’s always about? Being happy? The answer is: yes.

    Google’s new top black bar

    Sunday, July 3rd, 2011 at 7:18 pm

    As Google+ has been released, at least in closed beta, I notice they’re generally doing design upgrades to Google products. Good for them…sorta. See, as much as I think Google might be TOO simple…I really hate the new top black bar they have. They have a clean, white, simplistic design…it goes well with theme-less browser colors. But this black bar, it appears between the browser and the page…and it’s just…argh, I hate it.

    I’m hoping the backlash causes them to revert back….but if they don’t, I should update my GMAIL theme(s) to follow suit. It’s an easy change, and I want to/could implement it now…..but I’m hoping Google gets smart and changes it back.

    Anyways…I was supposed to spend all day working on warrenshea.com…but I haven’t done anything :/ I spent almost an entire hour re-doing my Gmail labels. What can I say, I like to be organized.
    Hopefully, I’ll be productive tonight. African Lion Safari tomorrow!

    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.

    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.