K Key

My K key is back!
We just replaced the keyboard on my Sony Vaio Laptop FS Series. Since I couldn't find any instructions online, I wanted to show step-by-step how its done.

DISCLAIMER: All actual work in this tutorial was performed by a professional computer-geek. No normal people were harmed in the process. In fact, replacing your laptop keyboard is easier than you might think.! I'd recommend trying this at home, its much cheaper.


First, remove the battery and unscrew the two screws on either side


Now, you can carefully pop-off the black cover that sits at the top of the keyboard. This piece snaps into place, so it is a little tough to get on and off.


Next you will slide out the keyboard BUT FIRST you need to unscrew: Unscrew the four screws that are holding the keyboard in place from the top - then flip over the laptop and remove one more screw. There is a single screw that holds the keyboard into place from the bottom. Take a look at the replacement piece to get an idea of where this is located.

Take note of how the ribbon at the bottom of the keyboard is attached. This can be removed by carefully sliding the black plastic clamp out towards the ribbon. Once the clamp has been pulled away from the cream colored plastic cover, the ribbon will easily come out.

Slip it out, then back in.
Repeat previous steps in reverse order - Don't loose the tiny screws!

Great Job. Type like you've never typed before and clean your messy-ass desk!




(I never knew you could do this so easily, pretty cool eh?)

Trends & Cliches in Web Design

I'm putting together a bunch of visual resources for web design trends that i've come across lately. Two are most notable, and one shines brightly: ModernLife and Smashing Magazine have both written similar summaries, and DesignMeltdown serves as a constant inspiration with the Daily Slurp and massive design/style showcase.

Here is my condensed|expanded version:

Simple Layout.
http://www.distinct.ie/index.html
http://www.nofrks.com/
http://www.clearfocusdesigns.com/
http://freesbe.es/

Centered Orientation.
http://www.munaya.com.br/
http://www.paul-wallas.co.uk/index.html
http://www.netdreams.co.uk/
http://www.weslicetomatoes.com/

3-D Effects light
http://www.whoooz.nl/
http://www.mccoy.co.uk/
http://www.vbski.com/gallery.php
http://ma.tt/

Gradients & Neutral Backgrounds.
http://www.icdcouriers.co.uk/
http://docsource.sundance.org/
http://www.ohvavaho.com/blog/

Whitespace.
http://www.plankdesign.com/en/
http://www.designedbyanderson.com/
http://chrisgross.net/
http://www.fulcrum-cm.co.uk/

Icons, Badges & Characters
http://www.4recruiting.co.uk/home
http://www.trevorberg.com/
http://www.sitemakers.co.uk/
http://www.dailyslurp.com/default.aspx
http://unite.blogcatalog.com/

Big Text.
http://postmachina.com/
http://www.sublime-digital.com/
http://www.rafaelzundt.com/
http://www.ricardoarce.com/
http://www.citrus7.com.br/
http://www.typeansich.be/exhibit/pierredisciullo/index.html

3's
http://www.bitsandpix.de/
http://www.mansz.pl/
http://www.dee.ie/
http://eutelnet.com/

Transparency/Layers
http://www.hillaryclinton.com/
http://www.belgrade-jazzfest.org/
http://www.bestof.cz/

FLASH Universe.
http://www.depthskins.net/
http://www.newbalance.com/outdoor/
http://unscrewamerica.org/
http://www.unkemptstudio.com/
http://prospectdenim.com/
http://www.chickenjam.eu/

Grung/Drip/Swirl
http://skate.share.ea.com/language.aspx
http://rawnet.com/
http://www.imlousekstudio.sk/en/home

Themes:
Wood
http://www.paul-wallas.co.uk/index.html
http://www.davidhellmann.com/
http://www.designedbyanderson.com/
http://unite.blogcatalog.com/
http://www.gym-bohumin.cz/community/
Collage
http://www.shawnjohnston.ca/
http://www.chemistryrecruitment.com/
http://www.gotaqua.com/
http://www.rxmonsters.com/
http://boostup.org/
http://chicas.elansnowboards.com/

Back in Blog

Last night's WordPress Workshop at Indy Hall really got me motivated to start sharing more of my getting-bigger-and-better-each-day know how. The event was great - there was a nice sized turnout, many good q's, and some local experts eager to share their knowledge. Can't wait to see how it develops!

So i've been working alot with JavaScript lately, and although i'm far from actually knowing the language, i've had some pretty good luck creating killer effects using JavaScript libraries. Scriptaculous has been on my radar for some time now, but no matter how much I looked at the documentation, I just didn't get it. It turns out that the amazing effects are very simple to achieve, and i'd like to share that lightbulb moment for how to begin using JavaScript Effects.

1) First, download Scriptaculous.
2) Link to the JavaScript files that you just downloaded in the HEAD section of your webpage. The code will look something like this:


3) Next, find an effect that you like in the effects engine. My favorite place to browse these is in the Scriptaculous Wiki.
4) To apply an effect you need to do two things - First, you need to assign an id to the element that will have the effect applied to it, and second you will need to create an event that triggers the effect. If desired, the element that is displaying the effect can also be the element that triggers the effect. Let's look at the code first, then some examples.

CODE: Looking at the effect 'BlindUp' we see that the effect is called with this function:

So what that bit of code says is 'apply the BlindUp effect to the element with id="my_element"'. An element that you apply the effect to can be almost any HTMLelement, the most common ones being DIV IMG SPAN, etc.
Now that you have an effect defined for an element, you will need to define an action to trigger that event. Its EASY! Any HTML element can have an action as one of its properties. Common actions are onmouseover, onmouseout, onclick, etc. Any good HTML editor (even Dreamweaver) will give you code hinting to show which actions can be defined for an element. Or you can see a full list at the W3C Schools.

To give assign an element an action, all you do is list it in the opening tag, in EXACTLY the same way that you assign an ID and other properties like WIDTH and HEIGHT. Here is how you would assign an action to a DIV:

EXAMPLES
So to put it all together, you will place the function that we defined above which applies an effect to an element inside the event trigger like this:


The above code would cause a blind up effect for an element with an id of 'my_element' (which might be an image for example) each time there is a click on the DIV with an id of 'trigger'. You could also assign an effect to the same DIV, which would look like this:


Meaning that each time there was a click on the DIV with an id of trigger, it would fold-up with the BlindUp effect.

So there you go! Step-by-step directions for implementing Scriptaculous JavaScript effects.

Using a library such as this one makes it extremely easy to use JavaScript with your web page designs to being to build interactive elements - even if you don't know the language. Of course, this stuff is extremely addictive, so if you're anything like me, once you see it up-and-running you will just want to build more and more complex interfaces. Unfortunately there's no four-step tutorial for that...

Delicious fruit flavor + absurdist messaging

I've been honed-in on the trend of absurdist marketing campaigns for awhile now, but a post in AdFreak today has really perked my interest. Some of this stuff is just too good to be true, and watching a few spots starts to feel just like an episode of Tim and Eric Awesome Show (Great Job).
Specifically, Skittles and Starburst have gone head-to-head with the weirdness. Personally, I'll call Skittles the winner on this one, mostly because their switch at the end from bizzaro-world to 'BRIGHT SKITTLES SCREEN' is more effective than the similar Starburst transition.

The best absurdist campaigner in my opinion is Comcast, whose 'Spidey Rommie' spot gets me every damn time (I think its b/c I can relate to tiny dog torture in the form of odd costumes).
Perhaps that is what is at the heart of this type of messaging - it plays with your sense of reality effectively displacing your role as consumer. Instead you sort of 'wonder' at the message, and perhaps can even relate to it in some way in the disjointed pseudo-reality that you are presented with.
So weird, so cool.

I would totally trash the DVR if I had the option of only viewing commercials in this style. In the meantime, i'll have to keep fast-forwarding and look to the web for my healthy heaping dose of weird.

Thank you, double feature

This week's Philly PHPMeet-up was all about Drupal. The night was jam-packed with many wonderous things, including some of the latest and greatest drupal modules, philly-based sites powered by drupal, and even the drupal song (DANGER:ITS UBER-CATCHY and has remained firmly embedded in my brain since I first listened to it over-and-over again)

Two of the most interesting non-drupal things I first heard about last Tuesday night were Habari and Snag-it. Habari is an open source blogging platform that is being developed right here in Philadelphia, and Snag-it is a wonderful little program that allows you to quickly and easily take screen-shots and pimp them up all nice-like in one simple step.

I am so jazzed about both of these, that I decided to install Habari and produce a step-by-step tutorial using Snag-it. (The tutorial's target audience is a total n00b with a hosting account with Site5, who wants to get in on the early stages of this home-grown 'next-gen' blogging platform)

Here goes:
First, download the package here. Then extract all the files.


Next, create a new directory on your site, and transfer the files using FTP. If you need a good FTP program, download FileZilla - its super-easy to use and totally free.



Now its time for database stuff. Lucky for me, my Site5 account makes it nice and candy for anyone one who can point-and-click to manage databases. Simply log-in to site admin, and select 'mySQL Databases' --> Manage Databases. Scroll down to the section labeled 'Create mySQL database', and give it a name.



Once you have created the database, go back to 'mySQL databases' --> 'Manage Users'. First, create a user, and assign a password. Then, go to the section labeled 'Grant Permissions' and select the database and user you just created.



Now for the fun part! Your first look at Habari's simple-chic interface. To complete the installation, all you need to do is view the directory that you uploaded your Habari files to in a browser.



Fill in the information about the database name, user, and password that you just created. Give your new Habari Blog a name, and click 'Install'.



Voilà! - you have a shiny new home-grown blog!

So there you go - one night, two awesome new-to-me tools, one colorful tutorial. Now I'm off to get my hands dirty hacking into Habari to see what I can find.

woohoo!

Hack 'till it hurts

Lastnight was a marathon Wordpress hacking session.
*/Breif History/*
After starting with lofty ambitions of Building a Wordpress Theme from Scratch, then giving up on Worpress themes altogether and going back to the warm comfort of Dreamweaver - last night I found the happy medium that feels like home.
*/end/*
I downloaded and installed a fresh copy of the default 'Kubrick' theme (which I had already hacked to bits once before) and began working carefully to modify it piece-by-piece being mindful of staying within my means.
I had great success adding a new footer div that spans the entire width of the page, no sweat. I can really feel my CSS skilz growing stronger every day.

Four hours later it was looking really good, but getting late...
I spent entirely too long looking at wp_codex in a vain attempt to make my monthly archives display in a clean, neat European-style date (mm.dd.yy) instead of the cloddy full_month_name year format. Changing those settings for the blog itself was as simple as looking at PHP date parameters, but getting that to display in the sidebar as 'Archives' is another story. Around 1am I ended up just opting to display the yearly archive, and went to bed with a smile on my face thinking about what the future holds for echo{Ability}.

(falling in love with Wordpress, one late-night session at a time)

Remove the Blogger Brand

The PANMA Web 2.0 Shootout last Thursday was a blast. My presentation on Blogger was great success, or so I was told...The one point that was mentioned in conversation afterwards was the nagging Blogger brand that must always grace every Blogger Powered Blog(or so you thought!) Well, it turns out that completely removing the Blogger Brand is easier than you think.

1) How to remove the Blogger Bar:
Who knew that by simply inserting one simple line of code into the top of your template's HTML you can completely hide the Blogger headbar? Well, these guys did, so now I know how to also.
Simply add this line to the very top of your template:

#navbar-iframe {
display: none !important;
}

To edit your template's HTML, simply click on 'Template' 'Edit HTML', paste the code as shown below, and then save the changes.


2) But what about the ".blogspot" domain?
That's easy! Blogger offers two options for you to have a custom domain name. You can either create a sub domain for your blog and change your DNS record to point to the google, or you can publish to your blog using FTP to your site. For more detailed information, check out Blogger Help.

3) Well, the favicon still gives away the fact that my blog is a 'mere blogger blog'
Truf, but have no fear! Simply tell your template where your favicon lives and wola!

link href="%27http://www.ascentive.com/favicon.ico%27" rel="'shortcut"
link href="%27http://www.ascentive.com/favicon.ico%27" rel="'icon'/"

Now you have a fully-branded blogging platform.