Articles In Category Web Development
In the past few years, Adobe Flash has become more than an annoyance that some of us have kept in check by using "block Flash" plugins for our web browsers. More and more, entire web sites are being built with Flash, and they have no HTML alternative at all! This goes way beyond annoying, into the realm of crippling.
I had noticed the trend building for quite awhile, but it only really hit home when I realized that Google, of all companies, had redesigned its formerly accessible Analytics site to rely heavily on Flash for displaying content. This wouldn't be absolutely horrible except for the fact that Google provides no HTML alternative. I tried to needle the company through its Analytics forums, but only received assurance that yes, indeed, one must have the Flash plugin running to view the site.
Keep in mind that content like that on Google Analytics is not mere marketing information, like the sales pitch on the Analytics home page.
Those of us who are disturbed by the trend need to be a bit more vocal about our opinion. Hence, I'm starting a "Just Say No To Flash!" campaign, with its own web page, graphics for a banner, and the CSS and HTML code to deploy it on your own web pages.
I've mentioned this to some of my family and friends, and they often come back with: "So, Why should I say no to Flash?" I admit that as a power browser and a programmer geek type who, shall we say, makes more efficient use of the web, I'm more keenly aware of the ways that Flash is chipping away at the foundation of web content.
In the beginning, it seemed harmless: Flash was an alternative to animated GIFs, and an easy way to embed movies on web pages. But then advertisers wrapped their meaty mitts around it, and that's when Flash started to be annoying. However, one could block Flash in the browser, as part of a strategy of shutting out obnoxious advertising.
But publishing content via Flash is just wrong, for a number of reasons.
In other words, the Web Inspector tool is nothing but an intricate, sophisticated, and extremely well designed web page!
Having built a Crystal Black CSS file for web pages in general, and with my past expertise in CSS, I attacked this challenge with relish! It reminded me of the time I realized that Dashboard widgets are, at their core, nothing but little web pages (as are simply apps for the iPhone). In tackling this one, the main question was, How should the various elements look? And the hardest part was inspecting the various parts in of the Inspector in great detail to determine which CSS rules governed their default appearance and behavior.
As I discovered, the WebKit has a a sub-framework called "WebCore," which in turn has a folder of resources specifically for the Web Inspector. In the Inspector folder, among other things, is a suite of CSS files that handle different aspects of the Inspector's design and behavior. Of these, the primary one I needed to tweak was called simply "inspector.css."
Looking back,This is an update to the article I wrote last summer, when Safari 3.0 was first released. In the 9 months since then, a lot has happened, and I wanted to try to keep this info up to date. Opera, iCab, Konqueror, and Firefox have all made progress in adopting CSS 3.0 specifications, the next generation of the W3C's Cascading Style Sheets standard.
However, the WebKit team continues to lead the pack, as they have since I first contemplated this article over a year ago. In the last 6 months, that team has not only adopted more of the CSS 3.0 specs ahead of the others, but they have proposed several exciting new specs of their own, which the W3C is taking up as draft recommendations.
In addition to updating the state of CSS 3.0 in WebKit/Safari, I've also added some new demos for the Backgrounds section.
Here are the CSS 3.0 features I wrote about in July 2007:
- Box-shadow: Yes! Add drop shadows through CSS!
- Multi-column layout: Can we really do this now? With HTML?
- Rounded corners: Any can be made round.
- Colors with transparency: There goes another ugly hack from way back!
- Background image controls: Remember how great it was when you could add images as well as colors to an element's background CSS style? Well, it's about to get a whole lot better!
And since then, WebKit and Safari 3.1 have adopted the following new ones:
- Adopted last October, WebKit introduced its first take at CSS Transforms, which it has submitted to the W3C for consideration. With CSS Transforms,
- Announced at the same time is the equally exciting implementation of CSS Animations. At the moment, the only type of animation that's documented and demonstrated on the WebKit blog is based on CSS Transitions, which let you define how an object or attribute changes over time from one state to another.
- Also in October, WebKit added the CSS Web Fonts feature, which lets designers beam fonts to users through CSS and HTML, approximating the capabilities of PDF in a much lighter-weight form.
- Then, after a lull, things started to heat up again last month, when Apple released Safari 3.1. Safari 3.1 incorporated all of the CSS 3.0 features WebKit had pioneered earlier, plus it added a bunch of things the WebKit team hadn't blogged about. Chief among these was support for CSS Attribute Selectors. This is something of a holy grail to advanced web developers, since it opens up a whole world of possibilities for using the Document Object Model (DOM) to build better web interfaces. When released, WebKit was the first and only browser to support this geeky, but highly practical feature.
- And then, just today, WebKit added support for CSS Gradients to its portfolio. Gradients are not yet a CSS 3.0 specification, but they are part of the HTML 5.0 spec. No doubt Apple's implementation will be referred to the W3C for consideration.
Although I’ve been developing websites with MySQL for over 7 years now, until recently I had almost always used phpMyAdmin to manage my databases. phpMyAdmin is such an excellent web application and makes managing MySQL so easy that the only time I strayed was when it wasn’t available on the host server (which was very rare). When I needed a desktop MySQL client, I had turned to YourSQL, which I determined a couple of years ago was the best for me when connecting to MySQL from Mac OS X.
For various reasons that I won’t bore readers with here, I found myself needing a Mac desktop client for MySQL again recently, so I took the opportunity to review the market once again. What surprised me most, I suppose, is how many options there are for Mac OS X users who do a little light database work. (Caveat: I am by no means a database administrator, and my knowledge of SQL and MySQL is merely sufficient to develop web applications—meaning, I can build tables, relate tables, and build queries for those tables. The tools reviewed here are from this use case alone.) In the course of testing, I tried out nine different database apps:
- Aqua Data Studio
- iSQL Viewer
- MySQL Query Browser
Like many of you who develop on the Mac, I was amazed and very impressed by the WebKit team’s Web Inspector tool when it was unveiled in January. However, it was clearly not yet complete… two critical tabfulls of data were missing, which kept me turning to other tools—like the excellent Firebug for Firefox—when getting into a serious debugging session.
Well, tonight I was delighted to discover that the wait is over! On downloading a new build of WebKit today, I found that Web Inspector finally can provide those critical Metrics and Properties of each DOM element on my web pages. And boy, have they done a great job in the implementation! Every bit as cool and functional as the original bits, so I can now get all the details on any element of the page with a right-click of my mouse (control-click for some folks) and a simple selection of “Inspect Element.” Now come on Firebug fans, don’t you wish you could inspect an element that easily? Not that it’s hard with Firebug, but I always say, “Save a millisecond here and a millisecond there, and pretty soon you’ve saved a whole second!” (Just kidding… I never said that before.)
I admit I was skeptical when Yahoo took over Konfabulator last year.Â Apple had released Dashboard for Mac OS X 10.4 (”Tiger”), which had some clear advantages over the old Konfabulator widget model.Â The first time or two I tried the Yahoo widgets, I was singularly unimpressed not only with the performance of the widgets but also with their quality. They reminded me of why I had never been impressed with Konfabulator, although I’m sure Konfabulator’s wanting money for their product had something to do with that, too.
Also there was Yahoo! itself… a company that until the last 12 months or so had been growing more conservative, more commercial, more corporate, and less fun than the Yahoo I started loving 10 years ago. Not only that, but Yahoo appeared to be less and less friendly toward the world’s Mac-minded minority. I had grown so disenchanted with Yahoo mail that I finally gave up last summer and packed my bags for the terrific IMAP mail service called Fastmail. So it was a bit of a surprise when Yahoo wandered into territory that originally had been 100% populated by Mac-type aliens. Clearly, the visionaries had regained some influence at the company, as other recent smart moves testify (see all the cutting edge Yahoo goodies at the Yahoo Developer Network).
So, when I downloaded the Yahoo Widget Engine (YWE) 3.0 in December, I was pleasantly surprised to notice that things had changed quite a bit.Â Setting it aside until last month, YWE 3.1, the latest release as of this writing, confirmed my first impressions. YWE widgets are now very well behaved, for the most part, and take no more system resources than Dashboard widgets do.Â Plus there are actually some widgets that don’t have good Dashboard counterparts.
But finding more great widgets isn’t the only thing that’s made YWE a standard part of my desktop.Â What I really admire is the YWE implementation of widgets, which has firmed up my longstanding view that Apple needs to modify the Dashboard concept to make it more flexible, if they want Mac users to truly embrace widget-dom.Â The particular traits I admire are nothing new… they were standard in Konfabulator, and there’s one application for Mac OS X called Amnesty that will emulate the concept. I have stubbornly refused to pay the $20 that Mesa Dynamics wants for Amnesty, especially now that I use YWE, which does most of Amnesty’s tricks for free.Â So what exactly are those tricks?
- Run widgets like normal applications outside of Dashboard
- Easily change a widget’s “window level”–meaning, where it resides starting from the desktop itself up to a window that floats persistently above all regular windows, with several layers in between.
- Ability to lock a widget in place
- Ability to set transparency for a widget.
- Ability to access widgets–and their preferences–from a handy menubar item.
- Ability to stop and start the widget layer as the need arises.
I’m very pleased to report that the trend is moving strongly toward full compatibility. Of the eight new libraries, a full five of them achieve top grades of “A”. That’s a much higher percentage of the total than in March, and of the three non-A libraries, only one was a D (D+ actually). One was graded C+ and the other B. Of the revisited libraries, I was able to raise grades for three–Backbase, ICEfaces, and MochiKit. Only one library had a lower grade (Rico, down from A- to B), and the rest were unchanged.
Only two of the 8 new libraries have commercial licenses you’d have to pay for, and in one case you are really only paying for the IDE. Three of the new libraries require a java server architecture in order to be happy, one would prefer Cold Fusion, and the others are pure client libraries that are agnostic with respect to the application server. One library was added just a couple of days ago (Jitsu), and I haven’t had time to review it yet–but you’ll find it summarized here with the rest. Only one of these 16 libraries is DHTML with no Ajax controls–Uize. Even without Ajax, however, I think you’ll find Uize to be one of the most interesting here–especially in terms of visual richness.
Lately, I’ve been on a bit of a rampage on the subject of cross-browser compatibility, becoming especially incensed by prominent websites and web 2.0 applications that don’t work in Apple’s Safari browser. I know some of you are sympathetic, but think I should just be pleased that these sites work in Mozilla Firefox, which runs on all platforms known to man (or woman (or Martian)).
Yes, it’s definitely worth celebrating that Firefox has broken through the stranglehold with which Microsoft’s Internet Explorer had gripped the industry for so long, providing not just a viable alternative, but a demonstrably superior web browsing experience. Firefox is the descendent of Netscape Navigator that’s finally returned to beat off the IE interloper, and it has a huge following among developers as well as users.
But there are a number of other excellent web browsers that get shortchanged when a company is testing its site or application in only IE and Firefox. For as good as Firefox is, it’s not the best in all aspects of web browsing, either on Windows or the Mac. This article highlights a few facts about the browser market and points to some really useful features found in non-IE, non-Mozilla browsers that explain why users remain devoted to them and, like me, continue to raise a stink when they are ignored. The other two browsers I use pretty much every day, in addition to Firefox, are Opera and Safari.
I have been among the developers and observers who have praised Yahoo for the technical strength of their recently launched User Interface Library. In my tests for the Ajax/DHTML Scorecard project in March, Yahoo’s library was a clear “A” in its cross-browser credentials, and I was very impressed with Yahoo’s development team, which published clear and exacting browser standards for their library.
According to Yahoo’s own Graded Browser Support table, Safari is an A-graded browser, meaning it achieves the highest level of support possible with the Yahoo interface library. Clearly, the thought that went into this table is impressive, and the authors conclude the explanation that precedes the table itself with an appropriate quote from Tim Berners-Lee on the importance of cross-browser support:
â€œAnyone who slaps a â€˜this page is best viewed with Browser Xâ€™ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.â€
It is therefore highly disappointing and disillusioning to discover tonight that Yahoo has released a preview of its new, Ajax-enabled home page with support only for Internet Explorer 6.0 and Firefox 1.5. The only logic one can use to justify such a move is based on a totally PC-centric viewpoint, which argues that only Windows users are worth troubling with, since they comprise the vast majority of potential viewers. But this is precisely the viewpoint that must cease if Web 2.0 is to become the fertile melting ground for truly cross-platform interdependence that it wants to be. It’s simply not the viewpoint of any company that really cares about Berners-Lee’s vision or about the millions of users on platforms other than the virus- and malware-riddled mess that is Microsoft Windows today.
Today’s case is an Ajax/DHTML “tutorial” which has been advertised on a couple of websites that a lot of folks in the Ajax community rely on for good tips and pointers. Unfortunately, the only thing the script is a good example of is cross-browser carelessness, or perhaps simply cross-browser “couldn’t care less”-ness on the part of the developer.
It’s interesting that 2 months after an Adaptive Path essay coined the term “Ajax,” Apple released Mac OS X 10.4 “Tiger”, with its amazing and powerful dashboard widgets system. Within a couple of months, there were over 1,000 widgets available on the web, and these little babies were capable of completely replacing (almost all for free!) a number of system utilities, menubar items, and whole applications on the Mac. I’m tempted to think that awareness of Apple’s widgets helped promote awareness of, and interest in, what could be accomplished with rich Ajax/DHTML toolkits. After all, widgets are simply little Ajax/DHTML programs running in a special layer of Mac OS X called the Dashboard… They use exactly the same technologies as all of the Ajax/DHTML libraries, and in fact you can run them inside of Safari outside of the Dashboard.*
And so, it was fitting that when I finally found time to work on a widget I’d been planning to build since last summer, I decided to use one of the leading Ajax/DHTML toolkits rather than Apple’s own, for most of the widget’s functionality. Having done most of my recent DHTML web work with Prototype and its light-hearted, freewheeling sidekick, Script.aculo.us, I naturally turned to those libraries to help me out.
Back in early March when I first released the Ajax/DHTML Scorecard, rating all of the existing Ajax/DHTML toolkits against an ideal cross-browser scale, I rated Atlas an â€œE.â€ So, the good news for Microsoft fans is that Atlas is actually better than that. But not by much.
On April 4, I rescinded the original score after some readers correctly pointed out that I was treating Atlas differently from the other toolkits in the shootout. That’s because Atlas was simply vaporware in early March, and there was nothing to test. As I explained in an update to the article, the â€œEâ€ was based on Microsoft’s past conduct in the cross-browser-support department. Here, they had been very bad big boys. Microsoft is the reason that we have to worry so much about cross-browser support today, so it stood to reason that their entry in the Ajax field would continue their past strategy of steering all users to Microsoft products and away from alternatives.
Though I was skeptical Microsoft had changed its stripes, one writer assured me that
And so, I began testing with an open mind, especially after an Ajax blogger raved about Atlas in an article that was picked up by the No Fluff, Just Stuff RSS feed that I follow. (I’ll have to remember to ignore future articles by Brad Abrams, whose blog after all is hosted by msdn.com…)
Since Abrams was celebrating the release last week of the Atlas Control Toolkit, which includes 9 online demos of different Atlas controls, I decided to start my testing there. Unfortunately, Atlas failed on the very first control, the â€œCascading Drop Down.â€ Though it worked in Firefox on Mac OS X, it failed in both Safari 2 and Opera 9. After going through three or four of these, Atlas was batting a very low score, and I decided to keep track of results more scientifically.
The end result? Of the 9 Atlas controls very publicly celebrated by Microsoft this week, here’s how Atlas rates:
- Firefox, 8 of 9 controls worked
- Safari, 4 1/2 of 9 controls worked
- Opera, 3 1/2 of 9 controls worked
I don’t think you can count this as cross-browser support, folks.
Each of these technologies offered dramatic new ways of presenting information in a web browser, and developers who loved new gadgets glommed on to every advance, racing each other to see who could do the coolest things with these first. A lot of mistakes were made–a lot of really ugly eggs were hatched–but excitement and optimism were the buzz feelings. With Netscape in charge, you felt like you do when working as a protege with a master hacker: Does this guy ever stop pulling amazing tricks out of his sleeve?
One of the promises of Netscape’s vision was that the web–and, in particular, the web browser–could make one’s choice of operating system irrelevant. The web could level the computing playing field, since applications built for the web were applications for all, regardless of what OS you happened to prefer. What worked for NeXT, OS/2, Irix, Solaris, and Windows would also work just fine on Linux, Mac OS, Be OS, HP-UX, and BSD. The web browser could be the OS, and the only limiting factor in what you could do would be your hardware and connection speed. Microsoft’s lock on the computer desktop could be broken, and new competitors in operating systems and computers could unleash the full potential of the personal computer to improve our lives–both at work and at leisure.
Only, it didn’t quite turn out that way.
This is another horrible example of a company with blinders on. Google has been doing this lately, too. What am I talking about? Why, thinking it’s OK to release a new product without support for Safari or other KHTML-based browsers.
This is a tale of two blogs: Blogger, and WordPress. When I looked around for blogging tools and software last March, I settled on Blogger (now owned by Google) because it looked like I could get up and running very quickly. And I did! I don’t think it took me more than a week to customize an existing template and choose the few options available to get something I was pleased with.
Blogger is kind of like Apple’s .mac HomePage tool… mostly, you just point and click and make the best of the few options you have. Still, with very little effort you can end up with something that looks very professional. In my review of tools, I noted wistfully the powerful features of WordPress and Movable Type. As a guy who likes to program and play with code–especially with PHP and MySQL–those two blogging systems loomed on the net like two giant chocolate ocean liners. But I knew I had to be strong and ignore them, in order to get the blog up with a minimum of effort.
At the time, I also looked at desktop blogging tools and settled on Ecto, which I’ve been very pleased with. My only complaint is that Ecto’s developer updates the software so often I’m always having to download new versions! But it’s not really much of a complaint, since I’m very happy the tool keeps getting better.
So, with Blogger and Ecto in hand, I happily began writing down many things, delighting in my newfound ability to express my rants in a more disciplined form. As the number of articles grew, however, I started bumping up against the one feature of Blogger that bothered me in the beginning: No categories. As of this writing, Blogger offers no way to organize posts into categories or to tag them with keywords. This is a pretty serious deficiency, but it only has an impact after you’ve written more than a dozen posts or so, or if you’ve started covering more than one subject area.
Wow! This project really took me back a few years… and forward a few years as well.
The project took me forward a few years as well, since I got a clear glimpse of what life beyond browser-based HTML will be like a few years from now. I was skeptical at first, but because of both the explosion of Dashboard widgets since May 1 and the amazing usefulness of many of them, I’m now convinced that this new way of getting web information is the future. It’s really the next step beyond Sherlock, and in some ways is just an extension of RSS and an easy way of leveraging web services on your desktop. If I needed any confirmation for my gut feeling on this, Yahoo provided it this week by gobbling up Konfabulator (before Microsoft could get to them, I’m sure)! (More on that later…)