Pages: << 1 2 3 4 5 6 7 8 9 10 11 12 ... 32 >>
01/17/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.
01/10/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.
01/03/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.
12/25/09
, 553 words, 8482 views 
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.
12/22/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).
12/20/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.
12/13/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.
12/01/09
, 985 words, 15556 views Categories: Usability & Accessibility, Front End Web Development
YDN: More Accessible User Interfaces with ARIA
Review: More Accessible User Interfaces with ARIA at Skills Matter, 116-120 Goswell Road, London, England EC1V 7DP 18:30 to 20:00
I've long been meaning to take a closer look at WAI-ARIA, so last week's YDN talk at Skills Matter by YUI developer Todd Kloots seemed like an excellent opportunity to learn the basics. With them starting at half six, forcing me to travel halfway across London in the middle of rush hour, I often miss the start of Skills Matter events and this one was no exception - though this time the main problem was that they are now at new offices and I went to the old one first.
The talk was split into four parts, followed by some Q & A:
- How ARIA solves problems of perception
- How ARIA solves problems of context
- How ARIA solves problems of discoverability
- Tips and tricks for working with ARIA
How ARIA solves problems of perception
One of the problems faced by screen reader users is working out what a page element they come across is for and what state the element is in. A sighted user can look at a web page and easily see an area devoted to navigation and an area for main content, what things are toolbars and buttons and what state they're in (eg. bold mode in a text formatting toolbar).
How ARIA solves problems of context
HTML has only a limited palette of context setting elements - headings, lists and form grouping elements, such as h1 and fieldset can be used to indicate section breaks in your content. But if you wanted to indicate a tab control or a toolbar to assistive technology there's no standard markup to do that.
To address this ARIA has landmark roles, as we saw earlier, but it also allows you to indicate which sections of your page should be treated as a document and which should be treated as an application. In document mode, the screen reader responds to its own keyboard shortcuts for browsing, in application mode you can provide keyboard shortcuts for working with your widgets. ARIA also provides recommendations for keyboard shortcuts to use.
Todd discussed two ways of making sure your widget is keyboard accessible without drowning the user in choices. For example, if you have a toolbar widget you may not want the keyboard user to have to tab through every item on the toolbar every time they encounter it. It would be better if they could tab to select the toolbar but then tab again to skip over it if they didn't need any toolbar functions at this time. The two techniques are to use aria-activedescendent or to use a roaming tab index - set a tabindex of -1 on all the child elements of your widget and then adjust focus programmatically in response to key strokes. Todd has previously published a blog post which describes both focus management techniques in detail, he currently prefers the roaming tabindex approach because of its backwards compatibility (though watch out for the known focus event delegation issues).
How ARIA solves problems of discoverability
After you've created a keyboard accessible widget using ARIA roles and states you need to make sure users can actually discover your widget - all your good engineering work goes to waste if users never realise the functionality is there. This is where aria-live and aria-describedby are useful.
A live region allows text to be spoken to the user without that text gaining focus, thus losing the reader's place in the content. Depending on the nature of the message it can either be polite, assertive or rude - ranging from waiting until a pause or interrupting the user whatever they may be doing. An auto-complete list would be an ideal candidate for a live region - Todd demonstrated how live regions work on the Yahoo! Suggest feature on their search page.
The aria-describedby property allows you to link to a longer description of what your widget does, so you can inform the user, the first time they focus on your widget, of how to access the functionality of your widget as well as what to expect when they interact with it - again this was demonstrated in the suggest feature on Yahoo! search.
Tips and tricks for working with ARIA
The key tip if you're going to delve in ARIA is to install a screen reader and test things yourself! There are free ones for various platforms (eg. Windows and Linux). If you're unsure where to start, read this tutorial about setting up a test environment with NVDA and Firefox.
The second tip was more of a warning - ARIA gives developers a great deal of control over the end user experience, because it allows them to bypass the virtual buffer of the screenreader and talk directly to the user. This brings with it a risk - having all web browsing mediated by the screen reader made for a consistent user experience, now there's the potential for every site to be different leading to user confusion.
Q & A
There was an interesting question and answer session at the end. The first question was about the new semantic elements in HTML5 and whether screen readers were taking advantage of them yet - not so much, Todd felt that mush of ARIA is available today to far more users. Further questions brought up the frightening prospect of web developers having to take into account not just compatibility across various browsers but also a second dimension of cross screenreader compatibility and finally if any of the popular Javascript libraries had built in support for ARIA (YUI 3 has built in support).
http://skillsmatter.com/podcast/os-mobile-server/aria
All in all this was an excellent talk, out of 5. One of the most technically detailed talks I've attended at Skills Matter - far more stuff was discussed than I've managed to fit into this blog post. If you're interested I recommend you watch the video.
11/29/09
Links for November 29th
- dantebronto's picard at master - GitHub - A Micro-framework for node.js.
- Add-on Developer Hub :: Add-ons for Firefox - Documentation, tools and forums for Add-on developers.
- The Complete Guide to Google Wave: How to Use Google Wave - The Complete Guide to Google Wave is a collaborative user manual for Google Wave written and edited by Gina Trapani with Adam Pash, this guide's contents will be written, rewritten, and refined in public on completewaveguide.com, as Google Wave changes and improves and rolls out to more users.
- Ski Free - The classic Ski Free game impelmented in Javascript with the Canvas element.
- node.js - An event driven, server side web app development framework using the V8 Javascript engine from Chromium.
- Node.js is genuinely exciting - The advantages of Node.js compared to other event driven web app frameworks such as Twisted and EventMachine.
11/22/09
Links for November 22nd
- Hacker News | Some Sitepoint Article: How not to Critique a Javascript Library - Then again, perhaps Closure is pretty good code after all.
- Google Closure: How not to write JavaScript - Some reasons why the new library from Google might not be the best example of its type, many examples of 'writing Java in Javascript'.
- A Step-by-Step Guide to dynaTrace Ajax Edition - A tool which hooks into the lower levels of Internet Explorer and provides detailed analysis on the performance of you javascript, including time spent parsing and rendering.
11/15/09
Links for November 15th
- SPDY: An experimental protocol for a faster web - A proposal to replace HTTP featuring lower latency, built in compression and encryption and allowing the server to initiate requests.
- The Fedone Book | Waving The Shiny - How to install and configure your own Wave server.
- Accessibility of Rich Internet Applications - Presented at the 2009 Accessing Higher Ground Conference by Jared Smith.
- Computer Productivity: Why it is Important that Software Projects Fail - How computer automation enables increases in bureaucracy rather than improvements in efficiency.
- Cross-browser drop shadows using pure CSS — Nick Dunn - Supports even IE 6/7/8 but, unfortunately, not Opera.
- Status of RDF in Drupal (November 09) and wrap up of ISWC2009 | OpenSpring - Summary of the current status of efforts to add native RDF/RDFa support to the upcoming Drupal 7 release.
Buy my book!
Hello! HTML5 and CSS3 available nowBuy my other book!
Early access to HTML5 in Action available now
XML Feeds
Flair
