Jetstrap - The Bootstrap Interface Builder. Maybe check it out - with this you can design Bootstrap sites in their structure without having to fiddle with the CSS yourself. The output can then be used as a basis for your own website. Looks quite nice.
html
Toolbox, H5 and twentytenfive are Wordpress templates that are based on HTML5. I should take a look at them and see if I can't build my own theme on one of them, instead of deriving it from the standard theme. Since I am currently a subtheme of the standard Twentyten, Twentytenfive might be the easiest - but Toolbox could also be interesting because it is a really minimal theme that I could use as a real base.
Chromium Blog: HTML Video Codec Support in Chrome. Wow. Google is removing H.264 from Chrome's video support and fully switching to Theora and WebM.
Oxymoron CSS Framework - I can really understand Zed. CSS drives me crazy occasionally too.
Elixirgraphics - and here you'll find nice themes for RapidWeaver. I particularly like Lime, Factory, and Nimbus. Sprout is also quite nice. And yes, I know, no free themes - but hey, good design is a lot of work.
seyDesign Professional RapidWeaver themes - even more RapidWeaver themes and a few open source versions - with these I could also take a closer look at the innards of such a theme.
YourHead Software - I'm still considering whether to get their plugins for RapidWeaver. I managed to get RapidWeaver quite cheaply from the last MacHeist and the first experiments are really nice. And all the YourHead plugins are based on JavaScript instead of Flash, which could be good for static websites. Additionally, their internal data format is simply folders full of XML files, so you could also do something with tools.
Futurebox, lightbox without the JavaScript - I need to check this out, it could be quite fun in my blog. Even if, of course, various browsers without CSS3 support can't do anything with it. So what?
Perfect multi-column CSS liquid layouts - iPhone compatible - wow. This looks very promising, especially the point "no browser hacks".
The Floating Boxes CSS Layout - by the same author as the previous layouts. Also very interesting.
Why your internet experience is slow - "If content is king, why is there so little of it on the web? And why are content providers like Salon always whining about their huge bandwidth costs, given that 99% of what they ship — and that is an exact measurement, not hyperbole — is spam?"
Dean Edwards: IE7.js version 2.0 (beta) - new version of the brilliant JavaScript library that turns IE into a somewhat compliant browser.
Reset Reloaded - an interesting approach to the CSS default differences of various browsers: simply reset everything cleanly, so that stylesheets can start on a common basis.
Faster Page Loads With Image Concatenation - interesting idea, combine small images and show only sections via CSS. Dramatically reduces image requests.
QuirksMode - for all your browser quirks - Collection of information about browser differences and ways to circumvent them.
HTML5, XHTML2, and the Future of the Web - will naturally be ignored by all the XML proponents again. But it remains a fact: the future of the web will be dominated by HTML for a long time, not by XHTML. And no, delivering broken XHTML with incorrect headers is not a solution, but a problem ...
Why you should be using HTML 4.01 instead of XHTML - more on XHTML vs. HTML
WebSnapr - Thumbnail images for links. Interesting concept.
Understanding HTML, XML and XHTML - HTML is probably what you want. Written by someone who knows what they're talking about: one of the programmers of Safari. I don't know how many times I've had to listen to the nonsense about "XHTML is the better HTML". If you don't explicitly want to use the advantages of XHTML - e.g. embedding other XML dialects - you should simply take HTML.
The "Triple-X" hack - an exclusive CSS filter for IE7 - CSS hacks for IE7. You'll definitely need this later ...
Colorblind Web Page Filter - a filter with which you can check websites for compatibility with various forms of color blindness.
Open Source Web Design - a bunch of web designs to download and use. Ideal for design losers like me
Migrate apps from Internet Explorer to Mozilla - interesting article that covers a series of pitfalls when switching between IE and Mozilla.
CSS Fisheye - CSS magnifying glass effect in a text block.
Fiddling with iWeb
If a software generates such HTML code, then it is definitely crap. And I don't particularly care if it comes from Apple. This is an absolute low blow to everyone who deals with semantic markup and everyone who deals with accessibility. Similar to the PhotoCasting debacle, Apple once again shows that they unfortunately tend to be "outside nice, inside crap" every now and then.
And quite honestly - not only is the code a catastrophe, but also the generated URLs - has anyone at Apple ever heard of human-friendly URLs? Oh, what am I asking, they don't even know RSS Enclosures ...
More about iWeb's HTML can be read at Todd Dominey.
Introducing Sandvox | Karelia Software - A web editor that, for a change, supports not only WYSIWYG editing but also standard compliance, accessibility, and even uploads via SFTP. Sounds like someone did their homework.
Web Developer Extension - blogged about a thousand times, but only here as a reminder: the new Webdeveloper-Toolbar for FireFox 1.5. Essential for every web developer.
Webstemmer - HTML-Grabber that extracts the actual core text from websites based on the layout.
CSS2/DOM - Styling an input type="file" - wild hacks to style file upload buttons with CSS or JavaScript.
Weblogs - Variation on the previous link, here JavaScript and CSS together.
And we all make the same mistakes again
There is currently a lot of activity in the area of Microformats - the idea behind it: to store information blocks not in XML, but in predefined HTML. CSS classes are then used to define what a single format is. Logically, there are problems with colliding styles - what a surprise. I myself am always amazed at how much energy developers can spend on stupid ideas.
We once had HTML that not only dealt with semantics but also with layout. And that produced the all-time favorite FONT-TAG orgies on HTML pages. Over time, most people have come to the realization that separating semantics and layout makes sense - semantics as a basis for marking up content, layout in the CSS files, and as a connection between these, the IDs and classes on tags. Additionally, with DIV and SPAN "anonymous" tags without predefined semantics (except "this is a block of text" and "this is an inline stretch of text" - where this meaning can be easily overloaded), for things that don't work with the normal semantic markup (which is mainly due to the rather stupid idea of HTML that there are markings for headings, but no markings for sections of text to which these headings would belong).
What do Microformats do now? Well, the same stupid idea of misusing something - namely in this case the connecting pieces between semantics and layout mentioned above. Microformats give these a meaning - for example, a DIV with a class 'description' would then be the description of a review - read the details in the hReview reference. Sorry, but this must inevitably lead to conflicts - have the idiots never heard of namespaces? The Microformats explicitly address XHTML - and that has exactly the purpose of embedding namespaces. And if you think you have to implement such a stupid idea - couldn't you at least be smart enough to give the parts more cryptic but unambiguous classes?
As I said, it's amazing how much energy goes into such stupid ideas that are doomed to create more problems than solutions.
IE7 and its impact on CSS Hacks
IE7 and the demise of CSS hacks is about the IE CSS hacks that have been loved over time and are urgently needed for IE6 to make CSS layouts at least presentable on the IEs. With IE7, a lot will change - and some of them will no longer work.
Urgent recommendation: Switch to conditional comments and move the CSS corrections to a separate stylesheet that can then be loaded for the IE. Unfortunately, with this you can only add CSS elements for the IE, not hide non-existent elements from the IE - possibly you can do something with overwriting elements.
In the IE Blog is a list of hacks that will be problematic with IE 7.
When Web Designer is a Bad Word
For example, with companies that rant against ALT attributes on IMG tags and then incorrectly refer to them as ALT tags. Well, incompetence is their concept:
Just exactly what text can a person read or see in a 1 x 1 pixel gif? Zippo. Thus, the text or line reader, JAWS, cynthia, etc, should be smart enough to see that the image size of Height="1" and Width="1" and automatically know it's a spacer and then make a if-then condition to NOT PRONOUNCE alt tag in the spacer.gif.
I have edited quite a few table layouts myself - among other things because they were simply there - and I can't remember when the spacers were actually output in 1x1 pixels. Of course, the image itself was only 1x1 pixels in size, but the width and height attributes on the IMG tags were naturally according to the size that was to be spanned. In addition, there were a lot of other layout elements in the source that were candidates for ALT="" - for good reason, layout graphics should be correctly bypassed by screen readers. But according to their idea, the screen reader should first load the graphic element, which is completely useless for it, and look at how big it is. Just because the trolls are too lazy to write ALT="" on IMG tags.
Oh, and they also demand more intelligence from screen readers:
HERE IS SIMPLE SOLUTION so EVERYONE WILL NOT HAVE TO RE-WRITE THEIR PAGES just for you.
READ THE BIG TEXT FIRST, either font tags with say 3 to 7, or CSS styles with the biggest fonts sizes. Next, read the 2nd largest fonts second, and so on. This is JUST LIKE WHAT HUMAN WOULD DO ANYWAY.....So, look for Font tags with a setting 7 or 6 or 5 or 4 and down and in that order and then start reading it. Same with CSS, PIXELS sizes of say 24px should be read FIRST, NOT LAST!! How hard can this be? This what the browsers do anyway, so why can't you do it?
Exactly. The screen readers should just figure out what they need from the tag soup (including analyzing font tags and such junk), instead of the designer thinking about what he produces and providing a somewhat logical structure for text-only browsers. Hey, what are the h-tags and their friends for since HTML 1? Oh well, it's probably all just imagination ...
But you can find even more gems there, such as the discussion about CSS vs. Table Layouts, where CSS is of course made to look really bad. Because they just don't understand what CSS is all about and why you separate HTML and CSS and what's the good idea about it. Because they probably haven't had a single good idea in their entire sad designer life and therefore wouldn't even recognize a good idea if it hit them on the head with a big stick.
Oh yes, a word of warning to more current designers at the end: don't look at their source code, because it will give you hair loss, curled toenails, and rotten teeth.
LiveSearch with WordPress works
I just took a look at LiveSearch and played around with it a bit. It can be integrated into WordPress with some hacking. If you now enter a term in the search form on the right, a list of search results will appear after a short delay - specifically the titles of the posts. This uses the normal WordPress search, so these are the same results you would get if you simply pressed Enter - just faster thanks to Ajax and as a direct inline list. Fun stuff. Should work with current IEs, Mozilla derivatives, and current Safaris.
However, strangely enough, the cursor keys for moving through the search results don't work for me, even though the code seems identical to the BitFlux page. Somehow it doesn't find the first line or something - very strange. But that part doesn't really interest me, so it doesn't bother me if it doesn't work.
Hmm. Safari works flawlessly, but my Firefox under OS X doesn't seem to work. Very strange. To be precise, it works with Firefox only after I delete a character with Backspace or press Space once. After that, it runs smoothly. Can someone explain this to me? Strangely enough, the cursor key navigation in the search results works with Firefox - if you have a list of results...
Update: strangely enough, the cursor key navigation now works in Safari. Something here is very strange ...
Safari and the Rabenhorst
Does anyone know why Safari on Tiger is saying goodbye to Rabenhorst? And if someone knows, can they tell Kai so he can fix it and I don't have to rewrite an article every time because I wanted to check something with him again?
The strange thing: when I turn off JavaScript with PithHelmet on his site, nothing happens. But his site has no JavaScript - only the Jabber status (which, by the way, is displayed extremely large without JavaScript activation) is embedded via an OBJECT tag instead of an img tag. Could it be the OBJECT tag for PNGs that sends Safari to the Orkus?
Ah, yes, after a bit of digging, it seems to be the case. Go to this page and you will have the same problem - Safari crashes. Apparently, the OBJECT tag is used to display PNGs on older IEs as well - the same PNG is referenced via an OBJECT tag and an included IMG tag. Unfortunately, this leads to crashes with Safari 2.0.
Why disabling JavaScript (not disabling plugins, which one would rather suspect with the OBJECT tag!) leads to Safari not crashing and the PNG being displayed incorrectly (too large), I honestly don't quite understand ...
Oh, and the bug with object tags seems to have existed for a long time - the oldest reports I found in Google are from 2003. It would be nice if Apple would actually fix the bug. Or someone else, since the source is now available.
By the way, OmniWeb - although it also relies on the WebCore framework - does not have this problem. It would have been too easy ...
Update: the culprit has been found. It was the WebDevAdditions for Safari - I simply installed the current b11 and everything works normally again.
Firefox gets SVG support - finally a first independent SVG implementation and above all a broad platform for this format.
/IE7/ is a project that teaches IE6 CSS properly using a JavaScript library. This should also make :before and :after work in combination with content: - not entirely unimportant for HTML-free rounded corners or HTML-free link identification through symbols ...
Simulation of :before with content: in IE6
The IE6 just can't handle :before when you want to insert content into the page via content: in the CSS. Quite annoying if you use it. The IE7 project that I wrote about in the previous article doesn't work reliably for me either - for example, under a Citrix server it won't execute it, probably because some security settings are missing there. Strange. Anyway, I looked at the problem myself and found a fairly compact solution, at least for my specific version of the problem: I just want to place icons before a link.
For this, links have one of three classes or no class: class="zu" defines a collapsed navigation element, class="auf" an expanded one, class="ohne" a link that should not be specially beautified, and all other links get a standard icon.
For this, I simply attach the following code at the bottom of the file just before the /body:
var links = document.getElementsByTagName("a");
for (var i=0; i
I then wrap the whole thing in a conditional comment for IE so that it is only executed by this. That's it. Simple and effective. Disabled JavaScript is not critical in my case, as without JavaScript on the system (it's a business solution with high interactivity) nothing will run anyway in the future - Ajax needs JavaScript as a component ...
Html Validator for Firefox and Mozilla - wow. Great extension: it directly validates the displayed webpage and integrates into the source view for debugging errors. Very nice - and has been featured in several weblogs in recent days (I don't remember where I first saw it).
TidBITS: What You Get Is What You CSS, With Style Master 4.0 - sounds very interesting, a program with which you can edit CSS files and display them directly in connection with various websites. I must take a look at it, because manually tweaking CSS files and experimenting with them can sometimes be quite annoying. Being able to prepare something offline would be quite nice. Update: sorry, but after a first test, the thing has been kicked off the plate. Good idea, slow and unintuitive implementation.
Found at photomatt: Nifty Corners are rounded corners that do without images. Optionally directly with HTML and some CSS or CSS and some JavaScript, which rewrites the DOM tree accordingly.
The Man in Blue > Experiments > widgEditor is a WYSIWYG editor for HTML that replaces textareas in the browser and is written in JavaScript. It has an integrated fallback to normal textareas, so that browsers without JavaScript can still work with normal text. And it produces clean XHTML. And: it actually works properly for me.
Image cropping with DHTML and PHP behind it. Could be quite practical in a photo plugin.
And for those who don't like or can't use Lisp, perhaps SAJAX - Simple Ajax Toolkit by ModernMethod - XMLHTTPRequest Toolkit for PHP can help, which supports not only PHP but also Io, Lua, Perl, Python, and Ruby.
Usable XMLHttpRequest in Practice is an interesting little article that explains the use of XMLHttpRequest using an example and discusses usability aspects.
Skidoo Too: Ruthsarian Layouts
Skidoo Too : Ruthsarian Layouts is a rather simple 3-column layout with a flexible middle column. The special feature: the order of the source is such that the middle column comes first. This improves usability for Lynx users because they can immediately access the content and do not have to skip the navigation first. The layout is Public Domain.
He also has another layout on the page that has two flexible columns and only specifies the left column as fixed, same source order.
Introducing sIFR: The Healthy Alternative to Browser Text
Introducing sIFR: The Healthy Alternative to Browser Text describes a method based on JavaScript, CSS, and Flash to free text styling from the limitations of CSS and use any fonts.
The technique works similarly to CSS image replacements, except that the replaced text can grow with the page (e.g., if the user has set a larger base font). If a visitor has Flash and JavaScript available, correspondingly marked text areas are replaced by a Flash rendering.
If the visitor has no Flash or JavaScript is disabled, they will see normal text content via the browser's capabilities. Accessibility is thus largely preserved - the HTML remains semantic, and screen readers for text browsers as well as semantically controlled HTML readers should have no problem with it. Visually impaired users with large fonts can also benefit - for example, by disabling Flash, the user's chosen font size will be selected.
It is definitely better than CSS image replacement for headers, as it can adapt to the dynamic environment much better. Image replacements are not zoomed and do not support copying and pasting of content (which is also supported by Flash).