Newsletter, April 20, 2013

Old Dog, New Tricks

Once upon a time, someone discarded an aging Mac, and it somehow ended up on my porch. "Enjoy" was all that was spoken by the donor. "Now, what the hell am I supposed to do with that?" was what was spoken by me. I did figure out how to put it all together, but when I finally turned it on. . .well. . .that was it. I was smitten.

This was 2003. I was 47 years old at the time. Never touched a computer. I grew up with manual typewriters, and even then, I never took a typing class. I still can't type worth a crap, but I do know a bit about computers now.

Soon after the Mac arrived, I landed a job writing for the Youngstown Vindicator. The Mac didn't cut it, but my neighbor gave me a used PC. Writing for a newspaper, I had to learn a lot of stuff real fast, which included making the most of the machine in front of me.

In 2005, I created a simple little website on my Word program. It was mostly newsletters, recipes, and a page devoted to saying rude things about George W. Bush. It was all fine. Things were much less complicated. The site lasted a few years, but some critical events in my life made it impossible to continue.

In September, 2012, I decided to do it again, not only to keep people in touch with the farm, but to publish all my beautiful reviews that I had created on my Word program. No problem. Eh. . .well, actually big problem. Not only a Word program, but an obsolete Word program. But, hey, it converts to html. It should work.

OMG

At the same time I was creating all these reviews, I also became extremely interested in specialty fonts. I found a great site from which to download (dafont.com), and really found cool dingbats to run at the bottom of the page that matched whatever I was writing about. After I had about fifty pages loaded, I decided to go to a library to see how it all looked on other computers.

OMG

What I saw made me gasp. Not only were the pages and graphics all askew, but all my fancy fonts had disappeared, and instead of flowers or little animals running along the page bottom, I saw ccccc or wwwww. My first initiation into the land of real web building. You can't see a font on a website unless it is on your computer. OR unless it is embedded. So I began to pursue the art of embedding fonts.

What made this so daunting to me was trying to understand the "html" code generated by my Word program. Even if I knew how to embed the fonts, I wouldn't know where to put them. The whole thing overwhelmed me. Code scared me—it was so complicated—there was no way I could ever learn it.

What I know now is this: Microsoft code STILL scares me. It is from another planet. It sure isn't html. I still design my pages on my Word program, but I just delete all the code and write my own. I can create the graphics, then save them as an image. The best of both worlds. But I'm getting ahead of myself. . .

The first tool I found was called WEFT. Another Microsoft seed of destruction. Literally. WEFT, Web Embedding Font Tool, or something like that, was supposed to embed fonts to make them usable on websites. So, I downloaded it. It ran and ran and ran for hours, yet I couldn't see it actually doing anything. So I finally shut it down, then deleted it. Bad decision. When I deleted it, it took half my computer with it—my Word program, my FileZilla, nearly everything on my desktop. I just stared, and knew enough to act quickly before this thing finished its dastardly deed. I did a system restore and got nearly everything back, and the stuff I was missing, I found other ways to retrieve. I hate Bill Gates.

Next, I tried FontSquirrel, but I couldn't figure out how to use it, and found it cumbersome and annoying. I finally ran across a simple little tool called ttf2eot. It converts true type fonts to embedded open type fonts, then you deposit both font files onto your web server. It generates a little CSS code, so all I needed to do was to figure out where the hell to put it in the Microsoft Mess. Right under the "title." Finally, something worked. But better yet, I finally understood the process that the browser goes through to read a font. And that was huge progress.

For those who don't know, here's a course in fonts 101. The browser looks at your page, and sees that you have used Kingthings Petrock and Ding-o-saurs. But it has no idea how to display them, so it gives you Times New Roman and RRRRR where your dinosaurs should be. But when it is embedded, there are directions in the code that say, "hey, browser, look over here in this file so you can see that R is supposed to be a T-Rex." So the browser looks in the file and there we go—a ding-o-saur. And if you're Internet Explorer, you gotta look in the special file, the "eot" 'cause Bill Gates wants you to be special. This whole process began to fascinate me—the way the browsers work, and the way websites are displayed. But not enough to make me want to learn code. At least not yet.

I set to work redoing all the book reviews, and with the embedded fonts, even with the Word code, my pages actually displayed OK, even on smartphones. Meanwhile, I found a book for a good deal on Amazon, so I bought it in December, 2012. It is called Head First HTML and CSS and is the book that changed my life. You can read about it here.

The book arrived quickly, and I delved right in. After the first chapter, I knew about a thousand times more than I did before I started. It all started to make sense. And it didn't seem that complicated. At this point my goal was to know enough so I could make my web pages work, I already had about 90 loaded, and I wasn't about to design them again. But something in the back of my mind made me uncomfortable with that decision because I knew the more time passed, the fewer browsers would be able to read Word's alien language.

In late January, I got really sick. I told everyone it was that "flu," but I thought at the time it was more metaphysical than physical. Time has proved correct. Details in an upcoming article.

Anyways, after a few months off, I decided to just do it. Whole hog. I'm not sure what triggered this decision—maybe it was because I was sick of looking at volumes of coloring book reviews that are really clever, taking up space on Word, without being able to publish them. I got back into my Head First book, and found that everything now seemed so much easier. About half way through the book, I started redoing my coloring book pages, writing the entire code myself. What I thought would have to be miles of code is actually a neat and tidy page. You can view it by right-clicking on any page, then click "source" or "page source" if you'd like to see it.

And this brings us up to the present. I feel like years have been compressed into three months. This is a summary of where I was to where I am now (from September 2012, to April, 2013):

When I first began, I had to check every single thing I typed. Is that a ; or a :? Did I forget the " "? And those angle brackets about drove me up a wall. It was arduous then. Now, I do it in my sleep. (I actually do dream of coding.) I have reached the point where I can do it so fast, I'll do several pages in an evening. This boggles my mind, that I am able to do this. And I don't have to keep viewing the page as it displays, until I get lots typed in. When I finally do view it, it usually needs only minor adjustments. At some point, everything just seemed to click.

The first few coloring book pages I struggled with, but then developed a pattern. Until I checked them on a smartphone. OH NO. My images overlapped. I figured out how to use a combination of absolute positioning and letting the browser do its thing. (I absolute position images so I can place them exactly where I want, but only from the left. I use padding on the top so if the text collapses into more lines, the images move down.) I looked things up online, like how to make my pages stay centered even if the viewing device has a large screen. (Put the entire page in a wrapper with auto margin and position:relative). I also just discovered that you can put the background image in the wrapper, and it will stay centered, like on my Contact page. The coolest thing I figured out on my own was to use "hidden text" as an anchor for my images. If I put two consecutive rows of images using absolute positioning, the "tool tips" wouldn"t work.

I have become a master at copy-and-paste. I'm wearing a groove in my clicker. But as much as I know, I am still a beginner, and sometimes have to be reminded the hard way. I have frantically spent this week getting the main pages done on my site so I can FINALLY open it up to the public. I decided to tidy up my cPanel at Hostgator. Actually, just deleted everything. More like an implosion. So, in anticipation for the imminent growth of my site, I was determined to follow the Head First advice and put everything in folders, nice and neat. Coloring books in cb. Fiction, art, plays, all in their own folder. So I loaded them all up onto FileZilla. EEEK. Where are my fonts?? Oh, yeah, I have to put the fonts I need in each folder. I did know that. I have a comic sans that I take with me everywhere. But I have over 100 fonts on my server. That took me a whole day.

You know that saying, "the hurrier I go, the behinder I get"? Well, I had all my links done, particularly my navigation bars, which worked fine. I knew I had to add that extra/ / to get the browser into the right folder, The problem was, once the browser got in, I couldn't get it out. It would find a coloring book, then look for a main page in the coloring book files. I lost a whole day agonizing over this. I finally found the answer online: you need a ../ to move the browser out of a folder. I did read that in the Head First book, but I didn't get it. I had to go through and change EVERY SINGLE LINK IN EVERY SINGLE NAVIGATION BAR. Cut and paste, cut and paste. . .I GET it.

I really do. This becomes more exciting by the minute. There are far more successes than failures. And other cool things have happened. About a month ago, I realized I had to convert a few fonts to .woff because Firefox would not read the .ttf file. When I Googled for help, suddenly all these font-converter tools showed up that WERE NOT THERE in September. That is very cool. This is cutting edge, this font stuff. I now have a tool to convert to .woff, and even one to convert .otf fonts to .ttf, .eot, .woff, and .svg. and they all work. Easy!

So if you are someone who is curious about web design or how the whole thing works, dive into coding. It isn't difficult, and it's fun and rewarding. Bill Gates says everyone should learn to code. I agree. (But I still hate Bill Gates.)

Oh, and speaking of Bill Gates. . .Remember that WEFT tool I mentioned above? Well, I just recently discovered a gem it left behind. There were two folders it deposited into my documents. I was afraid to touch them for all this time, because I didn't want to wipe out all my data again. But the other day I got brave, moved them to my desktop, and opened the folder. My jaw dropped. There were only two fonts in these folders, and one was called PR Astro. This is a dingbat I really need. It has daggers, a witch's cauldron, the Om sign—stuff I haven't found anywhere else, but it is one of those fonts that just won't convert to .eot, so Internet Explorer can't display it. I have tried every tool I have, and I've tried for six months to convert it. Well, out of curiosity, I uploaded this WEFT file onto my server. OMG. It worked. . .

I am now 57, and I proudly present to you my lovely website with absolutely no computer-generated code. I wrote every bit of it! It is certainly not "professional" looking (but I didn't want it to look like WordPress. Yuk, so. . . you know. . .ordinary ). I prefer to call mine "artsy."

I've certainly come a long way in ten years. You CAN teach an old dog new tricks.

uahuahuahuah