Pages: 1 2 3 4 5 6 7 8 9 10 11 ... 26 >>
07/02/10
Links for February 7th
- adaptive path » blog » Peter Merholz » Analytics – The Usability Lab of the new decade - If you're not using analytics for usability studies, why not? Also contains links to a number of other useful tools.
- Ludamix : Flash 10 versus JS/HTML5: The Tour Guide - A good comparison of the current and likely future capabilities of Flash and HTML5.
- Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs - Cherrysave - Some cross browser strategies for achieving in CSS effects which are commonly implemented with images.
- W3C RDFa Working Group - "W3C launched today the RDFa Working Group, whose mission is to support the use of RDFa, a format for embedding structured data in Web documents. The Working Group's goals include making it easier to author RDFa, promoting continued adoption of the technology in HTML, XHTML, and XML, and helping developers create RDFa applications."
- Multiple Backgrounds and CSS Gradients - Snook.ca - "Multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting."
- Answering Baranovskiy’s JavaScript quiz | NCZOnline - An interesting tour round some obscure JS features inspired by Dmitry Baranovskiy's blog post.
31/01/10
Links for January 31st
- Ian Pouncey » Blog Archive » Web accessibility myths - "[A]ccessibility isn’t a target to aim for, it is a goal to aspire to."
- ginger's thoughts » Tutorial on HTML5 open video at LCA 2010 - Links to a walk through for creating Ogg Theora encoded video for HTML5 embedding.
- Theora.org :: Cortado - Theora, video for everyone - Java applet player for Ogg Theora encoded video, suitable for use as a fallback option inside an HTML5 video element.
- Safari and Transparent Borders - Snook.ca - Some strange bugs in WebKit's handling of RGBa border colours.
- The Paciello Group Blog » High Contrast Proof CSS Sprites - Using CSS Sprites as background images is a popular technique, but it can cause accessibility issues in high contrast modes which don't display background images by default.
- A List Apart: Articles: Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I - An introduction to SVG, a look at browser and screen reader support.
- A List Apart: Articles: Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II - Some tools and practical techniques for making use of SVG in your website designs today.
24/01/10
Links for January 24th
- jQuery SVG Demo - A jQuery plugin that lets you interact with an SVG canvas.
- assertTrue( ): Fast conversion of bitmaps to SVG - Convert a bitmap image to a collection of vector rectangles (with full source code).
- Well, I'm Back: Video, Freedom And Mozilla - A blog post laying out the reasons behind the Firefox policy on patent encumbered H.264 and the HTML5 video element - admirable sentiments, but will it just end up costing them market share?
- SecurePage - SecurePage encrypts an HTML page and adds a JavaScript wrapper, making a new page that can be decrypted by any web browser given the correct passphrase.
- SVG to OPF to Raphaeljs - Utility to convert SVG documents to a Javascript suitable for use in Raphaël JavaScript Vector Library.
- Rocket Surgery Made Easy - Resources and downloads for "The Do-It-Yourself Guide to Finding and Fixing Usability Problems" book.
- Perfection kills » Optimizing HTML - Significant gains can be made by removing unnecessary markup cruft, much of it the cargo-cult style legacy of supporting ancient browsers.
19/01/10
Categories: Front End Web Development, Standards, HTML and CSS
London Web Standards: Web Fonts with Ben Weiner
Review: LWS January: Web Fonts with Ben Weiner at The Square Pig, 30 - 32 Procter Street, Holborn, London, WC1V 6NX 19:00 to 20:30
I've been experimenting a bit with @font-face recently so I was intrigued when I heard about this talk. It was booked out within hours of announcement but fortunately (for me) a few folk couldn't make it and the people on the waiting list got to attend.
Jeff has already done a 'live blog' of the talk, and there's a full transcript on Ben's site, so I'll just give a brief and slightly out of order outline and concentrate on the bits I found interesting.
Ben is a typography geek who got into web design so he had a good understanding of both the typographical world and the history of web fonts. This he discussed for the first third of the talk - explaining what a font is, why font design is difficult, why typography is important and why, more than twelve years after Microsoft first brought web fonts into the world with IE4 and EOT, we might finally have a chance at a solution that works for users, designers and the font foundries. One of the interesting aspects he discussed here was ligatures - where two letters, when placed consecutively, are melded into a single symbol. This happens in English fonts for things like 'ff' and 'fi', although the individual letter shapes remain, but the effect is even more marked in Arabic scripts where the combined character looks significantly different to the two (or more) which it represents. Having to deal with all this sort of stuff is why font design is so difficult, why even the 'open source' fonts have mostly been paid for (one way or another) and why font foundries have been generally paranoid about the possibility of all their hard work being stolen as soon as it's uploaded on to the internet.
Although most of the excited noises about web fonts are coming from designers, there are a few reasons why they're important. Firstly, while the font support for English and other languages based on the Roman alphabet is good, there are others where it's not so good and some (relatively popular) languages which have no font support at all in most operating systems (Telugu, a language of the Indian subcontinent, has 74 million speakers but no support in Windows). In this situation many sites have resorted to delivering their textual content as images. Delivering textual content as images is also an issue for accessibility as many designers, desperate to use their fonts of choice, resort to image replacement techniques which, if done badly, can result in poor accessibility.
This leads neatly in to Ben's discussion of the various hacks people have used because of the lack of working, cross browser web fonts. In order from the stupidest to the cleverist:
- Image replacement - Basically, write your text in Photoshop and save it as an image, then put it in your page. An accessibility nightmare, particularly if the designer 'forgets' to provide the
altcontent. - Fahrner image replacement - In this technique the normal text is left in the HTML and the 'rendered' font is put in a background image. CSS is then used to move the normal text out of the viewport, leaving only the background image. Less stupid than straight image replacement, but still not perfect - no support for text resizing and you have to generate all your images in advance.
- sIFR - Moving on to the clever hacks, sIFR works by embedding your font into a Flash movie then using Javascript to replace the headings dynamically. This was the first hack to be CMS-friendly - the text to be displayed is a run time parameter, but it introduced the additional requirements of JS and Flash.
- Cufón - Getting to the first of the really clever hacks, Cufón uses a generator to convert your font into a set of JSON encoded outlines and then uses
canvasto render it in the page. - Typeface.js - The cleverest of all, by making use of a server side component with access to the Freetype library, and then applying according to your existing CSS.
While these libraries get the job done, they do have a number of drawbacks - sIFR's use of Flash, Cufón's requirement to specify your fonts outside of CSS, the way it splits the words up into separate elements for each letter, and the general dependence on Javascript. They also have some drawbacks on the typography front, particularly to do with ligatures and letters that change shapes in different contexts - Ben showed us a number of example slides which you can check out on his site. Also, none of the use 'real fonts' - the same things that any other application would recognise as a font file.
We moved on to web fonts and the @font-face rule. Here is what it looks like:
You can then reference your downloaded font like this:@font-face { font-family: 'CantarellRegular'; src: url('Cantarell-Regular.eot'); src: local('Cantarell Regular'), url('Cantarell-Regular.ttf') format('truetype'); }
p { font-family: "CantarellRegular";}
All relatively straightforward, this will work in recent versions of all the major browsers - a standards compliant way to render actual fonts of your own choosing, with no need for any scripting or third party plugins, taking full advantage of typesetting capabilities already available within browsers and operating systems. Of course it's not quite that straightforward, there is some server side setup to consider, and then the ideological and technical hurdles that still need to be overcome before this all becomes practical for mainstream sites.
To deal with the idealogical problem first - font foundries are still not playing ball. This is a problem because, unlike music, a font is software rather than data and gets the same protections, also, as should be clear from some of the difficulties described above, good font design is difficult and so professional designers realise it is worth paying for a good font. So, even though the technology and standards are now getting in to place, font foundries are still unwilling to license 'desktop' fonts for distribution with websites.
And it's not like there are no practical problems. First you've got to consider what adding a few fonts to the mix is going to do to your bandwidth requirements. Regular desktop fonts, with just normal, bold, italic and bold/italic options, exceed 100k in size, especially if they include a full unicode character set. A font from a foundry, which is likely to have many more variations (extra heavy, expanded, smallcaps etc.) can be up to 1Gb in size. This gives you another thing to think about - what will the user see while waiting for the font to download? In Firefox they'll see the page rendered in whatever the default font is - this is likely to have a different geometry to the font you're delivering, so the page will have to be reflowed when the font arrives. This causes usability difficulties as elements users have started interacting with suddenly move around. In Safari the user will see nothing until the entire font is downloaded, making it impractical to use a large font for body text. This is the flash of unstyled text problem. You might be able to subset the font to reduce download times, but then you need a font with a permissive license, which leaves you back at the idealogical roadblock outlined above. You might have the idea of a single repository for web fonts to increase the chance users already have the font you want to use, similar to Google's Ajax library (and you wouldn't be the first), or even just to share a font across multiple domains in a portfolio. In this case you've got to set up Cross-Origin Resource Sharing for Firefox.
Although @font-face itself has wide support there are some differences in the details when it comes to defining families of fonts. Firefox seems to do pretty well and Safari/Chrome behave similarly, there are some issues that crop up in Opera and Konqueror, but most of the problems occur in IE. Here is how you declare a font family according to the spec:
Each different weight and style has it's own definition and associated font file - multiple font files can be listed and the browser should pick the first format it can handle. However, of the above, this is all IE understands:@font-face { font-family: "DejaVu Serif"; src: url("/fonts/DejaVuSerif.ttf") format("TrueType"); font-weight: 400; font-style: normal; } @font-face { font-family: "DejaVu Serif"; src: url("/fonts/DejaVuSerif-Italic.ttf") format("TrueType"); font-weight: 400; font-style: italic; } @font-face { font-family: "DejaVu Serif"; src: url("/fonts/DejaVuSerif-Bold.ttf") format("TrueType"); font-weight: 700; font-style: normal; } @font-face { font-family: "DejaVu Serif"; src: url("/fonts/DejaVuSerif-BoldItalic.ttf") format("TrueType"); font-weight: 700; font-style: italic; }
@font-face { font-family: "DejaVu Serif"; src: url("/fonts/DejaVuSerif.ttf"); } @font-face { font-family: "DejaVu Serif"; src: url("/fonts/DejaVuSerif-Italic.ttf"); } @font-face { font-family: "DejaVu Serif"; src: url("/fonts/DejaVuSerif-Bold.ttf"); } @font-face { font-family: "DejaVu Serif"; src: url("/fonts/DejaVuSerif-BoldItalic.ttf"); }
Internet Explorer ignores all the font-weight and font-style rules so essentially all that happens (leaving aside the issue of file format) is that DejaVu Serif gets redefined repeatedly. A common work around is to define each font style explicitly in it's own font family, but this is hardly ideal.
In the final part of his talk Ben moved on to WOFF (Web Open Font Format) - the new standard which could finally get the font foundries behind web fonts. It was initially worked on by Erik van Blokland and Tel Leming, two guys well respected in the world of type, then worked on by Jonathan Kew and John Daggett of Mozilla, two guys with a lot of respect in the web browser world - so it was able to gain a lot of traction in both areas very quickly. So the future looks good, in the meantime there are a number of startups and other websites looking to exploit the demand for web fonts in TTF and EOT format:
This was a very useful talk on what is a hot topic in the web design world right now, I was particularly interested to learn about some of the history behind web fonts and some of the issues surrounding support of non latin languages, so out of 5.
17/01/10
Links for January 17th
- CSS background transparency without affecting child elements, through RGBa and filters - Robert's talk - Cross browser alpha transparent background colours thanks to the gradient filter.
- brianleroux's xui at master - GitHub - XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera.
- tobeytailor's gordon at master - GitHub - An open source Flash runtime implemented entirely in Javascript.
- Banner, A.: The Calculus Lifesaver: All the Tools You Need to Excel at Calculus. - For many students, calculus can be the most mystifying and frustrating course they will ever take. The Calculus Lifesaver provides students with the essential tools they need not only to learn calculus, but to excel at it.
- Perfection kills » Understanding delete - A look at an apparently simple bit of Javascript syntax which ends up getting quite deep into the language internals.
10/01/10
Links for January 10th
- xarino - Project Hosting on Google Code - An attempt to revive vector based graphics program, Xara LX, as an open source project.
- Welcome to FOSS Factory - The only website where the community collaborates on every aspect of free/open source software production, including design, funding and development. Our mission is to help accelerate the advancement of free/open source software.
- Microsoft Web Platform - The SEO Toolkit helps you improve your Website’s relevance in search results by recommending how to make your new or existing site content and structure more search engine-friendly. It works on any Website on the Web.
03/01/10
Links for January 3rd
- Html Agility Pack - A .NET code library that allows you to parse "out of the web" HTML files. The parser is very tolerant with "real world" malformed HTML.
- Font Squirrel | Create Your Own @font-face Kits - Generates EOT, SVG and WOFF versions of TTF and OTF fonts.
- iPhone caching / Stoyan's phpied.com - A detailed examination of the iPhone's idiosyncrasies when it comes to browser cache management, plus a work-around using HTML5 offline apps manifest files.
- Bulletproof @font-face syntax « Paul Irish - How to write your CSS so font-face embedding works reliably cross-browser, with example code and full explanation.
- 10 Great Free Fonts for @font-face embedding - Previews of ten nice fonts - if your browser supports font-face.
- ttf2eot on the web! - Use this tool to convert a TrueType (TTF) font file into an OpenType (EOT) font file, for use with Internet Explorer's embedded font support.
- IntegrationWithWebsite - web-optimizator - Integration with website - Project Hosting on Google Code - Although it's part of the documentation for web-optimizator, this page has a very useful and generic list of ExpiresByType examples to put into your .htaccess file, including the lines needed for web fonts.
- Karma Tutorial Part II: Comparing HTML 5 Canvas and SVG « The Karma Project: Code Less, Teach More - Canvas and SVG appear to be similar technologies (with similar browser support) but they have different strengths and weaknesses.
- An SVG Primer - A readable introduction to the SVG graphics format.
- ideone.com - An online tool for you to test out code samples for a wide variety of languages.
- Chromium Blog: Web Sockets Now Available In Google Chrome - Chromium implements the HTML5 WebSocket API.
- pywebsocket - Project Hosting on Google Code - Server side implementation of the HTML5 WebSocket protocol.
- Node.JS and the WebSocket protocol « Devthought - Another server side implementation of the HTML5 WebSocket protocol.
- Brevity - An operating system similar in concept to Chrome OS, the user interface is implemented using HTML5 technologies.
- A List Apart: Articles: The Survey, 2009 - I took it and so should you - the survey for people who make websites, 2009.
25/12/09
Categories: Front End Web Development, Standards, HTML and CSS
An Early Xmas Present - Opera 10.50 Pre-alpha
Opera gave web developers an early Xmas present this week when they released a 'pre-alpha' of Opera 10.5 for Windows and MacOS. The main new features are a new Javascript engine, Carakan, and a new vector graphics backend, Vega, for their Presto 2.5 rendering engine. With these in place Opera catches up with Gecko and WebKit in its support for, among other things, border-radius and CSS Transitions - which I covered in my first CSS3 post back in July. With that in mind I thought it would be worth updating my earlier examples with the Opera syntax to see how things looked.
Opera 10.50 uses the (soon to be) standard border-radius instead of a vendor specific property:
#mybox { border: 2px solid #666; overflow: hidden; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
After changing all the examples, my first border test page looked like this:
The bad news is Opera has the same problem as Firefox in that it doesn't clip the contents of an element you've rounded the corners on, so you can end up with square corners sticking out through the rounded ones. It also treats the corners where only one side is 'thick and rounded' badly, similar bot not quite the same as Safari:

So our third implementation of border-radius manages to be subtly different from both existing implementations, though we can hope they all converge with time (this is pre-alpha, after all). I moved on to my borders and tables example page to have a look at how Opera handles box-shadow. Again, Opera implements the standard property, so it would have worked without any effort on my part if I'd just bothered to add the standard code in the first place
Here's a simple drop shadow on a table:
#table { margin-top: 1em; background-color: #ccc; border: 2px solid #666; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow: 3px 3px 5px black, 3px 3px 5px black; -webkit-box-shadow: 3px 3px 5px black, 3px 3px 5px black; box-shadow: 3px 3px 5px black, 3px 3px 5px black; }
Opera looks much the same as Firefox and Safari/Chromium:

Putting the box-shadow on the table cells also worked well, even with border-radius applied:

It also respects the infix value, like Firefox. Where it didn't look so good was if box-shadow was applied on :hover, it seems like it won't draw the drop shadow in any place outside of the original bounds of the element when the effect is applied dynamically:

Finally, CSS Transformations. Opera 10.50 has similar support to WebKit, though this time through vendor specific properties, allowing both for transformations and animations. This code, in Opera and Chromium/Safari, will spin the mybox div through ninety degrees over the course of a second when you mouse over it(in Firefox, it will flip straight away):
#mybox { border-top: 40px solid #666; border-bottom: 40px solid #666; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -webkit-transition-duration: 1s; -o-transition-duration: 1s; } #mybox:hover { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transition-duration: 1s; -o-transition-duration: 1s; }
Have a look at my transformation examples if you're interested.
Overall I think this is very promising for such an early release, although I didn't do much browsing on the internet I didn't see any crashes while testing my examples above. Hopefully the glitches will be worked on as 10.50 matures and we'll have yet another browser in which we can play fancy CSS3 tricks.
22/12/09
FizzBuzz in CSS3
I was reading Rachel Andrew's 24 ways post on Cleaner Code with CSS3 Selectors today, in which she covered nth-child selectors, and I was reminded of the FizzBuzz phenomenon which swept through Programming Reddit a couple of years ago. I thought it would be relatively easy to implement a CSS solution to the problem based on the nth-child selectors and generated content.
First I tried a quick test based on an ordered list and Rachel's example code for the table:
ol:nth-child(3n) li:after { content: "Fizz"; }
Using the advanced technique of copy and paste I quickly produced an ol element with 100 li's in it and observed the results. It wasn't quite a spectacular failure, but no Fizz appeared. A little reflection and I think I've figured out what I was doing wrong - the li is already the nth-child of ol and there are no further li child elements, so the rule doesn't match anything. After a bit of fiddling around I came up with two alternatives, cut out the li altogether:
ol :nth-child(3n):after { content: "Fizz"; }
Or use nth-of-type directly on li instead of nth-child:
ol li:nth-of-type(3n):after { content: "Fizz"; }
Then I realised that the ordered list was probably a mistake - I ought to be printing the number when none of Fizz, Buzz or FizzBuzz applies. My initial thinking was that having the number built into the markup would make it easier, but now I realised I'd have to both remove the default numbers and then insert new numbers in. So I switched to a table with 100 rows in it and started reading up on counters and numbering. This seems to work almost like a programming language, first you declare your variable on the root element:
table { counter-reset: number; }
Then you stick it in a loop:
tr td:before { counter-increment: number; content: counter(number); }
So now I have a table which counts up to 100, I override the generated content for each third and fifth child:
tr:nth-child(3n) td:before { content: "Fizz"; } tr:nth-child(5n) td:before { content: "Buzz"; }
Finally specify the content for elements which are both a third and a fifth child:
tr:nth-child(3n):nth-child(5n) td:before { content: "FizzBuzz"; }
And, ta-da, FizzBuzz implemented in CSS (with the slightly unusual input requirement of a 100 row HTML table).
20/12/09
Links for December 20th
- WCAG Tutorial - While WCAG is widely used, it is not easy to find comprehensive tutorials on it. This tutorial is intended to fill this gap, and provide a useful tool for web designers, developers and testers.
- Developing a Web Accessibility Business Case for Your Organization: Overview - This page is the first of five web pages covering the social, technical, financial, and legal and policy factors in the business case for Web accessibility. Each page presents different aspects of Web accessibility along with guidance on developing a customized business case.
- NextStop, Upcoming Mobile Web Apps Skip iTunes Store - Go Straight to Awesome - Is the future all about mobile web apps or will most app development continue to be for native mobile apps, now that there are some compelling and widely used mobile app platforms?
- EffectGames.com - Effect Games provides free, online tools for building, sharing and playing your own browser based games.
- The Render Engine - Javascript Game Engine - The Render Engine is a cross-browser, open source game engine written entirely in Javascript.
- Writing a blog system on App Engine - Nick's Blog - A series of blog posts comprising a tutorial for creating a blog on GAE.
- hResume API | Madgex Lab - Automatically convert a CV marked up with hResume to Word or PDF.
- Detecting if images are disabled. (CSS On / Images Off scenario) » Cory's Cogitations - A JS function to detect if images are disabled in the browser.
13/12/09
Links for December 13th
- Developer Qualification - Google Code - Designed for professionals who currently develop or want to develop applications that use Google APIs, the Google Qualified Developer program can help you become a more successful developer for free.
- PHP Simple HTML DOM Parser | Get PHP Simple HTML DOM Parser at SourceForge.net - PHP5 HTML parsing library.
- css gradients in Firefox 3.6 at hacks.mozilla.org - Several examples of CSS3 gradients using the new syntax.
- Document - Gradient Syntax Proposal - Revised syntax for CSS3 gradients.



