Web Development

...now browsing by category

Calm Seas…

Monday, February 8th, 2010

Today is my first day of being recently un-employed… This post isn’t about how am I dealing with it or how am I finding a new job, although those are great questions I want to focus on more technology and Web Design. The first thing I had to do was buy a new laptop. When I started working with MySQL they gave me a nice shiny new Macbook Pro (2008 Model), ever since then I am a complete convert! Now I have a nice new 2009 model Unibody Macbook Pro with a glossy screen and much improved battery.

I am going to try and focus on improving my design skills, programming, blogging and maybe an iPhone App (I have an idea, now I just need to figure out how to execute that idea). My Macbook Pro:

Big A's new Macbook Pro Unibody

A couple of weeks ago a high school friend asked on Facebook what she should do with her new Mac to get up to speed and what software she should be using, unfortunately I didn’t respond (other pressing issues in my life to deal with at the time). I think the answer to the question varies for everyone, depending on how/what you will be doing with your Mac. In my case this Mac will be used for Personal life use and my Web Development… Oh, I can’t forget it will be used to surf the Internets for my sister-n-laws baby shower, curtain rods and I imagine shoes… and I LOVE MY WIFE

Here are some of the ’standard’ apps we use on a daily basis:

Safari (web browsing)
Mail (I’m currently evaluating Zimbra Desktop)
iTunes
Text Wrangler (Very good Text Editor)
iCal (connected to Google Calendar)
Address Book (Need quick access to the Xmas list)
Skype
Tweetdeck (Twitter & Facebook)
VmWare Fusion (sometimes you need windows)
Flip4Mac & Perian (watch any type of movie in Quicktime)
smcFanControl
Transmission
Handbrake (encode movies for your iPhone)
The Unarchiver (Best archive/zip utility)
Dropbox (Store your most important files in the cloud)
Flickr Uploader

Most of these applications are free or have paid upgrades, and I can’t imagine living without any of them. Keep in mind there are alternatives but I prefer these apps.

Now for my Web Devleopment Apps:

Firefox (Need those Debugging Tools)
Chrome (Fast! Fast! Fast! plus supports CSS3 elements)
Espresso (recent improvements and the price point made this app almost as great as Coda)
Adobe CS4 Master Collection
Cyberduck (Trusty FTP client)
Ubuntu (Dev Environment)
Wordpress
Terminal
the Internets….

Big A's Dock

Everyday I think about how I ever made web pages without Adobe CS3/4, between Photoshop & Bridge alone for me it’s worth the $$$. Again with any application there are alternatives… when working on MySQL.com I mainly used Komodo Edit (Free Version) to do everything, however with recent improvements I have come to love Espresso when writing code. I think the last entry (the Internets…) is the most under appreciated resource for Web Design & Development. I rely heavily upon Twitter and Google to find inspiration, tutorials, time wasters, etc…

So my plan for the futre (besides getting some more coffee) is to update My Portfolio, finish porting it over to Wordpress, read a couple development books I’ve been meaning to devour for a while and of course find a new job. In between there I will continue working on my house, exercise, complain about all the snow and I imagine have a few beers.

-Big A

http://myelectronicsheep.com/wp-content/plugins/sociofluid/images/digg_48.png

http://myelectronicsheep.com/wp-content/plugins/sociofluid/images/reddit_48.png

http://myelectronicsheep.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png

http://myelectronicsheep.com/wp-content/plugins/sociofluid/images/delicious_48.png

http://myelectronicsheep.com/wp-content/plugins/sociofluid/images/facebook_48.png

http://myelectronicsheep.com/wp-content/plugins/sociofluid/images/twitter_48.png

Posted in Web Development | No Responses »
Tags: Portfolio, twitter, Web Development, Wordpress

This dolphin set Free….

Friday, January 29th, 2010

Today is my last day working for MySQL… These are 8 words that I never imagined I would have to say or write when I accepted the position almost two years ago. I have been told that MySQL the product and MySQL the web properties will live on, however I’m not sure in what form or fashion. The last ~2 years have been some of the most wonderful, exciting, frustrating and fulfilling of my entire life. I am extremely grateful to everyone in the organization for allowing me to insert my wacky sense of humor daily and let my creativity blossom.

I am not sure what the future holds, but I can be sure that my experiences within MySQL I am prepared for anything that may come my way. I wish the best for everyone left standing and hope they can keep pushing the Open Source mantra and keep some sense of what it means to be a MySQL Dolphin alive in this new world.

-Big A

Posted in MySQL, Web Development | No Responses »
Tags: Dolphin, MySQL, Open Source

Why I don’t work for $99.99

Monday, October 5th, 2009

I’ve been thinking about this post for a little while and over the weekend I finally had some time to pull together a mock-up for a side project I inquired about doing a few months ago. I was attending a local Tech event in Downtown Denver and met the Owner/Salesperson type for CollarCard.com and they were looking for some site updates, SEO, Adwords help. I chatted a bit with this person, gave him my contact info and setup a time to talk about the project.

Basically I went to www.collarcard.com and was SHOCKED to see a relatively new start-up using a Dark, Un-Usable, TABLE based design. I sent in my proposal to perform basic SEO makover (getting rid of the tables STAT!) and helping out with their Adwords management… Oh and my reduced hourly rate. Having worked with small businesses in the past I was prepared for a counter offer, keep in mind my figure was below $900 since I was going to keep the existing design. ONE HUNDRED DOLLARS! that was their counter offer, ONE HUNDRED DOLLARS! I did counter with a lower figure, which was nowhere near ONE HUNDRED DOLLARS! which was turned down so I obviously walked away…

Over the weekend I spent about ~2hrs coming up with a Mock-Up in Photoshop (keep in mind most Web Design take a week at least if not longer) which I believe addresses a couple issues with the existing site:

Compliant/Accessible Design (NO TABLES)
Readable, no dark text on a dark background
Easy to find/use Navigation
Web 2.0 Asthetic (Nice Shadows, Rounded Corners & HUGE useful Footer)
Big Fonts highlighting User Comments
Social Media (Twitter)

I realize that this design is not perfect and the client might not like the color scheme, fonts etc… however this site is much easier to read and look at. I was able to incorporate existing elements, such as the rotating Text, product features and You Tube ‘Commercial’ (a recent addition). I’ve thought about actually coding this mockup and seeing if I can get my page to get a higher ranking that the actual CollarCard.com site… (devious, I know).

My advice to other designers is to NEVER accept work for less than you feel you are worth! Barter for services, work in some sort of Profit sharing, or spend that time playing Guitar Hero 5, fishing or do what I did and create a nice Mock-Up and Blog about it. I would love to hear your feedback and stories about low-ball projects or cheap clients you’ve had in the past.

-Big A

My Collar Card Design

Posted in Web Development | No Responses »
Tags: Cheap Clients, Collar Stays, CollarCard.com, Photoshop, Web Design

Annoying Design – My Experience with a CBT

Wednesday, September 30th, 2009

I’ve been stock piling some screenshots of various design related content I’ve seen on the web and in this case training I’ve had to complete. throughout the next few days/weeks I plan on writing about my thoughts/complaints about Annoying Design. And here we go:

Last week I had to complete some compliance training for work… HAD TO, was the Final Day or my name went on a naughty list of people who haven’t completed the compliance training… Before each CBT (Computer Based Training) assessment actually started you are required to read some legal jargon and click a button to acknowledge that you read and understood, well maybe not understood but at least read the legalese. These particular CBT Assessments required that your scroll down the ENTIRE page and read ALL of the text before you could proceed, see screenshot:

Look at all the whitespace above the Text!

You must scroll down to see a single line of text!

This is what I would consider not only Bad but Super Annoying design… You’ll notice the very small amount of space the scroll bar must proceed to read ONE line of text and ALL the whitespace located at the top of the window. I’m not sure if this was coded this way to ensure that you actually read the text, or if the developer has a wicked sense of humor. Either way for the user it is extremely frustrating and I imagine for the developer if you corrected the spacing issue, there would be less code since the Scroll to Bottom alert would not be needed. I do have to admit that I didn’t investigate screen resolution issues, however the window is not resizable.

What to take away from this? Well when designing anything you need to be conscious of how users interact with your design/interface. Most users today have larger screens and higher resolutions so you should design your layout for that median group (most common resolutions & screen sizes). It is possible to create a clean, clear, spacious design without introducing such annoyances as having to scroll down for a single line of text. Good luck on your designs, I hope this was somewhat helpful…

-Big A

Note: I’m intentionally ignoring the topic of Accessibility, strictly focusing on my interaction with this CBT and what I can take away from it in my designs. Also since I know you’re dying to know… I passed all my compliance training!

Posted in Miscellaneous, Web Development | No Responses »

VMWare: Network Down

Monday, September 28th, 2009

This is the second time I’ve encountered this issue… I run my development server in VMWare Fusion, Fedora for Work & Ubuntu for my personal stuff (Mainly Wordpress) and every so often I’ll start my VM, open Safari and get a spinning wheel. Website Un-Reachable! Huh? What? I’m pulling an IP address, I can ping Google from the VM WTF? It turns out that Mac OSX sometimes thinks that vmware’s virtual network is down. I’m not entirely sure why this is so, but here is how to remedy the situation:

sudo /sbin/ifconfig vmnet8 up

Run this from a Terminal window and you should be able to ping & access your VM. Good Luck!

-Big A

Posted in VMware, Web Development | No Responses »

VMware Fusion 2, Ubuntu 9.04 & WMware Tools

Tuesday, June 30th, 2009

UPDATE 08/25/2009: I reloaded my Macbook Pro this weekend and install the latest VMWare (Version 2.0.5 (173382)) and did not have to make the below change to the page.c file… it seems VMWare has fixed this issue.

I received a Tweet the other day about how the use of Ruby in the US has exploded. I’ve never used Ruby, but I’ve read that it was created in order to make programming easy, well at least easier compared to other languages. Personally I’ve noticed a handful of more jobs requiring Ruby on Rails. So I figured I would setup a new webserver in VMware Fusion, install Ruby & Rails to see if it really is easier to work with.

Now on to the technical gab…

I use fusion everyday for my Fedora environment (Work Related) and Windoze… don’t worry I wont even go there. So downloading Ubuntu Server 9.04 and installing a new environment was a snap. Ubuntu is my favorite distro, I love the community support, rapid release cycle and apt-get! Here’s where it gets interesting. In order to view my updates in my fedora VM I have to rsync everything over which gets to become a HUGE pain after 10-12 times (and yes I have a shell script to do the dirty work), so I wanted to use the shared folders functionality which requires VMware Tools, so I only need to refresh my browser. VMware DOES NOT SUPPORT UBUNTU SERVER 9.04 OH NO! WHAT EVERY WILL I DO? So this sux, but as every linux enthusiast knows… is not the end of the world, there is a way!

Couple things before we get started, this is done via Command Line ONLY! This is a web server and I don’t need it to take up 12Gbs on my Mac, so we don’t need/want Gnome installed which is the default for Ubuntu Server. If you are not comfortable with the command line, please stop here and speak with your family physician before proceeding… it’s not that difficult, but you will need to know Vi Editor.

So after you setup your VM, update the system, install build essentials and reboot (always a good idea). Next we will need to install the Kernel Headers

Make sure you have updated version

$ sudo apt-get update

Search for kernel version (optional)

$ apt-cache search linux-headers-$(uname -r)

Install linux-header package

$ sudo apt-get install linux-headers-$(uname -r)

Make sure you have updated version

$ sudo apt-get update

Search for kernel version (optional)

$ apt-cache search linux-headers-$(uname -r)

Install linux-header package

$ sudo apt-get install linux-headers-$(uname -r)

Now within Fusion, click Virtual Machine > Install VMware Tools. This will load the virtual disk that has the tools package. Locate the package and copy it to the /tmp directory and unpack the tools package

cd /media/cdrom

cp /media/cdrom/VMwareTools-1.0.3-44356.tar.gz /tmp/

cd /tmp

tar xvfz VMwareTools-1.0.3-44356.tar.gz

Next switch to the folder with the unpacked files and execute the installer:

cd vmware-tools-distrib/

NOTE: The following patch step is obsolete for Version 2.0.5 (173382) and later

Now we need to patch the tools installation. Change directory to /tmp/vmware-t0ols-distrib/lib/modules/source and locate the page.c file (this is were Vi Editor comes into play, although I guess you could install Gnome and use a graphical editor to make these changes).

First we will need to expand the vmhgfs.tar package

 untar vmhgfs.tar

cd vmhgfs-only

Now Vi into page.c, search for the following line:

find page = __grab_cache_page(mapping, index);

and replace it with:

page = grab_cache_page_write_begin(mapping, index, flags);

Save the file and re-tar the vmhgfs-only directory

tar cvf vmhgfs.tar vmhgfs-only

Now go back to the directory where the VMware Tools installer is located,

cd /tmp/vmware-tools-distrib/

and run the installer as Sudo

sudo ./vmware-install.pl

Now the installer will ask a bunch of questions, answer yes (default) to all questions and no to the experimental question. You will then need to verify that vmhgfs is running:

lsmod | grep vmhgfs

If you get nothing then the mdoule is not loaded. You will need to load it with this command:

modprobe vmhgfs

Locate your shared folders

cd /mnt/hgfs

Enjoy! You have successfully installed VMware Tools on your Ubuntu Server 9.04 web server. This information was compiled from about 8 different sources which took me about 6 hours to locate and get up and running, this should help out most users in a fraction of that time. If you run into any issues I suggest you scour Google & the Ubuntu Community Forum, If you leave a comment I will try to assist the best I can. Good Luck!

-Big A

Posted in Web Development | No Responses »
Tags: Linux, OS X, Ruby, Ubuntu, VMware

Wordpress Theming… (Day 1)

Thursday, May 7th, 2009

I’ve started to create a Wordpress theme and plan on displaying my progress here. Now I’ve been hacking Wordpress themes for a while and find it to be pretty easy, especially for the common user. The best thing about Wordpres IMHO is the community and the availability of plugins to customize your blog/site (ie. I’ve installed the Cumulus Tag Cloud, NextGen Gallery for some of my photography and if you’re on IE6 a nice bright yellow bar suggesting you move to a modern browser).

Wordpress Theming can be a very lucrative adventure if you have the time & skill to knock out some nice designs, or it can be a very rewarding non-lucrative venture ie. give away your stuff for free! I’ve had a design I created in Photoshop a while back… it was going to be my portfolio site until I came up with something different. So I decided to use it as a Wordpress theme (which when complete will be available here for FREE, because everyone loves FREE BEER!). So here goes:

Step 1: Create your Layout (CHECK)

Step 2: Mockup Layout in XHTML & CSS (Almost There, screenshot below)

As always this takes a bit of time to make sure there are not any compatibility issues (which everyone knows there are!). I’ve decided for version .1 to stick with a basic 2 column blog layout with the sidebar on the right. I’m working on on finishing all the little tiny layout styles (lists, forms, images, etc…) and I need to add the content for the sidebar, which will look similar to this site (at least for version .1)

Blue & Black WP Theme

Next Steps… Here is my rough plan for executing this project, I’m sure there will be some issues but if there weren’t they this would not be any fun now would it

Step 3: Install MAMP (Check)

Step 4: Install Local Wordpress & Thematic (Check)

Step 5: Separate XHTML/CSS page into Wordpress files (header.php, footer.php, page.php)

Step 6: Cross Fingers, Pray to the Web Gods, Buy Lottery ticket and hope everything works as planned

Step 7: TEST, TEST & MORE TESTING

Step 8: Check Lottery Ticket #’s & realize I need to keep my day job

Step 9: Fix any issues that may arise

Step 10: Post theme here & Wordpress.com, rinse & repeat as needed

So, over the next few weeks I have some updates (hopefully) and we’ll see how this goes. If you have any questions/comments let me know.

-Big A

Posted in Web Development | No Responses »
Tags: Blog, CSS, Theme, Web Design, Wordpress, XHTML

New Milestone – 7 Million!

Tuesday, March 31st, 2009

Just a few hours ago www.mysql.com surpassed 7 Million monthly vists, I don’t have a final number since we still have a fews hours to go. I’m so excited about this, our team works extremely hard to deliver a solid web presence and the world is taking notice of our products. There are a lot of rumors and discussions about Open Source software rising to the challenge in the current economic climate and I think this is a clear sign that people & businesses are looking for alternatives. Congrats to the entire MySQL family!

: http://www.mysql.com

Posted in MySQL, Web Development | No Responses »
Tags: Business, Government, MySQL, Open Source, Web Visits

Flexible Web 2.0 Style Navigation

Monday, March 30th, 2009

I’ve been working on a major project and wanted to share a similar piece of Navigation. For the site I’m working on requires Flexible Navigation in regards to the Web 2.0 style Tabs. This means when you increase the font size of your browser that the background images grow with the text and the page alignment does not ‘freak out’ or ‘break’. Now every browser displays differently so you will need to tweak my method to fit your style and layout. My goal is to give you a working example in order provide some inspiration for your work.

So a while ago I came a cross this page:
http://www.boxedart.com/Tutorials/Photoshop/Tabbed-Web-2_0-Web-Page-Navigation.php

It’s a really neat way to do rounded corner tabs in a web 2.0 type of effect. I really like the way the ‘OFF’ tabs are contained in the same solid background tab. On this page they show you how to slice the entire tabbed navigation and use a single background image. Now this will work for most people, it’s definitely the quickest/easiest method to implement… however this doesn’t address LONG text or accessibility (people who can’t see small fonts, or need larger screen resolution).

Now the most popular method is the ‘Sliding Door Method‘. Basically you create 3 images, the right & left rounded corners and the background images. Because our tab style navigation is basically 2 tabs this method will not work without some tweaking. You will need to slice your image (PSD provided at the bottom of the post) and within the CSS create two classes where you assign the various images (6 in total) to get everything to work.

HTML:

<div id=”first_nav”>

<ul>

<li class=”current”><a href=”">Home</a></li>

<li class=”first”><a href=”">About Us</a></li>

<li><a href=”">Downloads</a></li>

<li><a href=”">Contact Customer Service</a></li>

<li><a href=”">News & Events</a></li>

</ul>

</div>

CSS:

/* FIRST TAB NAVIGATION */

#first_nav {

float: left;

font-size:95%;

line-height:normal;

background: url(images/box_02_bg.jpg) repeat-x top;

}

#first_nav ul {

float: left;

margin:0;

padding:0;

list-style:none;

background: url(images/box_02_right.jpg) no-repeat top right;

}

#first_nav li {

float: left;

}

#first_nav li a {

color: #000;

display: block;

padding: 12px 12px 15px 20px;

text-decoration: none;

}

#first_nav li a:visited {color: #000;}

#first_nav li a:hover {color: #03a50b;}

#first_nav li.current {

float: left;

background: url(images/box_01_bg.jpg) repeat-x top;

}

#first_nav li.current a {

color: #ffffff;

font-size: 105%;

font-weight: bold;

padding: 5px 10px 15px 30px;

background: url(images/box_01_left_first.jpg) no-repeat top left;

}

#first_nav li.current a:visited {color: #ffffff;}

#first_nav li.current a:hover {color: #000;}

#first_nav li.first {

float: left;

background: url(images/box_02_left.jpg) no-repeat top left;

}

#first_nav li.first a {

float: left;

padding: 12px 10px 15px 35px;

background: url(images/box_01_right.jpg) no-repeat top left;

}

FINISHED PRODUCT:

The CSS is a little bit long, especially when you add in the other classes for the different tabs… but the HTML as you can see is a simple un-ordered list. Please keep in mind that this is not the absolute correct way to achieve this effect, it’s just the way I did it

In the .zip file you will find the .psd where I’ve included a couple different background colors, the 6 background images, the CSS which has 4 tab classes and the HTML. Please let me know if you have any questions and Enjoy!!!

-Big A

ZIP FILE: flexible_nav.zip

Posted in Web Development | No Responses »
Tags: CSS Navigation, HTML, Sliding Door, Web 2.0, Web Develpment

Font Me? Font You!

Tuesday, February 17th, 2009

I’ve been working on a site ‘re-alignment’ for www.mysql.com and in my travels for ideas and inspiration I came across a few resources for ‘font replacement’. Basically this is where you specify in your CSS a font that more than likely the user doesn’t have installed by default. In the code you provide the URL where the font is located and the browser downloads the font and swaps out the old boring type face for the shiny new font.

I’m in the process of trying to get this working here using the Droid-Sans font, which is the nice clean font used in Android. You can find a list of open type-faces used by web designers HERE.

Basically the code works like this:

@font-face {
    font-family: "Robson Celtic";
    src: url("http://site/fonts/rob-celt");
}

This should work for both CSS2 and CSS3 configurations, however I haven’t tested either… I’m hoping to have this working here soon.

More information can be found here:

-Big A

Posted in Web Development | No Responses »
Tags: @font-face, Android, CSS3, MySQL

M	T	W	T	F	S	S
« Feb
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

My Electronic Sheep

IT Ramblings from Mr. Cupcake…

Web Development

...now browsing by category

Calm Seas…

This dolphin set Free….

Why I don’t work for $99.99

Annoying Design – My Experience with a CBT

VMWare: Network Down

VMware Fusion 2, Ubuntu 9.04 & WMware Tools

Wordpress Theming… (Day 1)

New Milestone – 7 Million!

Flexible Web 2.0 Style Navigation

Font Me? Font You!