There are no Flash websites

Never say “we have a Flash website”; there is no such thing. You might say: we have a website and it features, amongst a lot of relevant information in HTML pages, a Flash movie and/or application. You might say: we did buy a domain and we decided that a real website would be too accessible for our customers, so it only has a Flash blob on the ‘homepage’.

Flash is to websites what airconditioning is to a car: you might call it luxury, you might call it indispensable, but you cannot call it a car. It’s just airco.

For some reason, people that have experience with creating Flash applications also think they can make websites. “Just throw some Javascript on the homepage and it plays beautifully”, right? Wrong! If you have never heard of proper markup, SEO, the limitations of Javascript and Flash, you should leave making websites to professionals. If you insist that your branding cannot be properly expressed with just HTML/CSS/Ajax, you can add a Flash object to your site. But on its own, it’s a sorry excuse for a website.

Case: Le Fabuleux Marcel de Bruxelles
Le Fabuleux Marcel de Bruxelles
Le Fabuleux Marcel de Bruxelles is a new brand of singlets (‘wifebeaters‘ in English, or ‘marcellekes’ in Bruxellois). The idea is good, the branding is beautiful, the advertising is top-notch (not surprisingly, since the founder is also one of the founders of the ad agency LG&F).
Continue reading There are no Flash websites

Styles should not be referenced by a

(If you don’t work with HTML, this next post will be of no interest to you.)

Rant: the way external CSS stylesheets are included in HTML now is not logical nor convenient.
So: <link type="test/css" href="(...).css" rel="stylesheet" /> is wrong,
it should be <style type="text/css" src="(...).css" />.

Why?

css Zen Garden
Because src is for now, href is for later

In a HTML page, there are a number of files (URLs) that have to be fetched to display:

  • any text in the document, within <h1>, <p> or <div> tags or not
  • any images, specified as <img src=”” /> (always external)
  • any iframes, specified as <iframe src=”” /> (always external)
  • any javascript, specified as <script src=”” /> (external or in-line)

There are also links to other URLs that are not for now: maybe one click away, maybe just there to be interpreted by the web browser:

  • anchor links, specified as <a href=””></a>
  • links: prev/next, archive links, feed link, specified as <link rel=”” href=”” />

So: you need the src="" referenced files immediately, and the href="" ones not. The way stylesheets are referenced now breaks this logic.

Because <style> is for stylesheets

Why can you embed in-line CSS style information within <style> tags, but not external stylesheets? Compare that to Javascript:

Inline JS: <script>...</script> and
External JS: <script src="" />

That makes sense. The same should be possible for <style>. The way it works now is counter-intuitive and antiquated. So please add it to XHTML 1.1.

Flickr: combining ALT and TITLE for images

If you want to embed one of your own Flickr pictures into your blog, the Flickr photo page gives you the HTML code for easy copy/paste. They require you to link back to the photo page, so obviously in the HTML they provide, they give your an image with a link, i.e. an <img> tag in between a <a> </a> anchor tag pair. A typical example:
<a href="http://www.flickr.com/photos/(...)" title="Photo Sharing"><img src="http://static.flickr.com/(...).jpg" width="600" height="1200" alt="(image title)" /></a>
As you can see, they combine both an anchor title (always “Photo Sharing”) with an image alt text (Flickr uses the photo title for that). Both fields give more info about the objects they refer to and are very much loved by search engines. It should come as no surprise that the #1 Google result for “photo sharing” is Flickr.
Flickr: img alt vs. a title
Continue reading Flickr: combining ALT and TITLE for images

Rails Conference in London – who’s coming?

RailsConf Europe
Who wants to join in for the September Rails Conference in London? Let’s set up a nice Belgian delegation!

We can get a group discount:

  • 5 or more delegates and get 10% discount
  • 10 or more delegates and get 15% discount

This is the reason why I’m asking this now:

  • May 15th and pay just £400/delegate
  • May 30th and pay just £425/delegate
  • June 30th and pay just £450/delegate
  • July 30th and pay £475/delegate
  • August 30th and pay £525/delegate
  • September 10th and pay £575/delegate

So: leave your details here if you want to join: if we get to 5 people by May 15, we take the 10% discount (£360 = 526 euro), if we don’t, but we get to 10 people by May 30th (Barcamp Brussels might help), we take the 15% discount (also £360), if not, it’s everyone to themselves.

Confirmed speakers:

The conference is already packed with exciting speakers, including the creator of Rails, David Heinemeier Hansson, Pragmatic Programmer Dave Thomas, best-selling author and passion maven Kathy Sierra, Rails core developers Jamis Buck, Marcel Molina, Jr., Thomas Fuchs, Rails authors and trainers David Alan Black, and Chad Fowler, Rake author Jim Weirich and many more to be announced.
(from europe.railsconf.org)

Storing the SQL queries in the database

I want to outline something I developed something like 5 years ago, and that I was kind of happy with at the time: a way of saving all SQL queries inside the database itself. The reason for writing this is that it would really fit in with all the RubyOnRails and other programming frameworks that are created these days. If someone feels like creating a component/plug-in for it, that would be so nice…

If you have no interest in programming and/or database management, go hug somebody and skip this article.

PRINCIPLE
In the most simple version, you have 1 extra table in your database that looks like this:

query_id   int % unique ID of the query
template   varchar(1000) % or even longer
var_list   varchar(255) % comma separated list of vars

An example:
[ 33 , "select * from users where user_id = %user_id% AND type = '%status%' " , "%user_id%,%status%" ]
Instead of constructing your SQL code in your (PHP) code by making one big string and then executing it, you call a function my_exec_query(query_id,array_params)
This function will

  • get the template text
  • walk through the comma-separated list var_list and for each variable inside, look the corresponding value up in the array array_params (or this can be a dictionary or a hashtable).
  • when all substitutions are finished, execute the SQL code and return the result as (connected/disconnected) recordset or an array.

Continue reading Storing the SQL queries in the database

Web-based web development

Writing code in your browser, it’s coming this way, I tell you! Some indications:

my own WikiRAD article (July 2005)
Playing around with PHP and wikis at the same time made me think on how web-based editing and compiling would be a good way to develop and run web applications
Feed43
Create an RSS feed out of any web page by using regular expressions with a nifty Web2.0 user interface. Lots of services are based on URLs and use RSS as input, so this can be the start of a first application. E.g. I just created an RSS feed for the Stubru playlist pages out of a Stubru Javascript file. Imagine I could now tell Feed43:
for each item in feed_that_I_just_created {
parse_the item_url
publish an rss feed for this item_url as feed_url_X
}

and then start working with that content too.
Amazon S3
web-based outsourced storage for any application, which made John Keyes and Peter Van Dijck to ask themselves: “Can you use Amazon S3 to create the new Flickr killer?”, and which made me think: but what if not only the storage, but the whole program was run by a 3rd party?
Iamalpha (via Richard McManus)
AOL’s new initiative for building microformat-based applications. It’s a bit early to grasp the extent what what they’re trying to accomplish, but I think it’s potentially more than just widgets. They don’t have a web-based IDE yet, but they do have a copy/paste code-validator. Most importantly: the applications are run by AOL!
YouOS (via Jeremy Zawodny)
YouOS: web-based IDE
a web-based OS that allows you to develop Javascript-based applications in a web-based IDE, with version control and compiling. It’s one of the products coming out of Paul Graham‘s Y-combinator startup incubator.

Continue reading Web-based web development

Barcamp Brussels: May 2006

Barcamp Brussel
Last year we organised a fairly successfull blogger’s dinner in Brussels, and now we’re gonna try something different:
next May we will have a Barcamp Brussels event.

WHAT IS A BARCAMP?

Barcamp NY
(photo by miss_rogue)

Barcamp was first organised in LA by Chris Messina and some buddies.

BarCamp is an ad-hoc un-conference born from the desire for people to share and learn in an open environment. It is an intense event with discussions, demos, and interaction from attendees.

It is not your regular conference:

  • No spectators, only participants: Attendees must give a demo, a session, or help with one. All presentions are scheduled the day they happen. Prepare in advance, but come early to get a slot on the wall.
  • No fixed agenda: talks, demos and topics are proposed by the attendees when they arrive on a central whiteboard.

Continue reading Barcamp Brussels: May 2006

Jakob Nielsen: design mistake #5


Jakob Nielsen has published his updated Weblog Usability: The Top Ten Design Mistakes. One that I recently have tried to fix (before Jakob published his article, honestly!) is #5: “Classic Hits are Buried”.

Highlight a few evergreens in your navigation system and link directly to them. For example, my own list of almost 300 Alertbox columns starts by saying, “Read these first: Usability 101 and Top Ten Mistakes of Web Design.”
Also, remember to link to your past pieces in newer postings. Don’t assume that readers have been with you from the beginning; give them background and context in case they want to read more about your ideas.

As you can see in the sidebar on the right (if I haven’t changed my layout by the time you read this), “This blog covers stuff like […]” and then I have some links that show up when you click the […] button. I list some of the more typical posts (Podcasting with Blogger and Feedburner – Oct 2004 as well as tango moves) and some ideas/projects I launched (folksonomy, photofeed).

So what kind of links to your own posts could you make:

  • ‘classic’ posts: posts that are typical for the subjects you address
  • ‘remarkable’ posts: posts that are are maybe not typical, but that you are somehow proud of (in my case, “Imperial time units” comes to mind)
  • ‘popular’ posts: the posts that people visit most, link most to, have most comments on, …

The first 2 are probably links you better indicate yourself, the last one could be based upon aggregated stats. Let’s say you want to make each list as an RSS feed, so you can display it through PHP or Javascript on each blog page.

  • handpicked (‘classic’, ‘remarkable’, ‘controversial’) posts: put them in del.icio.us or furl and use the RSS feed
  • ‘popular’ posts: imagine a statcounter of somekind, that measures the #page hits and visitors, that also checks Technorati, Google Blog Search and Yahoo stats, that also uses the Feedburner item stats (if any) and the # of comments per post (don’t know where that could come from) and that aggregates these together according to your own wishes. The end result should be the Top 20 of your own blog posts, in RSS format.

Any ideas on this?

UPDATE: I created an overview page for my blog, linked from the blog homepage.

Technorati: stats

‘Moroccan Blue’ Leads Top Fashion Colors (RGB)

Moroccan Blue topped the list of colors at New York Fashion Week’s Fall 2005 collections, according to Pantone, Inc., the global authority on color and provider of professional color standards for the design industries.
Each season, Pantone surveys designers showing at New York Fashion Week and collects feedback on prominent collection colors, color inspiration, color philosophy and each designer’s signature shades. This information is used to create the PANTONE Fashion Color Report.
The top 10 most directional women’s ready-to-wear colors for Fall 2005 (along with printing values) are
(converted by me to RGB):

Color Name Pantone RGB
Moroccan Blue PANTONE 19-4241 #004D7A
Glazed Ginger PANTONE 18-1154 #BA5D00
American Beauty PANTONE 19-1759 #BF0000
Ruby Wine PANTONE 19-1629 #730028
Atmosphere PANTONE 16-1406 #B2A68F
Burnt Olive PANTONE 18-0521 #466900
Gloxinia PANTONE 19-3022 #5600A6
Rattan PANTONE 14-1031 #DACE3D
Moss PANTONE 16-0532 #9DA600
Burnt Orange PANTONE 16-1448 #ED7700

from creativepro.com

Technorati:

Online software development: the WikiRAD


I love the idea of social software. Specifically, while it has been several years since I first encountered the wiki concept (Ward Cunningham‘s c2.com), and I have been a Wikipedia contributor for a while, it is only since I checked out the emerging wiki hosting sites (see Google and social software: wikis) that I realize that wikis are becoming mainstream. Sites like Wikispaces, JotSpot and PbWiki are providing anyone with the tools to safely and effortlessly develop a body of knowledge.

On a seemingly unrelated point, I am currently developing some stuff in PHP (codeword ‘photcasting‘ but more on that later) and I realise my development environment is so amateuristic: I use a text-editor with FTP support (the last couple of years it has always been Editplus), and everytime I save some code, I overwrite the older version on the ‘live’ server. I also develop on different PCs in a typical week (easily 3) and so I don’t have 1 development PC with PHP running where I could stage everything before I deploy it to my ‘production’ site. With a bad broadband connection, when a ‘save’ operation goes wrong, you end up with a ‘crucialstuff.php’ script file that is empty (0 bytes) and brings your whole site down. Unfortunately, I know this from (repeated) experience.

Earlier today, I was thinking about these 2 issues one right after the other and bam: they collided. I have a new development paradigm: the WikiRAD.

‘WikiRAD’ development

WRITE CODE

  • you write your code with your browser in a Wiki-style editor, with syntax colouring added (haven’t seen that in a Wiki editor yet). The code resides on a WikiRAD server (with RAID5 disks, daily backups, …). You need no other software on your PC to be able to develop software.
  • the Wiki system takes care of version management and comparing of sources (Wikis already do this). Check in, check out, rollback, branching, merging, several developers on 1 codebase, … all possible!
  • you can search your whole codebase for certain keywords, jump to class definitions – just like normal IDE
  • when you look at your code, the names of classes, templates, libaries, .. become clickable, just like in a … wiki!
  • there are tools to make writing code easier (class wizard, sample code, forum for questions)
  • there’s a Google-like crawler that indexes code so it becomes available for other developers – this is real “open source”!

COMPILE AND RUN

  • the WikiRAD server lets you develop in a ‘stage’ mode (separate from your real system) and lets you deploy it to ‘production’ once you’re sure. The production server can be your own server, with deployment via FTP or SSH.
  • for the most popular languages, you also have a lint system that can detect obvious errors in your code before compiling.
  • if the language you write in requires compiling (like C++, C#, VB.NET, …) the server takes care of that – probably faster than on your own Pentium III.
  • you no longer need to set up a ‘similar’ server to test your software, it will run on the same kind of system, behind the same combination of routers and firewalls, with the same libraries installed.
  • you can add breakpoints, see the console output, view values of variables, …

So take Sourceforge, drop in a Wiki system for writing the code, a system for online debugging and profiling and tada: life has just become so much easier for a programmer.

All remarks are welcome!

Technorati: