Current musing:

Blog theme under development

I recently redesigned my main website, and now I’m finally getting around to making my blog match. Some things may not work properly so please bear with me. Of course, you can also feel free to contact me with any thoughts or suggestions.

downloads

These guides are free, but if you have found them useful then please consider donating $2. Hey, that's less then the cup of coffee your drinking right?

subscriptions


Blog theme under development

I recently redesigned my main website, and now I’m finally getting around to making my blog match. Some things may not work properly so please bear with me. Of course, you can also feel free to contact me with any thoughts or suggestions.


Google, numerology, and what’s on our (collective) minds.

After reading this post about Google’s “suggest” feature, I was inspired to do a little experimentation of my own. What I found was very intriguing.

You are probably already familiar with Google’s suggest feature. As you type anything into Google’s search box, it automatically suggests completions based on the most popularly searched phrases. For example, type in “how to”, and Google will helpfully suggest “how to tie a tie“, and “how to kiss“. Clearly there are a lot of men who need to know how to impress their date!

Instead of questions, however, I wondered what would happen if I started typing in numbers? So I started with “1″ and just kept going. Try it yourself, but be aware that there is often a big difference between just the number (i.e. “1″) and the number with a space after it (i.e. “1 “). Be sure to do them both as you go along.

What I found interesting is that somewhere between the number “4″ and the number “11″, the phrase “X weeks pregnant” begins to show up every time. By number “13″ or “14″ that phrase is near the top and stays there until you hit “41″, especially when you insert a space after the number. Around the number “26″ you start seeing other issues concerning pregnancy, such as “weight gain”, and “what to expect”, or “fetal pictures”. This is a fascinating insight into what concerns women when they are pregnant. The closer you get to “40″ you can almost sense the desperation set in, it’s surreal.

I haven’t systematically worked through the 3 digit numbers, but I didn’t immediately discern any trends between 42 and 100. Most of the 3 and 4 digit numbers appeared to be address searches, and of course, 5 digit numbers tended to be zip code inquires.

The address results are interesting. Why are some addresses searched enough to make it on this list? Try “3837″ for example. For me it returned addresses from California, Texas, and Illinois. What is so interesting about “3837 bayview circle concord ca”? Google maps doesn’t list any businesses near that address. In fact, it’s a relatively normal looking house; you can see it on street view. Who lives here, and why is he so interesting?

Have you found any strange numerological insights or quandaries in Google’s “suggest” feature? Let me know in the comments


New website design

For the first time in almost 5 years I’ve redesigned my main website: www.lucidgreen.net. This is a complete redesign, including a total reworking of my content and it’s organization. All I can say is, “finally!”

My old website was okay, aside from being difficult to maintain, poorly worded, and in dire need of proof-reading, it got the job done. The new site is a lot more personal, far more user friendly, and dramatically simplified.

I hope to have my blog design updated shortly to match so that there is a true seamless integration. In the meantime, I’d love to hear any comments on the new design. Thanks!


Recent tool discoveries

Here is a very brief rundown of some of the new tools/tricks I’ve been using.

Komodo Edit. An open source code editor.
Wow, this thing rocks! So far I’ve only used it for HTML, CSS and Javascript editing, but I’m impressed. It’s free, cross-platform, has an impressive feature set, and is easy to use. FTP/SFTP is built right in, and it even highlights closing tags in HTML!

Superfish: a cross-browser drop-down menu builder.
After hating drop-down menus for nearly a decade, I’ve suddenly had a change of heart. When they work well, they’re great, they save space for the designer and time for the users, but when they don’t work well users and designers alike curse the internet gods. Superfish has played a key role in changing my mind. Of course, the process of getting a Superfish menu to work in every browser (ahem, IE6) is still a little bit finicky, but it’s nothing like what I’ve experienced in the past.

Jquery Cycle Plugin: a Jquery (javascript) slide show script with lots of features.
This is a pretty amazing little script, it takes a div tag full of images and instantly transforms them into a cool looking slideshow. There are an impressive number of features, and options, but I appreciate just how quickly I can create a fancy javascript only slideshow which degrades gracefully.

CSS – Clearing floats without extra markup: a trick I wished I had learned years ago.
This is an amazing trick, every web developer who has ever wanted his containing div to wrap fully below two nested and floated divs needs to read this now!


Snow Leopard: and late night upgrade experience

Just because I’m already tired of the “horror” stories from those who, like me, upgraded their macs to Snow Leopard last night. Here’s my experience.

11:44 am: Fedex attempts to deliver the package from Apple, but no one is home to sign for it, so they leave a nice note saying exactly when and where I can pick it up if I’m so inclined.

1:00 pm: Fedex gives me a courtesy call to tell me I missed my package. How thoughtful!

5:00 pm: I arrive at the Fedex shipping center. The friendly worker finds my package and says, “Have a great evening!”

5:30 pm: I arrive home and begin to prepare for dinner with friends. Installation must wait.

7:00 pm: Friends arrive for dinner. Installation still on hold.

11:00 pm: Friends leave, dishes started.

11:15 pm: Installation begins. Insert DVD, click OK a few times. Walk away to take a shower and brush teeth.

12:15 am: Installation complete. Computer runs flawlessly.

12:30 am: Still no problems, all my apps run nicely, new features are fun.

12:45 am: go to bed.

That’s it. I’m happy to report things are still running fine. If something blows up I promise let everyone know! (Not that you care, and if you do… find a hobby!)


fix for css 100% height producing scrollbars (not a hack)

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*/


Full screen web browsing on a mac (for real!)

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!


modx date picker template variable not working

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!


Top 5 applications for beginning web designers

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 LogoAptana 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:

Best Graphic Design Application

Fireworks logoFireworks 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:

Best FTP Application

filezilla logoFileZilla

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 logoFirefox

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 logoOpenOffice

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!


Freedom, religion, and the internet.

First, I must ask for your forgiveness as this post probably should not be here. When I started this blog I committed myself to write nothing personal or outside of the “technical” realm. This post is both of those things, and yet, I hope, it is also very much on topic as well.

I often marvel at the miracle of the internet, but I cannot help wondering, is it a blessing or a curse? We can communicate instantly with each other, share ideas and information with unprecedented freedom and ease–the world has become as small as my 15 inch lcd–and yet we are more isolated then ever before. We can publish our ideas to the world without censorship on blogs or twitter feeds, and find immense communities of like-minded friends on facebook. We are experiencing unprecedented freedom of thought and self expression, and yet, I believe, we are not better or happier because of it. Why?

I found this unforgivably long quote from Dostoevsky’s The Brothers Karamazov to be helpful:

The world has proclaimed freedom, especially of late, but what do we see in this freedom of theirs: only slavery and suicide! For the world says: “You have needs, therefore satisfy them, for you have the same rights as the noblest and richest men. Do not be afraid to satisfy them, but even increase them” –this is the current teaching of the world. And in this they see freedom. But what comes of this right to increase one’s needs? for the rich, isolation and spiritual suicide; for the poor, envy and murder, for they have been given rights, but have not yet been shown any way of satisfying their needs. We are assured that the world is becoming more and more united, is being formed into brotherly communion, by the shortening of distances, by the transmitting of thoughts through the air. Alas do not believe in such a union of people. Taking freedom to mean the increase and prompt satisfaction of needs, they distort their own nature, for they generate many meaningless and foolish desires, habits, and the most absurd fancies in themselves. They live only for mutual envy, for pleasure-seeking and self-display. To have dinners, horses carriages, rank and slaves to serve them is now considered such a necessity that for the sake of it, to satisfy it, they will sacrifice life, honor, the love of mankind, and will even kill themselves if they are unable to satisfy it. We see the same thing in those who are not rich, while the poor, so far, simply drown their unsatisfied needs and envy in drink. But soon they will get drunk on blood instead of wine, they are being lead to that. …instead of serving brotherly love and human unity, they have fallen, on the contrary, into disunity and isolation…. They have succeeded in amassing more and more things, but they have less and less joy.

– Fyodor Dostoevsky, The Brothers Karamazov, Trans. by Richard Pevear and Larissa Volokhonsky. (New York: Farrar, Straus and Giroux) pg 313-314.

Freedom can be a curse as easily as it can be a blessing. Give me unrestrained freedom of self-expression and the world for an audience, and suddenly I become the only player in the play that matters (at least IMHO). I become all important, and even if I appear to care for others, it is merely an act as they are merely foils for my own magnanimity.

All is not lost, but the answer is perhaps not what we want to hear. Again from The Brothers K:

Obedience, fasting, and prayer are laughed at, yet they alone constitute the way to real and true freedom: I cut away my superfluous and unnecessary needs, through obedience I humble and chasten my vain and proud will, and thereby, with God’s help, attain freedom of spirit, and with that, spiritual rejoicing! Which of the two is more capable of upholding and serving a great idea–the isolated rich man or one who is liberated from the tyranny of things and habits?

– Ibid, pg 313.

And so, as I have long suspected (and as I have long rebelled against), freedom is found in submission, and happiness is found in self-denial. “A loving humility is the most powerful of all, nothing compares with it” (pg 319). And “Equality is only in man’s spiritual dignity, and only among us [monks] will that be understood. Where there are brothers, there will be brotherhood; but before brotherhood they will never share among themselves. Let us preserve the image of Christ, that it may shine forth like a precious diamond to the whole world. . . So be it, so be it” (pg 316).