Lucid Green

UPDATE 5/30/2009: My original solution didn’t work as expected, but, as usual, someone else had already solved the problem. The solution code example below is modified from http://ryanfait.com/sticky-footer/.

Caveat, this fix has been tested in Firefox 3+, Safari 4beta, and IE8. It should work in other standards compliant browsers.

Assume for a moment you want the following simple page layout:

Header, height: 200px

Content, height: 100% of available space

Footer, height: 30px

You want the footer to always be at the bottom of the browser window, but also drop below the bottom of the browser window if the content extends below it.

You might be tempted to achieve this layout with the following code:

HTML
<div  id="header">Header</div>
<div  id="content">content</div>
<div  id="footer">footer</div>

CSS
html,body {height:100%} /* you need this to allow for 100% on any other elements */
#header {height:200px;}
#content {height:100%;}
#footer {height:30px;}

this works great if your content is longer than then the browser window is high, you footer will always be below your content, and you will have to scroll down to see it as you would expect. But what if your content is significantly shorter than the browser window is high?

If you try this you will quickly discover that no matter how small or large you make your browser window the footer will always be below the visible edge of the page and you will have to use the scrollbar to see it. The container div is not taking up 100% of the available height, but 100% of the window height. In other words, if your browser window is 800 px high then your container div will be 800px high, and then your 200px header and 30px footer will be added on to this making the entire page 1030 px high.

So how do you avoid this?

Fairly easily as it turns out. Do the following:

HTML
<div id="container">
<div  id="header">Header</div>
<div  id="content">content</div>
<div id="push"></div>
</div>
<div  id="footer">footer</div>

CSS
* {margin:0; padding:0;} /*required to remove default padding and margins */
html,body {height:100%} /* you need this to allow for 100% on any other elements */
#container {height:100%; margin-bottom:-30px; min-height: 100%; height: auto !important;}
#header {height:200px;}
#footer, #push {height:30px;} /*push must be exactly the same height as footer to prevent the footer from covering up or going under content when the window is smaller than the content*/

This has been something of a personal quest for the Holy Grail. I’ve wanted to have a full screen browser on my Mac for a very long time. I’ve searched for plugins, I’ve searched for special browsers, but no luck. Until today! And it has been hiding under my nose the whole time: Opera 9.6!

I’ve had Opera on my machine for a long time, pretty much only for testing purposes, but today, I upgraded it and decided to take it for a little spin, only to have the Holy Grail dropped in my lap!

Why would I want full screen web browsing on the Mac? For presentations, for kiosk displays (I’m going to be using this next week at a teacher recruitment gig), for distraction free google doc work, and just for the heck of it!

If you’ve been looking for a full screen web browser on the Mac, check out Opera, and comment on this post. I’d love to know I’m wasn’t alone in this search!

This is probably an obscure problem, but if it happens to you it is incredibly annoying. Hopefully the next person who struggles with this will search and find this answer.

Here’s the problem: you have a date template variable available for your modx templates. It is named “event_date”. You have enabled the “date formatter” widget so that user can click a little button to have a date chooser to popup in the manager. But, when you click the button for the date chooser nothing happens.

Here’s the solution: remove the underscore (“_”) in your template variable name. That’s it. Apparently the modx parser converts the underscore to an url safe entity and that messes up the javascript required to launch the popup.

Of course you might also want to be certain that popups are allowed by your browser for this domain!

As a self-taught web designer, and a compulsive tinkerer, I’ve spent countless hours experimenting with different web design applications. The following list represents the current state of my subjective evaluations. It is an attempt to create the list I would have liked to have when I was first getting started. I hope you find it useful.

How the software was evaluated:

I’ve broken my list into several distinct categories and picked one winner for each category. I’ve used the following order of priorities in considering my winners.

1. Free software has the biggest advantage for an obvious reason: if you are just starting out, you do not want to break the bank. Of course, no software is truly free, if you don’t pay for it then the developer does. Please seriously consider donating to free projects or purchasing full versions of any of the apps listed below.
2. Usability and number of features are important, but generally less important than the above priority. I’m willing to put up with a slightly less then perfect user interface if it means the software is cheaper.
3. Cross platform software is preferred. Primarily because I don’t know what system you’ll be using, but also for practical reasons. (e.g. If your shiny Mac is in the shop it’s nice to be able to keep right on going with that old Linux box in the basement… true story).

Best HTML Editor

Aptana Studio Community Edition

Cost: Free for community edition, $99 for the professional version.
Platforms: Win, Mac, Linux
Pros: Free, many powerful features normally only found in paid applications, cross-platform.
Cons: Sometimes clunky user interface, start-up can be somewhat slow.

Aptana isn’t a winner when it comes to user interface, it can be downright confusing at times, but what it lacks in beauty it makes up for in brawn. The free community edition is powerful enough for professionals. It comes with automatic code completion, code hints/highlighting, code snippets, and integrated validation and debugging tools. It will keep track of multiple projects and has ftp capabilities built right in. It’s not a WYSIWYG editor, but I think this is a good thing for beginning designers, and you can easily see your pages in a browser preview pane without ever leaving the application.

Don’t forget you can edit far more than HTML with Aptana. You can also edit CSS, PHP, Javascript, and a host of other languages. It even includes many popular javascript libraries such as MooTools and jQuery that can be dropped into your projects with a click of the mouse.

Runners up:

• Panic Coda ($99; Mac only)
• Adobe Dreamweaver ($399; Win/Mac)
• Codetch (Free; Win, Mac, Linux. this is a Firefox extension)

Best Graphic Design Application

Fireworks CS4

Cost: $299 for full version
Platforms: Win, Mac
Pros: Intuitive editing of both raster and vector graphics in a single document, extremely powerful feature set, specifically made for designing websites.
Cons: Expensive, buggy and complex user interface.

Unfortunately Fireworks isn’t free, at $300 it’s not even cheap. On top of that, its interface has some quirky bugs and annoying design blunders.  Nevertheless, it is the clear winner in this category simply because there is no real competition.

Fireworks is the only full-blown vector graphics editor that is also a full-blown raster graphics editor. (Photoshop pretends to do this, but its raster-only origins hold it back). With Fireworks you can create shapes and line drawings as easily as you can remove backgrounds from jpegs. More importantly, you can do all of this in the same document without thinking about it.

Fireworks will prototype entire websites, and export each page of a site directly to HTML/CSS or as a bundled PDF document.  I wouldn’t recommend using it to do your coding work for you, but hey, who am I to tell you what to do?

The plain fact of the matter is that Fireworks was created for web design, and that makes all the difference. There is no open source program that even comes close to it, and its only real competitor, Photoshop, is twice as expensive and half as easy to use.

Runners up:

• Photoshop ($699; Win, Mac)
  
• Gimp (Free; Win, Mac, Linux)
  
• Inkscape (Free; Win, Linux, Mac via X11)
  

Best FTP Application

FileZilla

Cost: Free
Platforms: Win, Mac, Linux
Pros: Free and full featured
Cons: Cluttered interface.

FileZilla wins this category because it’s the only free and cross platform ftp program that is fully featured. As mentioned above Aptana already has ftp abilities built-in, but unless you purchase the professional version you cannot use sftp (secure ftp). FileZilla does it all, for free. The fact that it is truly cross platform is another big bonus.

Runners up:

• CyberDuck (Free; Mac only)
• FireFtp (Free; Win, Linux. This is a Firefox extension, and so it also works on Mac, but it requires Xcode and MacPorts to be installed)
• Transmit ($29.95; Mac only)

Best Web Browser

Firefox

Cost: Free
Platforms: Win, Mac, Linux
Pros: standards compliant, supports hundreds of extensions, stable, clean interface, fast.
Cons: you might be tempted to add too many extensions which can slow things down a bit.

Firefox is the choice of  web designers everywhere. Because it is standards compliant, I design all my sites using Firefox as the standard. If I can get a site working properly in Firefox then it is usually trivial to get it working in most other browsers.

As a browser alone it’s awesome. It’s fast, reliable, and free, what more could you want? Plenty, as it turns out, because Firefox offers so much more. With hundreds of extensions available, Firefox becomes a web designer’s Swiss army knife.

Here’s a short list of the best Firefox extensions for web designers:

• Web Developer: easily dissect, debug and examine any site on the internet.
• Firebug: similar to the Web Developer only vastly more powerful.
• Codetch: brings WYSIWYG HTML editing right to your browser.

Runners up:

• Safari (Free: Win, Mac)
• Opera (Free: Win, Mac, Linux)

Best Site Planning Application

OpenOffice

Platforms: Win, Mac, Linux
Cost: Free
Pros: Entire office suite for free.
Cons: Can be a little slow sometimes.

At first glance it may seem a bit odd to have OpenOffice in a list of web design software, but it is truly indispensable. OpenOffice has incredible outlining abilities, which I use to develop a site map prior to designing any site. It is great for creating site proposals, editing content, and converting those pesky MS Word documents clients send into PDFs. You can even use it to create neat, graphical flowcharts of your website’s pages.

Runners up:

None… okay, okay, fine, Microsoft Office, there, I said it!

I’ve had an ongoing love-hate relationship with Linux for the last several years. Ubuntu (back with Dapper) opened my eyes to its true possibilities, and it has only gotten better since. No, of course it isn’t ready for everyday “Grandma” use, but with the new netbook remix it is a whole lot closer!

Intended to be used for the next generation of ultra small laptops, like the Asus eee pc, you can easily install it on any laptop running Hardy. I put it on my old, and very tiny, dell with a Pentium III processor and it runs fine.

The ume-launcher is the best part about it. This thing makes it so easy to find and run programs that my wife, who hates all things electronic, saw it over my shoulder and actually said “Ooo, even I’d use that!” You’ve got to try it to believe it. If only my Mac could do this… seriously why has no one ever thought of this before?!

I have been looking for a way to display my iCal todos on my desktop for the longest time. I know there are dashboard widgets that display and create todo items, but I want my todos always visible so I can stay on task easily.  But I also wanted the solution to be unobtrusive and not interfere too much with my wallpaper. (Is that too much to ask!?)

Now I have the solution! It’s not the simplest thing to do, but it works like a charm once setup.  Click on the pic below for a screen shot.

How to embed your own todo list on your desktop

1. Download and install GeekTool
2. Download this applescript: update_todos, it will gather all the todo items from all of your calendars, organize them by priority and then create a file called “todos.txt” and write the list to the file.
3. Unzip it and save it somewhere on your hard drive. It doesn’t matter where, but you need to remember where you put it. I put mine in Documents/workflows along with my automater scripts.
4. In GeekTool create a new entry and set it to a shell command. for the command, enter:

   osascript PATH_TO_FOLDER/update_todos.app

   Change “PATH_TO_FOLDER” to the folder where you saved the script. (e.g. mine is “~/Documents/workflows/update_todos.app”, the “~” is shorthand for your home folder.)I set the refresh rate to 300 (5 minutes), which is pretty often for something that doesn’t change very rapidly, you can set yours to anything you want. See a screenshot

5. In GeekTool create a second shell command. Enter

   cat ~/Documents/todos.txt

   See a screenshot of my settings for this one.

Viola, you should shortly see your iCal todos on your desktop in a nice neat text based format. You can get fancy by changing settings in GeekTool. For instance, you can see in the screenshot in step 5 above that I have moved the display close to the bottom of my desktop by setting the y value to 690.

I hope this helps someone else! If you found this script and tutorial useful, and are feeling generous, please considering donating $2 for it. I’m a teacher by day and you know what that means ;-).

Please Note: this script will launch ical if it’s not already running, but it will not close iCal (I wouldn’t want to interrupt your work!)

UPDATE: now you can show your iCal events on your desktop!

UPDATE 2: Thanks to Jammie this script will now sort your calendar events by time!

The following has the potential to make this script-foo even more complex so take it or leave it, no guarantees!

1. Download the update_calendar_events script
2. Save it to your hard drive
3. Open the script in ScriptEditor: On the 6th line which is,

   set varCalendars to {"Personal", "PCA web calendar"}

   Change the names “Personal” and “PCA web calendar” to the names of the calendars you wish to view.

4. Create a new shell command in GeekTool:

   osascript PATH_TO_FOLDER/update_calendar_events.app

   where “PATH_TO_FOLDER” is the path to the folder where you saved the script.

5. Edit the GeekTool command you created in step 5 above. Enter:

   cat ~/Documents/todos.txt ~/Documents/calEvents.txt