Results matching “layout” from Ye Olde Rad Blog III

One of the most satisfying experiences a technoluster can have is becoming proficient with a new technology, especially one that's not easy to master. Geeks sometimes use the word » GROK, which basically means you 'get it'.

The term was coined by Robert Heinlein in his novel Stranger in a Strange Land (SciFi, 1961). The martian word implies you understand something (such as how a particular technology works) .. on an intuitive level, in a satorial kind of way.

The difference between possessing a working knowledge of a particular technology and 'grokking' it is difficult to describe. Grokking impies a deeper understanding .. that surpasses mere facts & figures.

It suggests you can 'see into' the inner workings and comprehend how the different elements interact.

I've been studying CSS (off-n-on) for months, applying the concepts I learned (.. cuz that's how I learn best). And today I finally 'got it'. It came in a flash .. known as the » ah-ha moment.

[ Hmmm. That's interesting » I was looking for a good article to link to the phrase » 'ah-ha moment,' when my Google search returned a page referencing CSS. Surprisingly coincidental, no? Seeing that I didn't query the term 'CSS' (only » 'ah-ha moment').

What are the odds of that occurring? Of those two concepts being found grouped together so prominently (link #2)? Of all the possible topics in the world, CSS comes up. Maybe it means something. ]

It's not like I didn't understand CSS before. I'd long been reading about and felt comfortable wielding the technology .. using it to whip up sophisticated layouts. But now it seems my insights were superficial .. that I was merely applying recipes, cookbook style, mechanically.

Today's insight came so dramatically that it felt like I'd swallowed a ball of CSS enlightenment. "I finally get it," I muttered. Incredibly satisfying experience. Accompanied by a feeling of arrival, completion, mastery.

Of course, this doesn't mean I know everything there is to know about CSS. Far from it. Gladwell says you need 10,000 hours to master a skill. But I now 'see' how it works .. on an intuitive level.

I would love to be able to plug a cable into my brain and upload a whole slew of other cool technologies (.. like they do in the Matrix). Unfortunately, that ain't how it works. Nor can you grok something by sheer force of will. (If we could, I'd be grunting loudly.) You 'get it' when you get it and not a moment before.

Tho I'm curious about what happens at that moment. I mean, I knew everything I did about CSS now in the moments before I 'got it'. I've also been studying Programming. Maybe that helped yield insight, cuz CSS in some ways resembles programming.

The experience, in retrospect, could be described as a 'breaking thru,' or a 'crashing thru,' or a 'falling thru,'. The thing you 'break thru' seems like a semi-translucent crystalline membrane .. that obscures your vision .. from seeing deeply .. into the inner-workings.

The distance traveled (knowledge-wise) was very small, yet the resulting effect was dramatic .. sort of like the view you get when cresting a big hill. The straw that broke the camel's crystalline back, you might say.

Have a special treat for you today » my Nuclear Grade Stew recipe (2 pages). I've made this stew at least 50 times over the years .. probably closer to a hundred. Now that autumn is here, and the nights are getting chilly, it's time to break out the crock pot.

For the pages that contain this recipe, I designed a new, single-sidebar layout .. another liquid-elastic hybrid. See what you think.

For previous web pages, I used a design that comprised dual-sidebars, one on each side, cuz I liked the balanced, symmetric look provided by that layout. So this feature took longer to complete than expected, cuz I first had to code the CSS from scratch.

I've made this stew for the Bug many times (cutting the veggies into smaller pieces so they fit easily in his little mouth). So it's made with lots of love. He digs it.

Been lagging on entries lately, as you mighta noticed. Been dabbling in Programming. Kinda got lost. Big subject.

On the personal side, I took the Bug kayaking last week .. out on the Newport Back Bay. (No waves there.) He later confided, "Dad, at first I was a little scared. But now I'm not scared." We stopped at a small island where he got out and searched for buried treasure.

Happy Halloween. I modified the method of placing the graphics in the header found at the top of the home page .. up where it says » RADIFIED | Nuclear Grade Technolust. There I implemented a technique known as » CSS Image Replacement, of which there exist many variations, each with its own set of pro's & con's.

The dividing-line among web designers seems to be whether or not to use a non-semantic span tag with CSS positioning, which involves a more complicated technique .. but leaves visible TEXT in place for visitors who surf the Web with STYLES turned off (primarily those using mobile devices).

I used a simpler IR technique, by changing the images you see displayed there .. from foreground images to background images.

This allowed me to replace the foreground images (contained in those heading elements) with TEXT .. which I then indented (way to your left), so it can't be seen. By moving the TEXT out of the way, this technique reveals the graphics (.. which look prettier than standard heading-text).

The advantage however, is » devices that don't render styles (such as screen readers and mobile devices) will now see a TEXT heading and tag-line displayed there, where before there existed only images. Search engines also gives more weight to TEXT than images.

Most Rad visitors will never notice the difference .. seeing most who frequent the site (fellow technolusters) browse with both images and CSS turned ON. But I'm gradually filling my webmaster toolkit with increasingly sophisticated techniques. (Learning by doing.)

After all the pages are styled however, and the markup is coded semantically, there's still no substitute for insightful content .. that is well written (.. and hopefully seasoned with a dash of personality).

This has always been the most difficult challenge .. because a stylish suit does not a charming pig make. And the ugliest person can say the profoundest things, and possess scintillating ideas. So it would seem that content trumps style .. no matter the venue (.. except maybe for those who focus on style).

Changed the underlying markup that controls the links in the blue-green sidebars on the home-page. They were previously coded as » paragraphs. I changed them to » list-items .. cuz that's what they are » a list of items (links) grouped according to category. Certainly not paragraphs .. not even sentences.

If I did this correctly, you shouldn't notice any difference. Cuz I applied the same styling to the list items .. tho this was trickier than it might sound. I nearly freaked when a single misplaced comma trashed my whole layout. Yikes!

This change represents a semantic improvement. Semantics (i.e. » 'meaning') is one of the buzz-words kicked around when thinkers discuss the Web's future.

Most surprising was that it took me so long to realize I had coded the home-page with semantically incorrect markup. It suddenly hit me (last night), when out of the blue (actually » blue-green), I thought » "Those links aren't paragraphs; they're a LIST."

"Hey Rad Man!" began an email I received last week. "I'll pay $100 for a link on your Downloads page." Of course, there's no way of knowing if such offers are legit .. until the cash arrives.

 I've researched Search Engine Optimization (SEO) enough to know I don't much care for it.

Programming I enjoy, but SEO contains a seemingly endless amount of info to digest, some of which conflicts from site to site.

And the suggested techniques are often time-consuming, with dubious results that demand the patience of a saint before you start to see results. Rather focus my energies on generating original content.

Moreover, some of the techniques used to 'optimize' web pages (for higher search engine rankings) seem manipulative, if not downright dishonest. Many of the SEO sites I've visited have a 'slimy' feel to them » detailing how to trick search engines into ranking your pages higher.

I learned that links from 'ranked' pages will (in turn) yield greater 'importance' to the pages that those links aim at (point to). This is (I assume) what this person had in mind when she contacted me.

The email seemed both professional and specific. (Not slimy.) The girl was clear about what she wanted. And best of all, her proposal could be implemented minutes. (Simple.)

The problem was .. that the page they wanted a link on was created back when I knew squat about web standards (XHTML & CSS). The underlying mark-up (code) was a rat's nest of deprecated tags and coding no-no's.

Downright embarrassing .. from a webmaster's point-of-view. Miracle the page would render at all (.. even in 'quirks' mode).

Web typography. It would seem to be a fairly simple topic, no? While I was reviewing some related concepts recently, the following question popped into my head » What exactly is an em?

I've been using em's a long time, and knew they were based somehow on the letter 'M.' Wasn't sure however, if they were based on the size of the capital [M] or lower-case letter [m].

Also felt confident they were based on the horizontal measurement, but not certain. (In both cases, I was wrong.)

Trying to answer this simple question led to a surprising amount of confusion. Many sources on the web discuss ems, and detail their usage, without ever defining what exactly an em is.

Many pages are more complicated than need be. (It's not rocket science.) Finally have a handle on the topic, but my dang eyeballs are burning .. from reading so much.

First, let me answer the question I posed at the top, and therefore avoid the criticism I levied at many other sites.

An em is (drum-roll, please) » a unit of measure (.. defined by a certain number of pixels). So like inches & meters & light-years, which are also units of measure, the em is a » unit of LENGTH.

The thing that makes the em tricky is that » unlike inches or meters, or other fixed (or 'absolute') lengths, the em is a relative unit.

"Relative to what, Rad?" you might be asking. Relative to the font-sizing applied to (in pixels) its » parent element.

What this means is » the SAME font-size declaration (specified with ems) can yield DIFFERENT results (in pixels) .. when/if the parent element for each declaration specifies a different sized font. Hence, the confusion.

Made some minor style-tweaks to the home page. The text you're reading now, for example, is slightly less-bright (easier on the eyes), while the links are a little brighter .. than they were before. (Might have to refresh your browser to load the revised style sheet.)

Visited-links in the sidebars are now slightly less-bright (grayer) .. than un-visited links. Used to be no diff.

Been studying more CSS. Becoming very comfortable tweaking styles. Fine-tuning. Easier for me to determine what I don't like, than what I do.

Oh, the date is also slightly brighter (whiter) .. than the rest of the text, and has a "text-transform" property applied to make it » UPPERCASE .. via a span tag with 'date' class attribute.

Upgraded the Rad blog to the newest version (4.32), which was released a few days ago. Way easier, now that I have Linux shell skillz & a VPS. Five minutes instead of 2 hours.

Movable Type v5.0 will be coming out soon. Currently at » beta-3. I normally install NEW versions of whole-number upgrades, rather than upgrading previous installations. Keeps the number of blog-entries down for a given installation.

Currently have 167 entries on MT 4.x. Lots of entries tend to make the blog respond sluggishly (when rebuilding). That would be » Ye Olde Rad Blog IV. (Started with v2.63 .. in May 2003.)

Considering installing a wiki (software). Can't hurt. Might help. Would be a place (beside the forum) where folks could post & reference their own info/content. Might be a good learning experience, too.

I have no experience with wiki's .. other than searching Wikipedia. Not sure which one would be best. So many choices. Ideas? Saw this comparison. Nigel once recommended Dokuwiki (I think) as a well-coded (PHP-based) piece of software.

The Dokuwiki download is 1.7 MB. (Compare that with the Movable Type download, which is 4.6 MB.) An über comparison of all Wiki's and their features is posted » HERE. Meanwhile Wikipedia, the mother-of-all wiki's, uses MediaWiki, which is both free & Open Source.

Autumnal equinox today. The exact moment when the sun crosses the equator (heading south) = 9:18 PM UTC, which = 2:18 PM Pacific Daylight.

National Geo says » 5:19 AM Eastern (which = 2:19 AM PDT), so I think they type-o'ed AM, when they meant PM.

Nevertheless, it's still the best page I've seen yet on the subject .. cuz it explains why there's not (yet) 12 hours of (equal) day & night. Cool video, too.

Just noticed I used a picture of a spigot dripping water in yesterday's entry (» re: Conditional Love, near the end) ..

.. while a photo (using high-speed photography) shows a droplet hitting the surface in the entry directly below it (» New Layout Design, posted 9/15), which I used to represent LIQUID designs.

Changed the type of layout I use on the home page .. to » LIQUID-ELASTIC hybrid. If I did this correctly, you shouldn't notice any difference .. unless you change your default text-size (.. by selecting 'Text Size' from the 'View' menu in IE). Lemme know if you notice any display quirks.

There are 4 different 'types' of layout designs:

1. FIXED (column widths remain fixed, no matter what, used » here)
2. ELASTIC (column widths change with changes to your preferred font-size)
3. LIQUID (column widths change with changes to browser-window sizing, used » here)
4. HYBRID (combination of two or more of the above, used »  here)

I've long preferred LIQUID layouts (sometimes called » FLUID), which resize column widths as you resize your browser window (called the "viewport" by those in the biz). It's easier for me to understand the concept behind LIQUID layouts .. than ELASTIC.

Today however, I'm demo'ing a » HYBRID layout .. that combines elements of both LIQUID & ELASTIC. [ If you've read my SCSI guide, you know I'm a fan of hybrid config's. ]

The center section/column remains » LIQUID, while the two sidebars (blue-green colums) are now » ELASTIC. This means they will resize with changes made to your preferred font-size (e.g. » small, medium, large, gigantic, etc.). The center section will continue to change proportionally, as you resize your browser window - just like before.

Resizing your browser window will no longer affect the width of the blue-green sidebars (which are already skinny), while changing your default font-size will not affect the width of the center column/section.

The design itself of the home page has remained unchanged. Only the 'type' of layout has been modified (.. from LIQUID to » LIQUID-ELASTIC hybrid). This new type of page layout is considered more 'accessible' ..

.. especially for those who might have difficulty reading smaller text, and need to bump up their default font-size.

If I knew then what I know now. Ever uttered those words? Looking back on my progression of web skills, one omission stands out » incorporating the use of templates to help develop & maintain the pages of my web site.

Templates are both powerful & flexible for two reasons:

1. They speed up site development, by allowing the rapid creation of web pages based on a preformed (uniform) structure .. so all your pages have the same look & feel.
   
   
2. They facilitate site maintenance, by enabling structural changes site-wide via the editing of a single-file .. similar to how CSS works. This aspect of templates is considerably more significant than item #1.

If your web site grows bigger than expected (as they usually do), and you want to make structural changes (non CSS-based changes) to your web pages, you'll have to edit each page individually (.. which suks giant goose eggs). Tedious maximus.

When CSS came along, website designers could transfer all style controls into a single file, so that the look of an entire site could be modified by editing a single file (provided, of course, the entire site was based off of the same style sheet). Very cool development.

But what about structural changes? That's where templates come in. To be honest, I'm not sure if web design programs (such as Dreamweaver and Expression) had the ability to generate templates back when I launched the site. But they do now.

I converted the homepage to » XHTML 1.0 Strict (document type declaration) from XHTML 1.0 Transitional (which applies the rules associated with rendering web pages more loosely).

Only problem I had was the square Google AdSense ad, which I've traditionally wrapped in a <table> tag/element .. which is not the correct way to code it. (Cuz it's not really a table. Rather it's a JavaScript script.)

In Strict, I needed to convert the <table> to a <div> and "float it" left (in CSS) .. otherwise none of the other text would wrap up alongside the ad (like it does now).

All the images in the center section had to be assigned a class and 'floated' right (in CSS), cuz the Strict DTD does not allow you to align="right" .. like I used to do.

Aligning deals with "presentation" (as opposed to structure and content), and the Strict DTD moves everything pertaining to presentation out of XHTML (and into CSS).

I'm actually fairly comfortable with the requirements of the XHTML 1.0 Strict DTD .. enough to begin creating all new pages using the Strict doc-type declaration.

Installed Linux this weekend » Ubuntu 8.04 (released April 2008). Woohoo! I'm stoked.

Installation couldn't have been easier. After creating a 20-gig Ext3 partition on my new hard drive (see previous entry), I answered a few simple questions, stated my time zone and » Voila!

But then I booted up and couldn't connect to the internet. Ugh. Learned since that 'Wireless' is one of Ubuntu's biggest weak-spots.

Gotta be the worst place for a weakspot. Cuz everybody is wireless these days. And without internet, your PC is pretty-much worthless.

I was tempted to give up. Tried many networking configs. Nothing worked.

"Shouldn't be this difficult," I murmured, getting frustrated. (Ain't like I've never configured a network connection before. Only so many variables.)

I even carried my laptop to the coffee shop, where they have free internet, with NO password (WEP/WPA), and I still couldn't connect. So it wasn't an encryption problem (like I thought).