Bearfruit

Today Apple is supposed to make a big announcement. I don’t know yet what that will be but many people think it’s related to a Tablet PC. Apple’s success in the iPhone and App Store business has reminded me of one of the web’s biggest mistakes and we seem on track to repeat it. I’m stunned because it really hasn’t been that long. How can we be doing it again so soon?

Back in the late 90’s the web was young and everyone saw potential but everyone was frustrated because it was hard to do the stuff we really wanted to do. Then Microsoft revolutionized things with the release of Internet Explorer 4 (IE4). It shipped a little before Windows 98 and when added to later releases of Windows 95 it changed the desktop in many good ways. You were foolish not to install it just because of what it brought to the desktop.

But what it brought to the web was even greater. We were doing things we’d only dreamed of before. At first we built our sites with IE4 and Netscape 4 in mind (it was a big improvement over the 3.0 browsers before it) but it quickly became clear that these browsers were in two different leagues and IE was going to be the champ.

Many many organizations and websites dropped support for non IE browsers. It became hard to navigate the web w/out IE. It helped Microsoft resoundingly take over the desktop because you commonly needed IE to view critical websites.

This was the third biggest mistake we’ve made with the Internet and we’re still paying for it. Really. There are extensions for all browsers that let them trick websites into thinking they’re IE so that they can get past the dreaded, “you must be using IE to view this site” error. Sometimes it works but sometimes the only option is to just fire up IE.

And we’re doing it again. The next big thing, the thing that will change the web for ever, is the emergence of Mobile. A few years ago, for the first time, Laptops outsold desktop PCs in retail. It was a big deal because people’s primary computer was not a desktop but a laptop. And soon it will be an even smaller device like a mobile smart phone. I’m confident that soon web enabled mobiles (real web, not WAP) will outsell PCs.

Apple was the vendor to get people really excited about the mobile web, and rightly so. The iPhone is inspiring. Apple started out telling people to design mobile websites but then did a full turn. They opened up an API for native software development and encouraged people to use it rather than web apps. And the encouragement was easy money - build apps, sell them and make a ton of money. We liked the idea. We took the bait, hook, line and sinker. We even swallowed the bobber and asked the fisherman to give more.

How short-sighted though. The Mobile web is too big to be owned by one vendor. We’re repeating the IE 4 mistake all over and instead of groaning in despair we’re grinning and gleeful, asking for more vendor lock in.

We have to stop. Run away from native apps, back to the safety of standards compliance. Back to the world where everyone, regardless of the platform, can access and use your app. Don’t wait!

(as a follow-up to “How data affects wifi range”)

It’s also important to realize that if a country consumes more media on the Internet than it produces, the electrons will get shifted from the creating country to the consuming country.

Because electrons have a negative charge this will leave the creating country with a positive charge and the consuming country with a negative charge. In effect, “polarizing the nations.” This was actually discussed in ancient biblical prophecy and is a sign that the battle of Armageddon and the end of the world is near.

It just so happens that a large percentage of the world’s data centers are in the US and many countries’ top talent publish their content to US based hosts. So they’re actually sending their data (in the form of electrons) to the US to reside on magnetic media. This causes quite a bit of conflict because now all these nations with a positive charge feel that they’re better than us (with our negative charge).

However, because we are oppositely charged they simply can’t help but be attracted to us. They continue to host their media here, consume our broadcast television, follow our politics, etc.

Furthermore, there are some people who consume more media than they produce. If you spend a lot of time reading wikipedia but never contribute back you’ll build up a negative charge. Same goes if your torrent share ratio is < 1 or if you lurk in IRC.

This is also why designers and artistic types are often so different from business and engineering types. Since they are creating more than they consume they have a positive charge. Others have a negative
charge.

This is why it’s very common to have an artistic, creative person with an engineering, analytical person. Their opposite charges cause them to be eerily attracted. Similarly, artists tend to work in isolation because their positive charges repel other artists. You’ll also notice commenters on slashdot and other tech sites tend to be so grumpy. Their negative charges repel each other.

This has happened before. World War 1 and 2 were both indirectly caused by a build-up of creative talent in certain western countries. And like a bolt of lightening, conflict broke out, tearing through Europe, in order to redistribute the positive and negative charges in a more equal fashion.

Originally posted to CIALUG mailing list.

On Thu, Jan 14, 2010 at 11:53 AM, David McLaughlin wrote:
> I’ve had much better luck with range by placing the router as high as
> possible within the house.

That’s because the newer wifi signals are actually slightly heavier than air so they fall down gradually after they’re broadcast. Kind of like the branches of a willow tree.

It works good for streaming video, which is download heavy, but if you’re actually sending a lot of packets you’ll want your router to be below the sending machine since it takes more strength to get the weighty packets up to the router at a reasonable rate.

This is also why it’s taken so long to get Internet access on airplanes. It takes an incredible amount of energy to get the packets up that high.

There’s also been evidence that some packets are heavier than others. For example, twitter and web comic packets seem to have better range than, for example, a web page from the Mayo Clinic or the Wall Street Journal.

Originally published to the CIALUG mailing list.

It’s that time where people make their predictions. I’ll chip in my 2 cents worth regarding technology changes in the future. The last decade, I think, can be described as the decade of the web. The next, in a word, will be mobile.

A wise person said back in the mid-90’s that people need to communicate and be entertained but they don’t need to compute. This is so true. A lot of people have a big fat computer in order to email their family, share pictures and chat with their friends on Facebook or twitter. Over the last three years we’ve started to be able to do this nearly as well, or in some ways even better, with a mobile phone. Some people will start to think that they don’t really need a PC at all.

My first prediction is that the mobile web will become increasingly important throughout this decade to the point that it is one of the primary focuses for web developers.

Currently there are three main web-browser rendering engines: Internet Explorer, Mozilla/Firefox and WebKit (Safari, Chrome), ranked in current market dominance. This is up from one 10 years ago. 1 year ago you might have thought that Firefox was on track to take the lead spot from IE but now, due to the dominance of WebKit in the mobile realm it will probably shift down to spot #3. However, the fact that there are three engines on the radar is quite telling and leads into the next point.

My second prediction is that the platforms for “software distribution” will become more diverse.

The implication here is that more applications will move to the web. Maybe they’ll be a purely web-browser based application like gmail, or maybe they’ll be a hybrid, “fat client” app such as Google Picasa or your twitter app. The key thing is that developers won’t have the luxury of focusing on a single platform (traditionally windows for PCs and more recently iPhone or blackberry for mobile apps). A couple years ago being a blackberry developer might have seemed a pretty elite title. Now the iPhone is the cool gadget. Soon Android will be too big to ignore. You’ll need a plan for supporting each of these and more. Some devices you target will get bigger, some will get smaller. A lot of your current assumptions won’t be valid.

This ties into the previous prediction because the one common thing all of your devices will have is the web.

My third prediction is that operating systems won’t matter nearly as much as they used to. An OS for consumer products will merely be a set of drivers needed to launch a web-browser. Some people, especially media creators (video, graphics, etc), software developers and people who do intense computations will still use a PC and care about an OS. Most consumers won’t care. They don’t care what OS is on their TiVo or their mobile phone. They may use their TV to browse Youtube, their smart phone for facebook and their Desktop PC for wikipedia. Each will have a different OS.

Moving on to prediction four, media distribution will change. Blu-ray discs cost twice as much as DVDs. You still have to go to the store to buy them or the video store to rent them. But more and more devices have Internet connections and people are starting to realize that they can watch videos streamed over the Internet with satisfactory quality. They can do it cheaper than Bluray and it’s more convenient because they don’t have to leave their house or wait.

Amazon now offers a service where you can buy a movie, get it in the mail on disk in a few days but watch it over the Internet immediately. This will help lead the transition and soon people will think of the disk as an inconvenience.

Final prediction: Two devices are better than three, and one is better yet. A tech-savy person may now have a PC, a netbook and a smart phone. Or maybe it’s a PC, an iPod and a cell phone. Or maybe it’s a gaming PC, a laptop and an iPhone. Maybe they have a digital camera to toss into the mix. They have numerous devices that contain data they want.

Currently there’s lots of talk about netbooks and tablets, but both of these are transitional technologies because they’re an extra device to tote around. People want to carry less.

When web-enabled smart phones with a speedy data connection where rare and flash data storage was small, it made sense to want a special computer for carrying around with you. If you loved music you probably wanted an iPod but you sure wished you could combine the iPod with your cell phone. You had a great digital camera but you often used your cell phone’s camera because you always had it with you.

The iPhone and its brothers are getting pretty good but sometimes you just can’t get done what you want to on a 3 inch screen. It makes sense that netbooks and soon tablets would be popular for a little while. But it’s another device to carry. You’ll stick your phone in your pocket but still have to tote around this other device if you want to use it.

In tomorrow’s connected world, the last thing you’ll want to leave is your phone. It’s your camera, your communication device, your map and in a pinch, allow you to look up information on the web or create content. You’ll yearn for a single device that can do all that you want. It’s camera won’t be as good as your DSLR, it’s screen won’t be as big as what’s on your desk at work. The input will be slower than a keyboard, but it’ll always be with you and you can get the job done wherever you are. And these things will improve, fuelled in large part to improvements in user interfaces.

The only platform that will matter by the end of the decade will be a mobile communication device. And all of these points back to the first prediction above.

Among the elite hacker community it is sometimes considered cool to have an unstyled website. I’m not certain what makes this cool, but I respect it none-the-less. However a few absolutely minimal styles can make your site easier to read. Here they are:

body {
    font-family: sans-serif;
    line-height: 130%;
    font-size: 91%;
}

First, this helps improve readability by switching to a sans-serif font. Even the highest resolution screens (iPhone and similar) max out at 160dpi. More commonly screens are 96 to 120dpi. This is far less than a printer which is more like 600dpi on the low end. Therefore the curly tips to serif fonts do not get well defined and are essentially blurred (interpolated) by the screen to make them look smooth. This completely negates the benefits serifs enjoy in the print world.

Secondly, it increases the line-height, effectively putting a bit more space between the lines of text. This makes it easier for people to read your content because they can more quickly refocus their eye on the next line of text as they move their eyes from the far right side of the column back to the left.

Lastly, it drops the font-size by 1pt from the browser default which allows more condensed type. Since sans-serif fonts are much easier to read on-screen this does not undo any of the improvements on screen. 11pt sans-serif is easier to read than 12pt serif.

Some people don’t think this matters. If you are one of these types of people let me assure you that you that it does matter to many of your site’s visitors, even though many would have a hard time quantifying or describing why the styles above improve things.

We’ll use the site of my friend and colleague Barry Warsaw as an example. I’ve adjusted his site’s styles using firebug and the two images below demonstrate the change:

Note that the newly styled page actually fits more content in before you have to scroll. Also note the links in the navigation at the top of the page, how the under-lined links have more space between the underline and the text below it.

So very little work is done on your part, your site’s general appearance hasn’t changed dramatically (though some people will notice it) and your site has gotten easier to read.

Please don’t omit the line-height, it is essential to the end result.

The latest craze is to write an iPhone app. I’ve been preaching for a while that mobile apps are the way of the future but I don’t like the idea of iPhone apps and here’s why.

First, I have to give credit to Apple. They’re brilliant, though I’m convinced the place they’re at now is exactly what they intended a few years back. If you work on the premise that any good capitalist company is bent on total market domination (not all companies are but it seems to fit Apple) then what they’re doing is right on track to achieving this goal.

The iPhone is a smart phone targeted at consumers. Before the iPhone, a smart phone was a blackberry like device that had a prohibitively expensive data plan and was for corporate communication. Normal people didn’t buy them, it served as a ball and chain to keep people focused on work even when they weren’t in the office. It made no sense to put an MP3 player in such a device, and since most blackberry customers had big IT depts and in house developers, deploying mobile apps meant a java applet. But really, it was about connectedness and communication.

In order to create a new market Apple put what everyone wanted on their new smart phone - a desktop grade web browser. You could use this to access your corporate intranet apps or your personal email or your family photo album. Developing new apps to target the device used the same standard technologies that every company had in stock. HTML, CSS and Javascript. A market opened up and people were happy. Apple successfully created a new product market and captured everyone’s attention.

This does happen every now and then. Netbooks, palm pilots, ebook readers, mp3 players. One company explodes onto the scene with a great idea, the world goes crazy, and then what happens? Send in the clones… It takes a year or more but any time there’s a successful new market everyone wants in.

In Apple’s case the clones were absolutely capable of doing things just as well, and conceivably better. So how do you keep your product successful when the clones come? Offer consumers something they can only get with your product. Something good, something you can make them want and ask for by name.

Now it just so happens Apple has been doing just this for a while. Sony, Dell and IBM have been creating computers of the same calibre as Apple’s line for at least as long as Apple has. But only on Apple’s computers can you get Mac OS, and they’ve done a great job of ensuring people want it.

So what did Apple do to ensure their continued success with consumer oriented smart phones? They created the App store. The App store is not for web applications. No no, those just aren’t cool enough. If you want your app to be able to use 3d or advanced gestures or the accelerator or compass (most apps dont need these) you need to write a native app. You’ll notice that much of Apple’s marketing isn’t about the iPhone, it’s about the app store.

So how do you create an App for the App Store? You don’t use java. Because Java is portable and then it would be too easy to port it to the other clones coming down the pipeline and we don’t want that. Besides, Java is evil and slow and ugly and we can’t have that in the App Store. And C++, that’s no good either, because again, it’d be too easy to port that to other platforms. And besides, everyone knows that it’s too easy to write insecure code with C++. .Net? Noooo waaaay. That’s some other vendor’s proprietary solution.

If you want truly beautiful, secure and unportable code you need to write it with Objective C. Haven’t heard of it? Don’t worry, you’re not alone. It is the platform developed by NeXT, which was later bought by Apple and is the programming language used to develop modern Mac OS apps. And that’s all it’s used for. Period.

So if you want to write very cool apps for the iPhone here’s what you need to do:

• Get an Apple computer running Mac OS (you can’t develop on Windows or Linux)
• Learn Objective C
• Pay Apple for a developer subscription

The least costly of these steps is the last because you can purchase a subscription for as little as $100. The next least costly is to buy an Apple computer. Starting at about $1,000 for a machine, it isn’t too big of an investment.

But you do need to make a big investment into learning Objective C and Apple’s developer tools. And this is where the genius is evident. Every second you spend learning Objective C and iPhone development is an investment in acquiring skills that are useful only for developing iPhone apps and Mac OS applications. In essence, assuring that there is no reasonable competition for Apple’s platforms.

So what can you do if you want to develop for this amazing new platform? (And I’ll readily admit, it is an amazing new platform)

You don’t have to feed the monopoly. Instead invest in skills that will help you with the iPhone and other platforms.

Ask yourself: Do you really need hardware access? (remember, location and orientation are available to web apps) If not, then you probably can use HTML5, CSS and JavaScript. You can write offline apps with HTML 5. You can store data locally using either cookie based persistent storage or client side SQL storage. Add a couple lines of iPhone specific html and your app can behave just like an app store app once it’s been bookmarked on the user’s home screen.

And the good news is that your app can work with little modification on Android and Palm Pre based handsets and much of your code can be reused on desktops and other brands of mobile devices. Wow.

My recommendation: Don’t invest in Apple’s monopoly. Invest in skills that will be portable to other platforms.

Designers have been using grids for a long time in the world of print and advanced layout. Websites have kind of used grids in the form of tables but this become unpopular with the rise of the semantic web and css based layouts (for good reason). Modern CSS frameworks give you a powerful grid for laying out your web pages and often bundle in a multitude of extra features. I’ve now reviewed four grid systems and thought I’d quickly summarize them.

YUI grids

Unlike the other grids this one is just a grid. To get the full benefit you need to use it in combination with the other css components of the YUI toolkit, fonts, base, and reset. It has great documentation, easily and sensibly ties into the YUI js library and has three features that do stand out: nesting grids which is not as simple as it sounds, a fluid, 100% width page layout and it was built to accommodate IAB ad unit guidelines.

The typography is poor in comparison to other kits but if you like YUI’s other features you can easily snag the typography from another framework and plug it in (after the reset!). All said, I feel like it’s a pretty mediocre css framework. It doesn’t come off looking sexy and does not feel designer friendly. Better typography built in and prominently linking to photoshop or other graphic format files (like SVG) would help.

Blueprint CSS

Not just a grid, it’s a complete framework which incorporates a reset, which sets all the browsers built in styles to a plain default, and then reconstructs the styles in a way that will be consistent across platforms. It then adds a beautiful typography layer which optimizes layout to maintain a nice vertical rhythm. What this does is helps your lines of text to match up and feel balanced even in adjacent columns. It gives the page a subtly more harmonic feel that you’d have a hard time describing when you see it.

You’ll also find styles for forms and a beautiful print style sheet. Blueprint is a fixed-width only layout system. This makes it very designer friendly. Uncompressed, the primary css file (not including IE special rules or print.css) is 11k. There is an included script that will help you to customize the grid for your needs including minimizing the styles for production. This allows you to have a grid with any number of columns you like. It is a very easy grid to love.

960gs

In many ways an evolution of blueprint, it’s fundamental concept is that the right page width is 960px. Recently a grid generator has been produced that lets you create a grid that meets your needs. A sister project has also risen that creates a fluid width version of the grid for sites that don’t want a fixed width.

The css file for this project weighs in at under 6k, which is nice, however it lacks the forms and typography support that blueprint has. In both cases default styles are very good but doesn’t have the same out of box elegance. In its favour there are readily available templates for numerous graphics packages. I strongly recommend you evaluate this one if you’re considering blueprint and likewise, if you’re considering using 960gs that you also consider blueprint. They have a lot in common with each other and also have some very distinguishing differences.

Baseline

The newbie on this list, it is the motivator for this list. I’ve not used it but it brings some very interesting ideas to the table. It has support for HTML 5 first of all. Secondly, it deprecates IE6 and focuses on the latest browsers. Like blueprint, it has a strong emphasis on typography and includes some great form styles. There is a PSD in the zip file for designers to use.

Summary

If you’ve never used a grid you should definitely give it a try. 960gs may be the best compromise for beginners because it is far more attractive out of the box than YUI yet has documentation that is almost as good. If you want no compromise typography, form and print styles out of the box you should start with blueprint. If you are developing with HTML 5 you may want to consider baseline. If you like tutorial videos from engineers then you should try YUI.

I’d love to hear your ideas and suggestions, please leave a comment.

Amazon sent me some recommendations and they are good. 7 out of 9 look like something I want to read. Kind of for my own future reference here are the books they recommended:

• Even Faster Web Sites: Performance Best Practices for Web Developers by Steve Souders
• Complete Web Monitoring: Watching your visitors, performance, communities, and competitors by Alistair Croll, Sean Power
• High Performance Web Sites: Essential Knowledge for Front-End Engineers by Steve Souders
• Web 2.0 Architectures: What entrepreneurs and information architects need to know by James Governor, Dion Hinchcliffe, Duane Nickull
• Using Google App Engine by Charles Severance
• Erlang Programming by Francesco Cesarini, Simon Thompson
• Website Optimization: Speed, Search Engine & Conversion Rate Secrets by Andrew King

To be fair, I could probably learn everything I want to know about Erlang form the wikipedia page or the language’s website, but I’m still impressed with Amazon’s ability to pick up subjects I’m interested in, presumably based on aggregate data from many other web devs out there. It gives me a warm, fuzzy feeling to know I’m not so esoteric after all.

I’ve been using my new computer for a little over a week now. I bought the Mac Book Pro 13. One of its features that may not jump off the page to you when looking at the tech specs is how great the screen is. To my horror I’ve gone to some websites and realized I’ve made some serious errors in optimizing my images. Things that look fine on a typical computer screen but look retarded on a really good quality monitor.

If you do image optimization or web work you should seriously consider investing in a very good monitor. Who knows who will see your work and laugh at you because of the mistakes you don’t even know you made? Oh I am so embarrassed.

Well, blame it on Twitter. I’ve been blogging much less lately (I’m @newz2000 on twitter and identi.ca). I’m going to resume writing soon and have some great material to start out with.

I’m getting ready to replace my Dell Latitude D420 laptop. I love it. It’s very light, very portable, has an extended battery that gets 3-5 hours of life. If I could change only two things it would be a slightly larger screen (or more specifically, a slightly lower DPI) and a standard dual core cpu rather than the ultra-low voltage (ULV) dual core cpu. Dell and Apple both offer a computer that meets my requirements but to my surprise, the Apple is cheaper almost identical (corrected, see below) .

In Dell’s line of computers the natural upgrade path is to the Latitude E4300. Base model with 2GB RAM, 160GB Hard drive and a 3 year warranty + additional 802.11n, webcam and bluetooth is $1,409.

These add-ons to the dell give it near feature parity to the new Mac Book Pro 13 inch which sells for $1,199.

Do you get anything for the additional $210? Well, the Dell is 1.2lbs lighter, or 26%, which is nice. You also have the availability of a docking port and accidental damage warranty. The Apple has a backlit keyboard, a better video chipset and a multi-touch trackpad. The Apple also gives you the ability to develop iPhone and iTouch applications. I’ve heard it will be unlikely to see this capability ported to Windows, so that may be a big selling point.

The good news? Ubuntu works well on both computers. :-)

Correction - the Dell has a 3 year warranty, the Mac has only 1 year. You have to add AppleCare which makes the Mac about $40 more expensive to bring it to 3 years. But that also gives you technical support which is an add on for Dell, which brings up the cost of the Dell a bit too, I think giving the Mac about a $50 advantage. All of this is a moot point because it used to be that there was a 30% price premium for the Mac and now they’re too close to call.

My brother is applying for a jr. web-dev position so I was thinking about what tips to give him. That thought process lead from one thing to another and I realized that two of the most influential web-dev books I’ve read are not ones that would normally jump out at you. These are not replacements for a good HTML or JavaScript book, these are a bit more high-level. No matter what your development expertise (front-end, java, php, ruby, etc) these books will each take you up a significant notch in your web-dev skills and will set your web-applications way above the norm.

RESTful Web Services by Leonard Richardson and Sam Ruby

From the title you might think this is just another book about web services. You would be so wrong. This book is about HTTP. Doesn’t that sound far more exciting? :-) Actually, this book provides the reader with a great understanding of how the web works by looking at the interaction between a web-client and a web application (i.e. a web service). Think of it as seeing how to surf the web without a web-browser. By understanding concepts such as statelessness (which a lot of web applications don’t get right), http response codes, cookies, authentication and request headers you’ll be able to create web applications that work robustly, are search engine friendly, and are very web 2.0 friendly (mashups, json, xml, etc). Get it. Oh, by the way, Leonard is a co-worker of mine but I didn’t know that when I bought the book. It’s always fun to order a book and then see the author and go, “oh hey, I know that guy!”

Mastering Regular Expressions by Jeffrey Friedl

Until you learn them well, regular expressions seem like magic. If you don’t know what they are, the short definition is “powerful, flexible text patterns for doing complex find or find and replace operations.” After finishing the second chapter of that book I was able to do things with a few lines of code that made other developers think I was a programming god. Want to strip all the html attributes from some markup except the a href and img src attributes while leaving the tags in place? Wish you could get a list of hrefs in a page that link to local resources? Separate CSV data? All easy with regular expressions. But the benefits go far beyond the actual results. Since most developer’s editors support regex syntax you can be more productive or use Unix command line tools to find files.

OK, those are my two major recommendations. Anyone who calls themselves a web-dev will find them a great read. If you know others, leave suggestions in the comments.

A few final recommendations

Oh, before this article ends, here are some other books that I found to be greatly influential to me. They lack the universal appeal of the previous two books though:

• Danny Goodman’s JavaScript Bible (I own the 3rd edition, a lot has changed since then though)
• Danny Goodman’s Dynamic HTML: The Definitive Reference getting old but a great reference covering HTML markup, CSS and essential JavaScript techniques (I didn’t realize it was the same author as JavaScript Bible until just now. ;-))
• Eric Meyer’s CSS: The Definitive Guide Great CSS book by one of the masters
• Roger Parker’s Looking Good in Print perfect introduction to essential design techniques. There is a reference for the web but it’s not as good as the print version imho.

I own (or have owned) and read cover to cover all of the books mentioned above. And yes, despite the long list, there are numerous books that I have owned and read that I didn’t feel worth mentioning. :-)