Warren Shea - World of Warren

Archive for the ‘CSS’ Category

Tutorial: CSS3 DIV Shadow

Tuesday, January 17th, 2012 at 2:36 pm

Purpose of this tutorial
To put a nice, subtle shadow just below a DIV. This shadow fades out to the background and is alpha transparent.

What you need to know
HTML and CSS

Note
While this generally works on any website, it doesn’t work too well with my themes, other than Google+ theme. I suggest you use that theme to properly see this.

Example

Code

Explanation
The key things are
.box_example’s position:relative
and…all of .box_example:after‘s CSS.
I guess playing around with the CSS to get the shadow you want. There’s not much else to discuss…lol worst tutorial ever :)

My ramblings
I just found this out through a co-worker and I’m using it everywhere. I think it’s a very simple, subtle way to make an item pop out a little more. FYI he first saw it on LinkedIn, here developer.linkedin.com

Posted in All Posts, CSS, HTML5, Tutorials | 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

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 »

<in Orcish> Werk Werk!

Friday, March 18th, 2011 at 1:48 am

So the senior developer that works with me has gone on vacation this week so I’m helping out with 3 of his tasks.

And while the timelines are tight (one week) and as of today (Thursday), I’ve only fully completed 1 of them, I gotta say that I’m having more fun working than I have in months. I can’t disclose the nature of the projects for obvious reasons…but 2 of the 3 of them involve learning something new or building something interesting. And the third project, the one that doesn’t involve learning something new…likely won’t get done by the end of this week :D

Anyways, one of them, let’s call it Project X, involves
1. Developing in a better language than I’m used to.
2. Developing on a different browser and platform.
It’s just…different. Challenging but within my reach.
The best part is that I can apply the things I’ve learned in Project X to warrenshea.com. So I may do that in the near future. Again, I can’t tell you what I’m doing yet….be patient, I’ll reveal it in a matter of time.

So on Sunday-Monday, I worked from 2am-6am. That was brutal and pretty much messed up my day. Good thing for Overtime Pay :) Well, technically I slept from 6am-noon so I missed a few hours in the morning. But ah well, I made it up that night (had to do some testing from 5pm-7pm).
Tuesday – Worked from 9:30am-10:30pm on Project X (13 hours)
Wednesday – Worked from 9:30am-Midnight on Project X (15.5 hours)
Thursday – Worked from 9:30am-4:30pm on Project X, went to Richmond Hill to have dinner with my family (parents, niece, nephew, bro, etc.), came back, worked AND FINISHED Project X! WAHOO!
Friday (tomorrow) – Work on Project Y from 9:30am-5pm, go to a basketball game (Raptors VS Wizards), maybe go to a birthday dinner after, and then come home and hopefully work on Project Y
Saturday – Possible Birthday party (another one), possible Toronto Comicon. If I don’t do that, I’ll be working on Project Y.
Sunday – Project Y.

So Project Y involves (from a technical standpoint)
Taking a Querystring from the URL
Loading a server generated XML via a JSP (see next point) but using the Querystring from the URL (thus, using AJAX to generate the XML as it needs to be after page load)
The JSP loads the XML from a cross-domain XML (this must be done so that my page can access the XML and prevent the cross-domain issue)
Anyways, eventually I end up with the XML, unique to the querystring.
I parse it, output the content to the page. I need to create a paging system manually (I’m using only HTML and JavaScript here, no server side languages).
And done!

Well, as I wrote that out, it doesn’t seem hard at all. Time consuming, but fun. Not doing standard HTML/CSS/JavaScript….using AJAX, XML, Querystrings (in JavaScript)…it’s interesting.

Anyways, that’s Project Y. Sounds easy, the (not hardest but) time consuming part will be outputting the XML into the page…I did the same thing here: [Redacted] a couple years ago…that was fun. God, there’s SO MUCH JAVASCRIPT on that page. browserDetection functions because I didn’t know jQuery at the time. JavaScript AJAX calls because I didn’t know jQuery at the time. Multiple XMLs, JSON….I had months to do that thing. Project Y has 3 days. So I’m gonna work my arse off partly because of the responsibility I feel that I need to deliver to the senior developer, but mostly because I simply can’t wait to do this. Not sure how much I’ll learn but it certainly sounds fun. 2 days to do it is pretty tight, especially considering it’s the weekend and I might do other stuff on Saturday….but I’m always up for a developing challenge.

I swear, if I didn’t have to work the next day, I would have pulled all nighters doing what I was doing this week. I loved it so much. Coding all night, just me, my music, my text editor and my focused, enthusiastic, eager mind. It’s not everyday I’m so excited to do work after all…I may as well milk it.

Anyways, off to bed. Based on the amount of sleep I’m gonna get tonight…I predict being very tired for the Raptor game tomorrow. Stupid me. Seriously.

Posted in All Posts, Browsers, CSS, Daily Randomness, Development, Family, JavaScript / Java Frameworks, My Life, New Technologies, Web Developer, Work, XHTML | No Comments »

My Personal (Developer) Resolve

Wednesday, January 12th, 2011 at 1:31 pm

Resolve
To be awesome at (almost) all aspects in the limited stage of the web.

*The following is a list on all the web-related items that I already know, would like to learn, and have no interest in learning (despite being related to the web). Some points may not seem to make sense, that is because my knowledge in the area is so terrible that I don’t know what I’m writing >_<

This Resolve includes:

The ability to develop proficiently in various development languages, frameworks, and techniques including:
- ASP.NET 4.0 C#
- ASP 3.0 VB (Classic)
- HTML5
- PHP 5
- XHTML 1.0/HTML 4.01
- JavaScript
- MS SQL (and mySQL)
- Ruby (on Rails) (maybe…)
- CSS2
- CSS3
- SASS
- OOP
- AJAX
- JSON
- XML
- XSL/XSLT
- DOM
- DHTML
- jQuery
- Prototype (and script.aculo.us)
- MooTools
- Google Chart API
- Facebook API
- Twitter API
- Google Search Appliance API
The ability to develop for major browsers including Chrome, Firefox, Internet Explorer, Safari and (maybe) Opera
Familiarity with Web Accessibility standards including:
- WCAG 2.0 standards
- CNIB (The Canadian National Institute for the Blind) Priority Level 2
Understanding of fundamental SEO principles and Analytic tools including:
- Google Analytics
- Google Search Appliance
Knowledge of various Content Management System and Web Publishing tools including:
- Drupal 7 and Drupal
- WordPress and Blogger
- Vignette 7 and Vignette 6
Proficiency in various graphic programs including:
- Photoshop
- Fireworks

This Resolve does not include:

Mobile development (although this may change in the future)
Email development
Development of non-web languages including:
- C
- C++
- Java
- Visual Basic
- Perl
- Python
Development of non-web languages that are fundamentally from the list above including:
- JSP (Java) (although this may change in the future)
- Mason (Perl)
- Django/Zope (Python)
Development of supporting web languages:
- ActionScript
Proficiency in web-related tools including:
- Flash, Premiere, Illustrator
- Silverlight (although this may change in the future)

Posted in All Posts, ASP.NET, Browsers, CSS, Development, HTML5, JavaScript / Java Frameworks, My Life, New Technologies, PHP, Web Developer, XHTML | 3 Comments »

What to learn? HTML5 or ASP.NET?

Monday, January 10th, 2011 at 4:00 pm

The CSS book that I’m currently reading is 350 pages. I’m currently on 230, having gone through 100 on Saturday…and the other 130 in the 2 weeks before -_-; I can accomplish so much in one night if I focus! :S

As I close in on the final 120 pages, which I hope to finish very soon, I’m wondering what to study next?

I decided that for my EPIC SITE, I may as well do it in ASP.NET 3.5/4 AND HTML 5 (not XHTML 1.0).

While the ASP.NET code would compile and render to XHTML 1.0, would that be HTML5 valid? I mean, if I built my site in HTML5, I would like it…y’know, in all HTML5, not HTML5 + ASP.NET compiled XHTML1.0/HTML 4.01.

I really like the look of <br />….<br > just looks wrong to me. It’s how I used to develop…but gave that up to be XHTML valid. Now, <br> is valid again in HTML5 so why do <br />? <br> is 2 characters smaller as well as just as easy to read as <br />

I really (and I wouldn’t be surprised if you thought this too) have a bad habit of procrastinating my ASP.NET learning. Like, did I really need to read a CSS book before ASP.NET? Should I really be reading a HTML5 book before studying a multiple-year resolve of studying ASP.NET?

I’m trying to learn both for my EPIC SITE but I imagine that the learning curve for ASP.NET is much higher than HTML5, with the exception of the canvas tag, which seems very daunting. Like learning ActionScript….bleh.

There’s so much to learn! Not that I’m under a strict time limit, everything is self-imposed…but it seems like if you don’t study frequently, it’s so easy to fall behind in technology. I’m already behind with my current skills…but at least I’m attempting to catch up. That’s leaps and bounds better than the progress from my recent, WoW years.

Posted in All Posts, ASP.NET, CSS, Development, Epic Site (yet to be named), HTML5, New Technologies, Web Developer | 1 Comment »