We’ve has come a long way from the web’s origins as hyperlinked text for scientist to share. We’ve collectively learned a lot about what makes the web so powerful and how to exploit it in that short time. We’ve also made mistakes, swinging off course to unhelpful design extremes, only to swing back and subsequently grow in our understanding as a result.
For example we escaped the pixel-perfect positioning print-media pretence phase [alteration apology] and now appear to be in a equally obsessive javascript rules, app-tastic, web as platform, native competitor frenzy. This time it’s being driven by developers rather than designers. And again the wide inclusive web community will no doubt auto-correct our collective course. The current discussion on the place of Progressive Enhancement (PE) with or without javascript and the what makes the web great, appears to be heralding the start of that process. I hope so.
One view of progressive Enhancement
Evidence of the energy in javascript frameworks can be seen in ToDoMVC which has assembled some 64 example frameworks/libraries with new ones coming regularly (and remember MV* is not the only pattern in town). As Allen Pike quipped
Studies show that a todo list is the most complex JavaScript app you can build before a newer, better framework is invented
This situation has led
Let’s stop the rat-race and concentrate on building working sturdy solutions
Of all those frameworks I wondered how many support Progressive Enhancement as a feature? I’ve recently explored several of the latest and greatest frameworks for a new project. These included Angular, Backbone, Ember, Meteor, Polymer, React, Riot, WinJS and I found they don’t. You might argue “there’s a clue in the name “javascript frameworks”; they will need, well, er, javascript. Good point, but that misses what PE is about. The web page should work in a minimal browser, without CSS and Javascript but work better when the technologies are available. To have a blank page with no javascript is a fail.
In fact, I eventually reminded myself of mature (and so boring) jQueryMobile and jQueryUI which both state PE as a design principle but are not MV* in themselves. T3js also mentioned PE but I’ve not explored how much it is supported. I’m interested to observe that many MV* solutions are not the same as the original Smalltalk MVC which was where I first experienced it. Some like the Flow architecture are much closer with no 2 way binding.
I suspect the reason for this lack of PE is as others have observed, namely with so many developer’s now coming to front end web dev many bring experiences of good practices from large software systems and naturally want to apply them. I’m not saying hard won principles such as modularity, separation of concerns, loose coupling and even MVC itself are bad. Rather the narrow focus on the software engineering with Javascipt can means we easily lose sight of strengths of the web and code ourselves into a corner.
I believe we need to remind ourselves to develop for the web, not just the browser. Better, design for users of the web, not browsers. Users are to be found using a range of devices, a variety of browsers. perhaps with assistive technology and in varied contexts. We can’t control our users environment, whether its to get a pixel perfect layout or create a javascript platform.
The recent discussion on PE is distilling the concept that the web has it’s own strengths which derive from it’s heritage of sharing scientific information. These include hassle-free access by disparate people on varied devices. The web can do this like nothing else can and PE, responsive design and accessibility are key factors in ensuring it delivers on it’s promise. By supporting a wide inclusive range of devices and user capabilities we gain incredible reach that is of benefit both commercially and individually.
We’ve lost sight of how to capitalise on that strength, though, and have to find our way back home.
I’m confident we will. My current thoughts are that PE is a key part of what makes the web work best and encompasses both mobile-first responsive design and accessibility. Design for small screens and enhance for larger ones. Design for basic inclusive access and enhance for optimal personalised experience. Taken together and with other techniques that make few assumptions will be able to reap the benefits of the web’s strength.
Perhaps someone will write a dissertation to explain this user focussed aspect of the web to sit along side Roy Fielding’s “Architectural Styles and the Design of Network-based Software Architectures”. Any volunteers?
Here’s a mini review after a quick play with a preview of the new CKEditor Accessibility Checker plugin for content creators. The plugin is provided by CKSource who lead the development of the open source CKEditor and provide additional commercial grade services.
WYSIWYG JavaScript editors
If your memory is as long as mine you will recall when WYSIWYG javascript editors first appeared back in the days when we spoke excitedly of DHTML (D = Dynamic = scripted). Designed for use in web programs such as Content Management Systems (CMSs, eg Drupal) these editors replace a basic HTML
Note that the checker makes an XHR call to Quail so the sample had to run from a server, not file:///. An easy way to do that is with nodejs and hapi configured as a simple static server. I also used the new Visual Studio code editor to edit and run it. All in all that’s a nice easy and portable way to get a nodejs server up and running
server.js runs hapi as a static server
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
varHapi=require('hapi');
// Create a server with a host and port
varserver=newHapi.Server();
server.connection({
host:'localhost',
port:3000
});
// Add a route for a simple static file server
server.route({
method:'GET',
path:'/{param*}',
handler:{
directory:{
path:'public',
index:true
}
}
});
server.start();
While the first three accessibility errors in my dodgy markup were found the contrast fail was not, even though this is listed in the Quail documentation. I checked with TPG’s WAT to ensure it was indeed a WCAG AA and AAA fail. I tried adding it as a new CKeditor style but that made no difference. Perhaps Quail does not map the colour names to values? I assume it works with inline styles. I didn’t spend anymore time investigating this.
Some errors are no doubt hard to find as the editor contents are one part in a larger page context. If the wider page context is ignored then some structural errors will not be found. The edit page context is likely to be different to the view one. Also, if the same content is used in several page contexts the structural integrity may vary.
Final Thoughts
The Accessibility Checker plugin is a good solution for ensuring user supplied content is accessible or otherwise checking in browser edited markup. The UX is good, though I did not check the accessibility of the UX itself. Quail is a good open source accessibility validator, is configurable and supports test for both WCAG and Section 508. The Accessibility Checker documentation claims it can be used with others checkers so perhaps it would work with Tenon.io, though that requires a subscription. The Quick fix feature make it even easier for authors to use
Currently Accessibility Checker is a commercial offering from CKSource but they said they plan to make it open source under GPL, like CKEditor itself. I see there is a Drupal plugin for using CKEditor so no doubt the Accessibility checker could be added as well, making Drupal even more accessible.
After a double disaster with my workhorse Windows 8.1 laptop I’ve been exploring the easy ways to create a usable backup image of my system when set up to my liking. The Windows Recovery Environment (Windows RE) turns out to be well thought out but a couple of confusing bits of UI and mass of conflicting advice on the interweb leads to obfuscation. The following is my experience. Jump to the end for the solution of creating a custom image for system Refresh.
Blue Screens of Death are still a thing
I was unlucky enough to have 2 consecutive failures. The first was Windows update installing an Alps driver for my Dell XPS12 trackpad. The resulting service caused a Blue Screen of Death and required a length ‘binary chop’ process on the services to identify the cause so I could uninstall it (Basically the steps are: get into Safe Mode, run msconfig, check Hide all Microsoft Services on services tab and disable half the services, reboot and add or remove services before rebooting, rinse and repeat ’till you have figured out what is causing the problem).
Without any custom recovery setup my only solution was a clean install of Windows 8.1 (from a MSDN ISO) followed by resinstalling all my desktop apps, followed by restoration of File History backup for my docs/data from my NAS. Annoyingly I had forgot to backup a few hidden files in my user root when setting up File History. Anyway, the result was a nice fast PC booting.
Oh, but then after a reboot I suddenly got stuck in a non recoverable BSoD loop (CRITICAL_SERVICE_FAILURE). So I had to do it all again. I’m pretty sure the cause was using Glary Utilities to clean up and not the hardware. But I ran the Dell tests and Seagate’s own SSD tests just in case it was a hardware issue (all fine).
Being sensible and creating a recovery image
So this time I decided to create an image to facilitate easy restoration. While there are classic solutions like trusty old clonezilla I felt the Windows solution should be usable. While reading around indicated I might be able to create a partition on the system disk I wanted to create a boot able USB stick (the XPS12 has no optical drive) in case I got the non booting BSoD loop again..
While Windows RE supports options for both both Refresh (leaves your docs/data) and Reset (full factory reset) both required me to supply recovery media (I think the install image on USB should have worked, but I went for a full reset anyway). My plan was to create a custom image that can be used in this case to reinstall all apps and programs.
Partition or image?
Now this is where the trail gets a bit muddy. While the desktop Control Panel recovery tool can create a backup drive, the useful sounding check box “Copy the recovery partition from the PC to the recovery drive” is disabled, even on a system created from a Windows install image. Firstly it appears ‘partition’ actually means image, though an OEM may have put a custom recovery image on a partition (and you can do the same).
The solution to the disabled checkbox appears to be to provide an Install.wim windows system image and configure windows to use it with reagentc. Then if I understand it the created recovery drive will contain the Windows RE and the Install.wim and so enable you to boot and recover from the drive. However I have not yet tested this.
Now it turns out you can create a custom wim image from a snapshot of your system and leave this on your system disk when it can be used for a Refresh. Several people claim you can also rename the custom image as Install.wim and then register it so you can create a recovery drive (and possibly use it for a full Reset).
Now the tool used to create and register a custom image is recimg but it’s help has a big disclaimer that only documents and apps will be preserved during a Refresh, not desktop programs. This turns out to be the second confusing information. It would no doubt be true for the default Install.wim, assuming that actually worked out of the box. The recimg help also states it can only be used for a Refresh not a Reset but I don’t know if that is true after it is renamed to Image.wim. I’ve yet to try it.
Once you create a CustomImage.wim you can then run Refresh from the Windows RE which will use the new . Of course that assumes you can get your PC to boot, which I wasn’t able to. To cover that I’ve copied my CustomImage.wim to an external drive in the hope I can use it later if required. As mentioned above you can create a recovery drive from your custom image, but the need to rename (or copy) and register it your newly created CustomImage.wim as Install.wim to enable the checkbox.
In the end my plan was to create a CustomImage.wim after installing Office and my dev tools. This weighed in at a hefty 30 GB so I removed it from my SSD as soon as I had made a copy. I didn’t have a device suitable for a recovery drive.
[Update 2015-05-24: Warning the recovery drive utility does a FAT format so your drive will be limited to 32GB – which really restricts it’s application, infact makes it useless for me. Also the drive I purchased (Elite) appears as a local drive rather than portable so is not seen by the utility]
Creating a custom image for Refresh
Get system to a clean, updated and stable state
Open a Command Prompt
Run ‘mkdir c:\RefreshImage’
Run ‘recimg -CreateImage C:\RefreshImage’
You will now have a C:\RefreshImage\CustomImage.wim
Run ‘reagentc /info’ to check the custom image is registered
Creating a Recovery Drive with you custom image
Open a Command Prompt
copy (or rename) CustomImage.wim to Install.wim
Run ‘reagenc /SetOSImage /Path C:\RefreshImage\Install.wim /Index 1’
Run ‘reagentc /info’ to check the recovery image is registered
In control panel select ‘Create a recovery drive’ and check ‘Copy Recovery partition.
If you want to know more Steven Synofsky wrote a post on how the Windows RE system works for Reset and Refresh.
(Note Microsoft also provide tools for OEMs to create custom recovery images, tools and menus but they are more complex to use).
Following on from my last 2 posts; Symbols for AAC using SVG and a RESTful web API and I’m liking Microsoft again here’s an excellent video session from the recent Microsoft Edge web Summit. In ‘On the Edge with SVG‘ Sara Soueidan reviews the state of the SVG specification and implementation in browsers, including Edge. Sara also gives call for action to vote for these improvements.
Here’s the current list of SVG related suggestions for Edge on dev.monder.ie.
As always Mozilla Developer Network (MDN) has excellent documentation on SVG as it currently is.
After watching the key notes and selected sessions from Microsoft #Build2015 over on Channel 9 I’m definitely liking Microsoft again. This new found affection is form largely from the perspective of a HTML developer and to some extent as an accessibility practitioner. To be honest this is a welcome pleasant surprise.
When I Started Windows 3.0 development back in the day (and with liberal help from Charles’ Petzold’s excellent book), I soon figured Microsoft treated developers well, even courting them with shiny tech to explore and great communications (like MSDN magazine and then later with huge stacks of CDs).
This was the early phase of Microsoft corporate culture when they were still very much developer led. Admittedly, some of their products’ usability suffered from this bias and quite rightly they changed structure. Later, I moved on from embedded development using MASM, and MS Visual C for PC deployments an eventually to MS Windows powered financial products. As a result of tweaking the UK SKU of MS Money I even managed to work for Microsoft on some MSN back end code as a ‘contractor’ in Red West B, but that’s another story.
I started to focus on the intersection of web accessibility, where Microsoft had a limited user story, and open source, where they were largely seen as the face of the proprietary corporate enemy. That view was not helped by Bill Gates’ famous open letter to hobbyists which wound a lot of people up at the time and later. Boy have things changed!
Even though I really enjoyed working on Linux and the excellent accessibility features of Gnome 2 and Mozilla Firefox, I must admit I did keep using and developing on/for Windows. I created a number of small Windows based Assistive Technologies, including the popular PowerTalk that automatically narrates PowerPoint presentations as you operate them. Powertalk uses Python to access the Office Object Model and drive SAPI speech syntheses. By the way, SAPI is one of many excellent technologies with powerful accessibility uses from the Microsoft Research stable. Another is Kinect.
Microsoft then entered what I see as the dark Balmer years and I largely moved away as user or developer. Even though my then business partner and strong Open Source community leader, Ross Gardler, was strongly not anti Microsoft. Actually, I eventual found out why Ross held that view as he left to joined Microsoft Open Tech. At one point we did look at Windows 8 HTML hybrid development (WinJS + perhaps Cordova) but in those early times we hit issues that I could not easily figure out from the historically excellent MSDN documentation. Mind you, I had not yet found Kraig Brochshmidt’s excellent free ebook – a “must read” for any HTML development on Windows.
I must admit that at the time I felt that the move to Microsoft was going to be important for both Ross and Microsoft. After my experience from Build2015 I feel that’s reasonably well validated. Here’s why
The clear overall impression from Build was that Microsoft have now adjusted their culture so they now embrace and engage open source communities. Those of you aware of the more popular old criticisms of Microsoft will know why I highlighted that :). In the process Microsoft have rediscovered a friendship with developers. The dual C words of Community and Conversation seem to have almost become mantras, at least in the session I watched. Sure,they are doing this for business survival reasons, but it still rocks.
New developer tooling, including the excellent new Visual Studio Code, show energy in supporting popular open source tools and workflows used by those outside of the Microsoft way. This is especially true in the web and HTML app space as I saw demos of nodejs, Bower, Gulp, Cordova, Angular, backbone and more. Plus Microsoft’s own WinJS framework works with Angular and other frameworks. And, oh did I, really see those Angular devs in a Build presentation!?
Edge is so obviously the new browser on the block from a standards point of view. If you recall why Mozilla Firefox was started you realise that is a most welcome result. We’ve recently been seeing Microsoft engage with W3C and other groups to great effect. Even if sometimes they want to push things in different directions to others, for example ORTC rather than webRTC, they are taking an active part, unlike some others whom I won’t mention. Also the the F12 tooling has some great innovative features, including the ability to attach to embedded webviews. This ‘joining in’ even includes key bindings – as I honestly heard the presenter saying “why be different to others for no good reason?”.
The new developer paths to and from Android and iOS are also impressive. As is the support of hosted apps and win32 apps in the appstore. Microsoft are obviously keen to get everyone on their Windows/Azure platforms.
The other reason I find I’m liking Microsoft again is their approach to supporting the plethora of devices, form factors and input modes that we now face. Universal Apps, the flexible input platform and Continuum act together to provide the basics for a smooth cross platform (device) and accessible experience for users.
For example plugging a keyboard into my Android ASUS transformer tablet just didn’t work well enough so I gave up. Windows controls support mouse, touch, keyboard and even pen and games controller. With Continuum you can plug a mouse, keyboard and HDMI monitor into a suitable phone and get a near desktop experience.
The flip side of this flexibility is a boost in accessibility. The previously mentioned paths between other developer platforms, including their own, strengthen this considerably. My strong impression is that Microsoft have the best, if not unique, story here and it will only get better.
Definitely not your mom’s Microsoft. I’m looking forward to watching this unfold…
A good few years ago I hooked up with Garry Paxton who needed some development support for a charity website. He had created straight-street.com to provide Speech and Language Therapists access to a new and freely available symbol set. Symbols such as this Mulberry symbol set are vitally important for people with communication difficulties – such as an inability to speak. But often, like much in the AT world, proprietary symbols are expensive and so can be out of reach of many who would really benefit form them.
While this work was carried out a few years ago I felt it should be documented and will hopefully inspire others to innovate.
Open symbols
Garry’s goals for the symbols and website included
Provide an alternative symbol set for older users as available sets were largely aimed at children. This required extra ‘adult’ symbols and a more appropriate style.
Promote innovation in symbol availability and use by allowing symbols to be freely used, shared, modified and accessed on the web. All symbols sets at the time had proprietary licences and often required a licence per use on a single PC. This was felt to be a serious barrier to users getting free access to critical communication aids they need. Personally I think that the majority of symbol set owners were behind the times as far as the technical possibilities were concerned and so users were missing out.
Demonstrate how symbols can be accessed in modern web apps through an API. This included providing an API to access symbols, a basic test App and also a protoype symbol chart maker app.
Provide a strong design workflow for the symbols so they have consistent style (even though permissive licence allows for derived works).
Encourage community suggestions for and review of symbols.
Allow easy access to entire symbols set or just a sub set based on criteria such as topic (eg ‘food’)
I think most of these goals were reached by Garry and the team, despite being a little ahead of the curve technically. API usage and general SVG support were nowhere as well developed as they are now. Perhaps most importantly this was disruptive as far as symbol set owners and developers who used them were concerned. We see several web uses of symbols (eg hover over words on commmunicationmatters.org.uk) and a few free or otherwise better licensed symbol sets have become available. Currently the Mulberry symbols are used in many apps (native and web), though some people appear to be abusing the very permissive CC BY-AT licence. Unfortunately Garry’s charity funding dried up and so it was closed at the point the current 3,000 odd symbols were finished. Note to anyone interested in picking up on this – Garry would love to see the symbol development work resume.
To see a fairly random selection of symbols go to straight-street.com and click on “Search”. You can mouse over the symbols to get a larger preview.
SVG
I loved the symbols and Garry’s aims in terms of open accessibility so I quickly offered to help fix the website problems. I made several suggestions, in particular using SVG as an alternative to the WMF (Windows meta format). WMF made sense for use in installed apps as most users had Windows PC programs that only support WMF. It’s scalable but rather crude, requiring considerable hand editing of exports from Adobe Designer (used to create the symbols). In addition, due to security problems Microsoft pulled the explorer support for showing thumb nails, thus reducing their general utility.
I was well aware of the advantages of SVG as a mature scalable format and open standard. I hoped it would soon ‘break’ into mainstream, something that is only just happening now, some 5 years on, largely I suspect as a result of the need for responsive images.
Seeing I was promoting SVG to Garry as the web-friendly format for use on the web I needed to prove it could be easily used in webs apps for symbols. This proved to be basically the case though the test app is a little more complex then expected.
Baker
Briefcase
bath_animal_,_to
Fortunately, that has now changed with improved SVG support in browsers. The biggest breakthrough is the support of SVG files in tags – hurrah! To prove the point, you should be able to see above various the in differing sizes using an tag (and you can click on them for a larger scaled image). These were added to WordPress using the “embed from URL” option without any special effort. Now symbols can easily be displayed in web apps without using awkward markup such as
