A few of my students at a work and some other friends often come to me with CSS debugging questions. I always turn to Firebug, and amazing Firefox add-on that let’s you analyze everything about a webpage from DOM, source HTML, CSS, Javascript, AJAS request, etc.  This little tutorial will demonstrate the basic techniques I use to figure out why the styling of elements isn’t quite working how it aught to.  Of course, to do this you will need Firefox and Firebug add-on.

Once you have this, navigate to the web page in question, for this example let’s look at: http://www.sapethemape.com/debugcss.html.  Here you will notice the bullet list is very spaced out and not displaying from left to right. Hmm, I remember setting #nav to display:inline, I wonder why its not working. Let’s open up the Firebug console by clicking on the little bug icon in the bottom right corner of Firefox. Now click on the Inspect button, this will be the blue mouse pointer on top of a rectangle in the top left of the Firebug window.  After this is clicked, hover over the word “Home.” Notice how there is a blue border around that element and the firebug window changes and displays information about that element.

Notice that the #nav ul li element only has padding: 30px.  If you hover over the div #nav element, this is where the display:inline was. To make a list display from left to right, the LI elements must have the style display:inline.  Thanks to the inspect tool, we were able to see what CSS styles were assign to the element in question.

With Firebug, we can also do live edits to make sure we are correct. Double click on the area just to the right of padding: 30px and a new text box should pop up. In here type “display: inline”. Notice how Firebug auto-completes for you, as well as updates the webpage with the changes. Now the page should have a horizontal navigation bar below the header. Note that the line number of the CSS declaration is displayed in the information panel. This is very helpful in finding the actual line in the code to update.

You can also click on the HTML to the left of the style information to view that elements information. Click around and you should start to get a feel for the power of Firebug. Try adding some borders to the navigation bar, adjusting the margin and padding and see how everything is effected.

There are a few people out there who do not like the new Google everything sidebar. I personally find it to be distracting. Since there is no way to turn that feature off, I made a Greasemonkey script to do it. The script is very simple. I removes the sidebar by default, but adds a button that lets you show or hide the sidebar. This script is hard coded with the element ID’s so it will only work as long as they keep that the same. I will try to keep it up to date. This only works on Firefox but I will see about making one for Chrome. Enjoy!

Install Google Remove Everything Sidebar

Recently a client asked me for some help moving his website from his own server to host on GoDaddy. The website was created in VB.NET and connected to a Microsoft SQL Server Express 2005 Database. Unfortunately there is no EASY way. There SHOULD be. It should not be this difficult and time consuming to migrate a SQL Server not running on GoDaddy to a GoDaddy hosted SQL Server. I even tried connecting directly to the GoDaddy database but it failed. I don’t think they like remote connections. So here is how I did it.

Needed: SQL Management Studio (the full version, not express). Included with SQL Server 2005 full version. This is needed for generating the scripts to easily create the structure on the new GoDaddy database.

Notes: GoDaddy will not accept a .bak file that was not created by them. I tried…

Step 1: Create SQL Server database on GoDaddy. Try to make this the GoDaddy database the same name as your original database, and the same user name. I do not think it is required, but will make everything a lot easier. Once it’s done you will want to have the GoDaddy SQL Server web admin open.

Step 2: Export and import the structure. Open up SQL Server Studio and find your original database, right click the database -> Tasks… -> Generate Scripts… A wizard will pop up. Select your database, and select all the stuff you want to export, I did everything. Might want to skip the user the source and destination do not match. You will see an option to either save it to a file or new query window. I did a new query window. You can then copy and paste big collection of SQL queries into the GoDaddy Query Analyzer in the database web admin.

Step 3: Export source data from SQL Server Studio to CSV. There are a few ways to do this. Right click the database -> Tasks… -> Export… Select your source database, and on the destination screen select the destination to be a flat file. OR you could also select all the results from a table using a SELECT * FROM table query and then right click on the results window and click Save Results As… This will the results as a CSV in your favorite location. Both methods will only do one table at a time. I could not find a way to export all the data at once, so if you have a lot of tables with a lot of data this will be very time consuming. Maybe higher an student or nephew to do it.

Step 4: Clean CSV. Be mindful that though this will export as a CSV, it will not escape the fields in QUOTES. So if a cell has commas in them you will have to add quotes around them manually after you export it. Make your hired nephew look through all the CSV’s also, or make some clever regular expression. Also, the GoDaddy SQL Server web admin will give you errors when the fields don’t match up, so you could fix as the errors come up.

Step 5: Import CSV to GoDaddy. Back in your GoDaddy SQL Server web admin, there is a CSV File Importer that will import data for a specific table. Remember, if you have foreign key constraints, you will get an error if the parents are not uploaded first, and a child is pointing to a row that does not exist. So upload the most general tables first, then all the look up tables so all the foreign key restraints are satisfied.

That should be able it. Hopefully you experienced minimal errors. And don’t forget to update you web.config file’s SQLConnectionString to point to the new database. The new data source will be the full name of the database you are connected to in the GoDaddy SQL Server web admin (i.e. dbname.db.12345.hostedresource.com).

<connectionStrings>
		<remove name="SQLConnectionString"/>
		<add name="SQLConnectionString" connectionString="Data Source=dbname.db.123456.hostedresource.com; Initial Catalog=database_name; Persist Security Info=True;User ID=database_user;Password=database_password;Connect Timeout=200; pooling='true'; Max Pool Size=200"/>
</connectionStrings>

While reading the new WIRED magazine, a little snippet “How Do I Make a Single-Serving Site?” (WIRED 17.08 page 26) inspired me to put a script I was using locally up in the ether. I use a simple HTML file to make mailing labels for boxes I have shipped. It’s cleaner than my hand writing and makes a simple, clean mailing label. This would make a great single-serving site! So I got a domain, http://www.simplemailinglabel.com/, tweaked and uploaded my little simple mailing label script, and posted it on http://wiredsingleservingsitegenerator.com/. Sweet! Now I wait and see how many green-up-arrows I get…

Monday I put together the IKEA FREDRIK Computer Workstation in my office and set it up as a standing desk. The workstation was not designed to be used as a standing desk, so any little vibration from typing or fidgeting moves the monitors. To solve this I plan on anchoring it to the wall. After a full week of use, I can tell you it does take a bit to get used to. I still use my trusty BreakTimer application, but instead of getting up and walking when the timer goes off, I sit down for a bit. I have noticed my back is hurting less, but my legs get fatigued and my feet kinda ache. Specifically my quads and hip-flexers. I can already tell that I need a fatigue pad (should be here next week).

Even though I am getting some relief from my shooting back pain, that goes down my left leg, standing all day is not exactly relaxing. I used to enjoy reclining in my chair after lunch and perusing the interwebs. Getting my daily does of technology news. But reading the news while standing doesn’t quite have the same effect. On the other hand I do not notice a decline in work quality. If anything the quality of work has increased. I guess standing and being physically engaged makes me focus more; though I am still only able to work in spurts of 30 minutes to a max of 1 hour straight before I have to take a break. Only this time, instead of having to get up and stretch my legs because of the pain in all the diodes on my left side, I need to sit a minute to rest the legs and feet. Hopefully the cheap Office Depot fatigue pad coming next week will ease the foot aches, which is the main reason I have to take a break from standing.

I still fidget and shift my position, constantly. Alter my wait from side to side. Widen my stance. Put a foot up on the bottom shelf of the desk. The same amount of fidgeting I did while seated. I guess I just can’t sit still.

The other option, the $1400 tangram desk with a slightly smaller work area and no higher shelf for monitors, was a lot more stable and it goes up and down with a push of a button. It even has height presets for single touch action to go to sitting height or standing. But 10 times as much money. Even with all those features, I don’t know if it’s 10 times as better. Maybe there is a way to make one and sell it for less…

So after the first week, I would gladly exchange dealing with fatigued legs than the pain going down my leg. We shall see how it is after next week.

photo of my standing desk at work

I am an active guy. One of those NCAA athletes that went pro in something other than sports. But after years and years of volleyball, my body has taken a beating. My back and knees in particular. So naturally, after I graduated and started working, sitting in front of a computer all day, my workout regime decreased dramatically in intensity. After about six months, I noticed an increase in lower back pain. I am not unfamiliar with lower back pain, but the pain was more intense than during college. I would rest, stretch, ice, rehab, and it would heal. Than it would happen again. Always after a hard workout or cleaning all day. But it would always go away after about a week.

After I moved out to Southern California, I started playing in some adult volleyball leagues. Three times a week. Warming up, optional. And thus I got lazy, my technique waned, and became prone to injury. The mix of playing without warming up or stretching and then sitting down for several hours the next day caused my muscles to tighten up. One day I woke up crooked. Leaning to the right. And like an idiot, I did not stop playing volleyball. I just figured it would heal like normal and I could push through it. But this time it just got worse. Rehab didn’t help anymore. I started to suspect a herniated disc. I went to a chiropractor, who suspected the same. Yep, the MRI confirmed it. L2 and L3 herniated disc with all the other lumbar discs also protruding. No surgery required to heal, thankfully. Just rest, rehab, NO VOLLEYBALL.

This really got me thinking about the ergonomics of my workspace. USC has a whole department devoted to it. I called them up for an ergonomic evaluation of my work area. Result: desk is too low, chair too small, not enough leg room, monitors too close, poor lighting, etc. Anyone over six feet and 200 pounds can relate to everything being too small. The ergonomics guy told me he uses a stand up desk and loves it. Sweet! That’s the only position that is pain free for me! Oh, they are over a grand? Grrr!

Searching the interwebs for stand up desks revealed not much under a thousand dollars. There were super sweet ones that go up and down with a push of a button, some with air compressors, or cranks. But I would be satisfied with just a desk that was 49 inches high. I’ll commit to standing all day. I did find lots of helpful DIY standing desks from Lifehacker which gave me some confidence in creating my own. Which is find for at home, but for work: you gotta go through all the proper channels, penetrate the bureaucracy, and wait.

I think I found a solution though. A single purchase, inexpensive desk that can be used as a standing desk or one of those old fashion sit-in-a-chair desks. It’s from IKEA: FREDRIK Computer Work station. Metal frame with notches every two or three inches to move the surfaces up and down. There is also a smaller one, 38 inches vs. 50 inches wide ( I just bought the smaller on for a standing workbench at home). I will post back with the result of if my work will spring for the new desk to replace my current setup as well as how my home setup works out. I also plan on making some wood boxes to put under my current desk (which is only 31 inches high, so the box needs to be 49 – 31 = 18 inches). I’ll use the new workbench to make those!

Just got back from Yosemite, and took some pictures of climbers headed up El Capitan. It has a 10 second intro, with a red circle showing how high the swinging climber is. After the intro is a zoomed sequence of 10 pictures showing the climber swinging across the face of the mountain trying to grab a ledge. The climber did make it after at least 1 hour of swinging. Click the link for the video.

El Cap Swinging Climber

Or if you prefer, the image sequence.

Since Gmail has started to get a whole lotta keyboard shortcuts, and I can never keep track of them all, I created a little cheat sheet of the default shortcuts (with some extra function enabled in Labs) I could print out (landscape) and put by my monitor. 

Here it is (cheat sheet only):

Hopefully this little rant, which I will turn into a blog post, will help me figure out how much a MacBook Pro is worth to me. First things first: A computer, in its simplest form, is a tool. A very modular tool.  This isn’t a Mac vs PC (really, Mac vs Windows since PC is a Personal Computer) but rather an inner discussion on if I want to spend the extra cash just to get a Mac. Lets be real, a Windows machine with nearly identical hardware (Intel Core 2 Due, 2 GB RAM, NVIDIA Graphics, 200GB HD, etc) is less expensive than the Mac. So does the Mac merit the extra cash, to me? O and Linux is not in the discussion because Adobe Suite doesn’t run on it.

My laptops:

• MacBook Pro 15, 2.3 Intel Core 2, 2 GB Ram, NVIDIA 256, 250 GB HD, with the LED screen (Work Laptop, could buy it from them for $1400, ebay for less, but had to give it back)
• HP Pavillion dv6587se, 1.8 Intel Core 2, 3 GB Ram, NVIDIA 256, 300 GB HD. (Personal, got it slightly used for $500)

First, a program breakdown.  What programs I use that are Mac or Windows exclusive, what are both, and what I prefer on one or the other. And I avoid using Microsoft Office, so that is just off the list, else I would put it on the “runs better on Windows” side.

How valuable are the programs that are only available on one OS too me?  Does it improve productivity? Easier to use? More stable? Give me less aggravation? Will it help me earn more money?In most cases, it’s more a matter of usability. For instance, Trillian and Adium are nearly the same, but I prefer Adium’s look and feel to Trillian’s. The harder case is Notepad++ or TextMate. Both are excellent apps. Excellent plugins, easy to use, stable.  But TextMate has better keyboard shortcuts for auto complete and directory reading.  But Notepad++ also has nice auto complete, can read directories (via exploer plugin), and a built in FTP (but not sync). If I had to pick, I would pick TextMate, but am perfectly happy with either one. Really, the best text editor would be the light weight of Notepad++, the text manipulation power of TextMate, and the parsing and sync ability of Eclipse.

I don’t use Unity or XNA enough right now to merit one over the other. I hope to get more into game development, for serious games or not serious games, soon, but until then those will be a straight wash. Same with XSI (there’s Modo for both), and I don’t do much modeling. And also with Visual Studio. I don’t use VS enough right now, but have in the past and will in the future, so that’s like half a point. Man, I should put point score.

So the software pretty much comes down to what I am working on. Now, mostly web, PHP, so its a wash.  If I needed to do .NET, Windows would win. If I needed to do Unity3D, Mac would win. Next is hardware interface. The construction, feel, and ease of the basic hardware for an average Windows laptop and a MacBook.

I would have to pick the MacBook on design. Smooth curves, simplest shape, sturdy feel.  When you close a MacBook it just feels closed. The HP I have, has bumps and uneven surfaces. Mostly aesthetics. Usability: There’s the 2 finger scroll on the Mac. So much better than the side of the damn track pack that sort of works, and always seems to be too sensitive or not sensitive enough. Two fingers, up down, or left right.  Beautiful.  But the real kicker. What I think makes Mac so great to use:

The Apple (Command) key.  And this, to be honest, is what I enjoy the most about working on a Mac. One modifier key. Apple + … On Windows is Alt + Tab, or Ctrl + C, or Windows Key + R, etc. And the placement of the Apple. Right on your thumb. Perfect. I barely have to move my hands on the keyboard or use the mouse.  This does improve my productivity.  Makes me move faster, quicker. Seems kinda stupid, but when your typing away at code, and you need to quickly move around the computer nothing is worse than missing the control key or hitting alt and accessing the file menu.

And the kicker, you can run Windows on a Mac (Virtual or Boot), without having to pull and iHackintosh. If money was not an issue, I would love to get a MacBook Pro. So, if I had the money, it would most likely be worth it. Till then, I will have to keep trying to get Mac to work on a PC.