Disable Login Language Selector on WordPress 5.9

With the release of WordPress 5.9 comes a new dropdown language selector on the Login screen for WordPress that lets users switch to any language that has been installed on the website. As long as there is more than one active language on the site then this dropdown selector will be visible and is a great feature for multi-lingual sites.

If, like me however, you develop a website which already has a language switcher in place, either via your own code or another plugin then you may not want the new language selector to appear. Thankfully WordPress 5.9 also comes with a filter that you can use to disable the selector, so you can use this simple line of code in the ‘functions.php’ file in your theme to do so:

add_filter( 'login_display_language_dropdown', '__return_false' );

Whilst it is fairly simple to add this to your theme for some people it may not be possible to edit your theme files and such it’s much easier to install a plugin, so I’ve made a simple plugin which is now live in the WordPress plugin directory. The “Disable Login Language Selector” plugin provides a quick and easy way to remove the Language selector that appears on the login screen in WordPress 5.9.

(Note that my other WordPress plugins have also been tested in WordPress 5.9 too so will happily work with the new release.)

A work-around for aspect-ratio percentage padding issues on flex items in older versions of Firefox and Edge

Whilst working on a recent project I needed to enforce a fixed ratio on some elements in the layout. In this case I used the ‘Aspect Ratio’ method which uses a ‘0’ height element with a percentage-based ‘padding-top’ value (More info about that in this CSS Tricks article).

The problem I ran into was that I was also using Flexbox for layout so each element was a Flex item, all of this was fine in Chrome and Safari and also in recent versions of Firefox and Microsoft Edge 17, 18 and in the upcoming 19.

But when testing in Edge 15 and 16 I found that the elements with the aspect ratio method applied to them were just completely invisible. Looking into it further I came across a Stackoverflow post and discovered that the issue was that in these versions of Edge they were supporting an earlier version of the Flexbox specification which meant that the percentage-based padding-top had no effect, basically rendering these elements with a ‘0’ height so they didn’t show up. It seems that the Flexbox specification was updated circa 2018 and basically brought it in line with the way Chrome and Safari have always behaved.

An alternative way of specifying the padding-top value is to use the ‘vw’ viewport-width units instead of percentages, whilst I found this did work to some extent it was harder to keep the ratios exactly how I wanted, but at least it was a way that would get these elements working in older version of Edge. Rather than having to completely redo my markup and CSS just to support these older browsers I wanted to see if there was a way to target only these earlier versions of Edge and use ‘vw’ units for Edge 15 & 16 but keep percentages for all other browsers.

As it happens I was also using “Variable Fonts” on this site which are only supported in Edge 17+, as such as I was already testing for Variable Font support by using ‘@supports (font-variation-settings: normal)’, so combining this with another parameter ‘(-ms-ime-align: auto)’ which allowed me to target Edge I came up with a workaround.

Here’s an example of how it would be used, in this case it is a 3-up layout so each element is 1/3rd of the page width so set at 33.33333% of the width and then a padding-top set to the same percentage. The first CSS block sets the main styles and the second block adds the ‘@supports’ check which overrides the first for matching Edge versions:

.aspect-block {
    padding: 0;
    position: relative;
    flex: 0 0 33.33333%;
    height: 0;
    overflow: hidden;
   padding-top: 33.33333%;
}
@supports (-ms-ime-align: auto) and (not (font-variation-settings: normal) ) {
    .aspect-block  {
        padding-top: 33.33333vw;
    }
}

Mental note: Set ‘register_meta’s ‘single’ parameter appropriately or you end up with data across multiple custom fields

This is a mental note for my own future reference after spending several hours trying to debug why some data was getting magically broken apart into multiple meta data fields.

In this case I was submitting a string of JSON data (created using JSON.stringify) via $.ajax in jQuery to create a ‘user_meta’ field via the WP Rest API. I could see from the response after successfully posting that the data was breaking up into multiple parts and was showing up as an array in the Ajax response, sure enough looking at the data in the WordPress ‘user_meta’ table I could see that there were a whole load of entries created from pieces of the single string I had sent.

After searching online for solutions and trying quite a few things I managed to narrow it down to which bit of code might be the cause, I was struggling to figure out whether it was happening during the AJAX request or on the server within WordPress.

However, I was aware that when rendering meta data using ‘get_user_meta‘ or ‘get_post_meta‘ that it will bring up an array as the default format as it is possible to have multiple meta fields with the same name, so when requesting a meta field you can set the ‘$single’ parameter to ‘true’ and this will return only a single value.

However, I hadn’t realised that you can actually specify that the fields are only to ever have a single instance when you register them using ‘register_meta‘, after setting this parameter my submitted JSON string happily went into a single user_meta field!

You can set the meta field to use a single parameter when registering like so:

register_meta( 'user', 'my_meta_fieldname', array( 'type' => 'string', 'single' => true ) );

Hopefully this will stay in my head now and I’ll remember if this happens again!


WatchOS 5 adds support for web content rendering

Apple recently announced updates to the core software on all of their hardware platforms with various interesting new features.

One feature that jumped out when looking through it all was support for displaying web content in watchOS 5, it’s important to clarify that they haven’t added a standalone Safari app to watchOS but instead it enables any links sent via Mail or Messages to be accessed and then displayed right on the watch.

To get a quick overview it is worth taking a few minutes to watch the “Designing Web Content for watchOS” video on the WWDC2018 videos site as it gives a good overview.

Here’s a few thoughts and info about key aspects that I picked up from watching the video:

User navigation / interaction

  • You can scroll using the Apple Watch’s digital crown or via pan gestures
  • Double-tap to zoom in / out on the page content
  • Back/Forward navigation is controlled either via an overlay UI brought up via a  firm press on the screen or by swiping back and forward from the edges of the screen.

Web browser feature support

Content is optimised for display on the Apple Watch so certain features are not supported in watchOS 5:

  • Video playback
  • Service workers
  • Web fonts

If the web content being accessed is responsive then it treats the content as being 320px wide, the same width as if on an iPhone SE (iPhone 5 or older width). So text may be smaller but at least it will basically render the smallest breakpoint content, so it doesn’t require any new even smaller breakpoint to be catered for.

This is done by overriding the “initial-scale” value and provides a viewport with the dimensions 320px by 357px and reports a media query size of 320px. So existing responsive content will render on the Apple Watch without requiring any changes – at least from a layout perspective, worth noting the lack of support for Web fonts as this will likely have some rendering impact as it falls back to alternative fonts in the font stack do display.

Optimising content for Apple Watch

Even though responsive content will be rendered quite well by default it is possible to optimise content for display on Apple Watch.

The above image shows the standard responsive content being displayed on the Apple Watch, basically just the same as it would be on an iPhone SE (minus any web fonts of course!).

Responsive Layout on Apple Watch

Using a media query it is possible to modify this layout to display as a single column. There is an example given in the video which obviously won’t apply for all uses, but basically it uses “min-width: 320px” as the baseline for showing the content as two columns, so any content below that would render as a single column. Again, how this works specifically for your layouts will vary, but there will be some methods to use for frameworks like Foundation or Bootstrap etc.

“Disabled-adaptations” meta tag

The important addition to using a media query though is a new meta tag which disables the default adaptations that the Apple Watch makes when rendering content by default:

<meta name=”disabled-adaptations” content=”watch”>

With this meta tag in place the device width will be treated as the real width of Apple Watch’s screen. This again has similarities to how content was handled when the iPhone originally came out, existing content is displayed as best as possible but there are ways to optimise for the device if you want to.

Form controls on watchOS

Making use of HTML5 form control types is really important on watchOS, setting the type attribute to “email”, “tel” etc will bring up a specific, full screen UI to allow interaction.

Additionally making use of labels, placeholder or aria-label attributes enhance the context given when interacting with these controls. Hopefully you’re using these already but here’s another reason to do so.

Safari Reader on watchOS

This is a feature found on iOS and macOS which basically formats pages to show a more readable version of web page content. It’s a little unclear from the video but it sounds like pages that are “text heavy” will get displayed using Reader, although I’m not 100% sure how that would be determined exactly if so. Perhaps this is a way to handle big pages that might have a lot of adverts on it? Reader view is an option that users can choose by firmly pressing on any page to bring up the navigation overlay, so even if content is displayed normally a more readable version can be accessed.

Semantic markup in Reader view on watchOS

Reader view makes good use of semantic markup, using the “article” tag helps the display of content, and attributes like “item-prop” and other semantic tags like “strong”, “em”, “blockquote” etc enhances the display of content in Reader on watchOS.

Open Graph meta tags

Using Open Graph meta tags is something that makes sharing content around the web such as into Facebook, Twitter etc look better by providing specific preview content such as images, titles etc. watchOS makes use of these Open Graph meta tags to make the previews for any shared links look as good as possible.


That’s a quick overview of some aspects of watchOS 5’s support for web content, there’s definitely a few things to consider in there but if you’re building pages using responsive layouts and using semantic HTML then things should work fairly well without having to do anything.

The biggest issue I see initially is the lack of support for web fonts, that seems like it could cause some display issues due to the fallback to alternative fonts in the stack or if web fonts have been used for icons etc.

I’m also interested to know what the impact on battery life on the watch is like when loading and rendering multi-megabyte web pages which are not uncommon these days, I think Reader view is going to be an essential feature for viewing web content on Apple Watch.

GDPR, Privacy and WordPress

Over the last few weeks and months if you’ve been on any kind of email subscription list you have undoubtedly had at least one email (likely with a pleading tone!) asking you to re-confirm your permission to receive emails. These emails have all been prompted by the new General Data Protection Regulations, or more commonly by the acronym GDPR which is in force under EU Law as of May 25th 2018.

These impending regulations coupled with the fallout from the high profile Facebook / Cambridge Analytica data mis-use has brought the whole issue of data protection, privacy and handling of user data to the forefront of people’s minds. The consequences of mis-use of personal data provided to websites have been shown to be potentially far reaching.

Personal Data and Privacy

In the light of both GDPR and Facebook’s privacy issues the development community around WordPress has been quick to respond with enhancements to increase its compliance with the requirements of GDPR. WordPress 4.9.6 was released 17th May was a minor update in version numbering but added a few new settings and controls in the WordPress backend to help with compliance, the following is quick overview of what has been added and what the intentions are behind them.

After updating to 4.9.6 you will see a popup highlighting the new “Personal Data Export and Erasure” features that have been added to the Tools menu, along with a new Privacy feature in the Settings menu.

Privacy Policy

Accessing the new Privacy feature in the Settings menu will show a general overview of why you may need to add a Privacy Policy page to your website. Whilst GDPR is currently the most prominent regulation which may affect the legal need for a privacy policy page there are also other regulations in place around the world.

You can then select an existing Privacy Policy page if you have one or you can click the “Create New Page” option which will add a new page to your site with suggested privacy policy content, which you can then edit. Some of this content is more broad generic privacy information but some such as the “Comments” section details information that may be held when users comment on your WordPress site. So even if you do not have users logging in to your website it is important to note that the process of simply leaving a comment on your website involves the person doing so to provide some personal information in this process and the saving of cookies in the user’s browser. Subsequently there is a new permission checkbox on comment forms to allow users to explicitly consent to this.

Export Personal Data

In the Tools menu there are two new features added to provide a way to manage the personal data of specific users’ data on your website. Regulations like GDPR require that users are able to request to see all of the data that your website may hold about that user, the new “Export Personal Data” function allows you to enter the email address of a user which will then email a link to a zip file of all of the data held relating to that email address.

Erase Personal Data

The second new addition to the Tools menu is the “Erase Personal Data” function. This provides a way for any identifying information related to a user to be erased from the site. It’s worth noting that this doesn’t delete actual comments from the site but it does remove any way for these to be identified either on the front-end or back-end of the website.

You enter the email address of the user requesting erasure of their personal data into the field and then this will send out an email to the user asking them to confirm the erasure of their data, so it puts the ultimate control of this data in the user’s hands.

Are you a plugin developer?

If you are a WordPress plugin developer then hopefully you haven’t been oblivious to these changes that have been happening in WordPress core, but if not then it’s worth taking a look at the update guide for WordPress 4.9.6 as there is some impact on plugin developers. Particularly if your plugin handles any personal user data then this may be extremely important for you to get up to speed on: https://make.wordpress.org/core/2018/05/17/4-9-6-update-guide/

You should also have a good read through the Privacy section of the Plugin handbook: https://developer.wordpress.org/plugins/privacy/

What next?

These tools in WordPress core are just the start of an increased focus on user privacy and data security within WordPress and the many plugins in the WordPress ecosystem. You can expect some further additions in future releases and in particular new features added to third-party plugins in the interest of data protection and privacy.

HTML 5 Application Cache device storage limits – Jan 2014

Update 22/Dec/2017: AppCache is now technically deprecated. Additionally I found far too many issues cross-browser to ever use it for final production code. The newer Service Workers  appears to be a lot more powerful, and is supported at the time of this update (Dec 2017) in Chrome 47+, Firefox 45+,  Opera 48+, Edge 17, and in Safari Technical Preview.

A large project I’m working on just now requires some offline capability so I’ve been doing a lot of research into the various HTML5 technologies available. One thing I found is that a lot of the information out there about storage limitations of browsers and devices was often quite old (2 years being quite old in this context!), so I’ve performed a range of tests to establish more up-to-date information, so as of Jan 2014 this is hopefully accurate!

Tests were performed using the AppCache test page at www.der-schepp.de/appcache-default-size/ apart from the Firefox results as that test page wouldn’t work at the time of testing, Firefox tests were performed using my own internal test page instead.

The tests were mostly performed using the online testing tool Browserstack, items marked with † indicate results when tested on actual devices or simulators / emulators.

Notable weird behaviour is on iOS devices where prompts to increase the available storage space to a limit of 50MB appear, however it seems that an actual limit of 16MB or 20MB occurs when running the test. Also note slightly weird behaviour with the IE10 and IE11 results on Windows RT.

Please leave comments if you see any different results than I have posted or if you have any additional results for devices.

* The AppCache test only tests a maximum of 256MB so ‘unlimited’ means at least 256MB can be stored. Please note that although limits are per each application cache manifest there is likely a maximum amount of storage space available which would limit how many much data overall can be stored, at this time I these limits are unknown but I hope to do some testing in this area in the near future.

Browser Version OS Platform Device Default max (0 = unlimited*, -1 = Unsupported) Max (with prompts) Comments
Internet Explorer 6,7,8 Win XP PC -1
Internet Explorer 9 Win 7 PC -1
Internet Explorer 9 Windows Phone 7.8 HTC HD7 -1
Internet Explorer 10 Win 7 PC 10 52
Internet Explorer 10 Win 8 PC 10
Internet Explorer 10 Desktop Win 8 PC 10 52
Internet Explorer 10 † Win 8 RT Surface RT V1 10 20 Prompt asking to “exceed the storage limit on your computer”. Interestingly using the ‘der-schepp.de’ test was giving 4MB as the default maximum here but using my own test confirmed 10MB which is what IE10’s default prompt level is set to. See notes for Win 8.1 RT tests.
Internet Explorer 10 Desktop † Win 8 RT Surface RT V1 10 20 Prompt asking to “exceed the storage limit on your computer”. Interestingly using the ‘der-schepp.de’ test was giving 2MB as the default maximum here but using my own test confirmed 10MB which is what IE10’s default prompt level is set to. See notes for Win 8.1 RT tests.
Internet Explorer 11 Win 7 PC 10 52
Internet Explorer 11 Win 8.1 PC 10 52
Internet Explorer 11 Desktop Win 8.1 PC 52
Internet Explorer 11 † Win 8.1 RT Surface RT V1 4 20 Prompt asking to “exceed the storage limit on your computer”. Interestingly using the ‘der-schepp.de’ test was giving 4MB as the default maximum here but using my own test 8MB was cached without a prompt appearing, IE 11 on Win RT 8.1 has 10MB set as the default level to prompt to exceed storage limits but trying 9MB or higher triggered the prompt.
Internet Explorer 11 Desktop † Win 8.1 RT Surface RT V1 4 20 Prompt asking to “exceed the storage limit on your computer”. Interestingly using the ‘der-schepp.de’ test was giving 4MB as the default maximum here but using my own test 8MB was cached without a prompt appearing, IE 11 on Win RT 8.1 has 10MB set as the default level to prompt to exceed storage limits but trying 9MB or higher triggered the prompt.
Safari 4.0 OSX 10.6 Mac 0
Safari 5.0 OSX 10.6 Mac 0
Safari 5.1 Win 8 PC 0
Safari 5.1 Win 8.1 PC 0
Safari 5.1 OSX 10.6 Mac 0
Safari 5.1 OSX 10.7 Mac 0
Safari 6.0 OSX 10.7 Mac 0
Safari 6.1 OSX 10.8 Mac 0
Safari 7.0 OSX 10.9 Mac 0
Chrome 31 Win XP PC 0
Chrome 31 Win 7 PC 128
Chrome 31 Win 8 PC 75
Chrome 31 Win 8.1 PC 0
Chrome 31 OSX 10.9 Mac 0
Chrome 32 Beta Win XP PC 0
Chrome 32 Beta Win 7 PC 0
Chrome 32 Beta Win 8 PC 56
Chrome 32 Beta Win 8.1 PC 0
Chrome 32 Beta OSX 10.8 Mac 0
Chrome 32 Beta OSX 10.9 Mac 0
Chrome 33 Dev Win XP PC 0
Chrome 33 Dev Win 7 PC 0
Chrome 33 Dev Win 8 PC 60
Chrome 33 Dev Win 8.1 PC 0
Chrome 33 Dev OSX 10.8 Mac 0
Chrome 33 Dev OSX 10.9 Mac 0
Mobile Chrome 31 – iPad † iOS 7.0 iPad 3rd Gen 20
Mobile Chrome 31 – iPhone † iOS 7.0 iPhone 5 20
Firefox 26 Win XP PC 0
Firefox 26 Win 7 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 Win 8 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 Win 8.1 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 OSX 10.6 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 OSX 10.7 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 OSX 10.8 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 † OSX 10.9 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta Win XP PC 0
Firefox 27 Beta Win 7 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta Win 8 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta Win 8.1 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta OSX 10.6 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta OSX 10.7 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta OSX 10.8 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta OSX 10.9 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 for Android Android 4.1.2 Nexus S 20
Opera 18 Win XP PC 0
Opera 18 Win 7 PC 0
Opera 18 Win 8 PC 57
Opera 18 Win 8.1 PC 0
Opera 18 OSX 10.6 Mac 0
Opera 18 OSX 10.7 Mac 0
Opera 18 OSX 10.8 Mac 0
Opera 18 † OSX 10.9 Mac 0
Opera 19 Next Win XP PC 0
Opera 19 Next Win 7 PC 0
Opera 19 Next Win 8 PC 42
Opera 19 Next Win 8.1 PC 0
Opera 19 Next OSX 10.6 Mac 0
Opera 19 Next OSX 10.7 Mac 0
Opera 19 Next OSX 10.8 Mac 0
Opera 19 Next OSX 10.9 Mac 0
Opera 20 Dev Win XP PC 0
Opera 20 Dev Win 7 PC 0
Opera 20 Dev Win 8 PC 46
Opera 20 Dev Win 8.1 PC 0
Opera 20 Dev OSX 10.6 Mac 0
Opera 20 Dev OSX 10.7 Mac 0
Opera 20 Dev OSX 10.8 Mac 0
Opera 20 Dev OSX 10.9 Mac 0
Opera Mobile † Various Opera Mobile Emulator 0
BlackBerry Browser † BlackBerry 10 (10.2.0.1155) BlackBerry 10 Device Simulator 0
BlackBerry Playbook Browser † BlackBerry Playbook 2.1 (2.1.0.1032) BlackBerry PlayBook Device Simulator 0
Mobile Safari – iPad iOS 3.2 iPad 1st Gen 5
Mobile Safari – iPad iOS 4.3.2 iPad 2nd Gen 2 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad iOS 5.0 iPad 2nd Gen 2 20 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 20MB max.
Mobile Safari – iPad iOS 5.1 iPad 3rd Gen 2 20 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 20MB max.
Mobile Safari – iPad iOS 6.0 iPad 3rd Gen 10 16 Prompt for 25MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad iOS 6.0 iPad Mini 1st Gen 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad iOS 7.0 iPad 3rd Gen 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad † iOS 7.0 iPad 3rd Gen 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad † iOS 7.0 iPad Mini Retina 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone iOS 3.0 iPhone 3GS 5
Mobile Safari – iPhone iOS 4.0 iPhone 4 5
Mobile Safari – iPhone iOS 5.1 iPhone 4S 2 20 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone iOS 6.0 iPhone 4S 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone iOS 6.0 iPhone 5 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone † iOS 7.0 iPhone 5 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone iOS 7.0 iPhone 5S 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Android Browser † Android 4.1.2 Nexus S 32
Amazon Silk 3.8 † Android 4.0.3 Kindle Fire 0
Android Browser Android 4.0.3 Kindle Fire 2 48
Amazon Silk 3.4 † Android 4.0.3 Kindle Fire HD 8.9 0
Android Browser Android 4.0.3 Kindle Fire HD 8.9 48
Android Browser Android 4.1.2 Google Nexus 7 10
Android Browser Android 4.0.4 Samsung Galaxy Note 10.1 10
Android Browser Android 4.0.4 Samsung Galaxy Tab 2 10.1 10
Android Browser Android 4.2.2 LG Nexus 4 8
Android Browser Android 4.1.2 Samsung Galaxy SIII 10
Android Browser Android 2.3.3 Samsung Galaxy Note 10

Download as a PDFDownload as a CSV

Rise of the Machines

As we move further into a post-Flash(1) web there’s a lot of excitement and hype about HTML5 and CSS3. These new technologies combined with the power of JavaScript frameworks like jQuery offer the potential to create much more dynamic, animated, interactive user experiences on the web.

Many tools are now being developed to make the creation of these experiences much easier (Edge, Sencha, Hype, MotionComposer, Animatable(2) etc). However, there’s a potential danger lurking under the surface with these apps and the many demos and samples showing off these new shiny features: Machine Generated Code.

Made in the image of Flash

Any serious web developer would not consider the HTML code rendered by tools like Apple’s iWeb to be clean or optimal but rather to be bloated and messy. With the rise of ‘HTML5’ and the previously mentioned apps it seems that some normally standards-aware developers are being swept along with the buzz, happy that you can now do all these cool animations that are ‘standards based’. But if you take a look underneath the surface and examine the code being output then there are causes for concern — a high or total dependency on JavaScript to generate HTML content, bloated ‘divvy’ code and no consideration for fallback content or graceful degradation.

The content created might be made using web standards like HTML5, CSS3 and SVG but in reality it fails in exactly the same way that Flash does — poor / non-existant semantic structure and a lack of accessibility(3).

Web apps

Another form of Machine Generated Code that is manifesting on the web is within many popular web apps. Take a look at the code under the hood of Google+ and you’ll see something like this:

Is that code any better than the code that is generated by iWeb? It’s possibly worse. How can a company like Google who has incredibly talented developers end up with code like that? Well, in Google’s case it was written using a templating system that uses Closure, these templates are converted by java on the server into HTML(4). Nothing inherently wrong with that process but the end result is HTML that is machine-friendly but is not really intended to be easily readable by humans.

So it seems that with the ‘rise of the machines’ demonstrated by tools like Edge, Sencha and Hype along with development frameworks like those used by Google that there is a loss of focus on the best practices of clean code, graceful degradation, progressive enhancement, accessibility. Instead the focus is on easy generation of code and content, with Edge and Sencha giving a visual WYSIWYG-ish interface with which to create it, and Google’s Closure / Java dev process enabling code-savvy devs to write in a non-web native language and have this automatically generated or compiled into the final HTML and JavaScript.

(Of course a counter-argument is that clean semantic HTML code doesn’t apply to web apps as they are ‘more complex’ than ‘regular’ websites! That’s something for further discussion).

Change begins at home

So, is there a solution to this? Well, the first solution is to consider these issues yourself. If you’re evaluating tools like Edge, Sencha or evaluating development frameworks then pay close attention to the code they create. If it seems to be falling short then take the time to give feedback to the companies behind them. In the case of Adobe’s Edge tool which is currently an early preview release on Adobe Labs then there is an opportunity to give feedback on the app and influence it at an early stage of development. Don’t just whine about it on Twitter but take the time to give feedback and clearly explain what you think is wrong and how it can be improved.

Muse

Talking of people whining on Twitter, I wrote this article and had it all pretty much ready to publish when Adobe released another product on Adobe Labs, Muse. Although the main focus of this article is on the more interactive, dynamic flash-esque content creation applications that have been appearing I couldn’t really post this article without briefly mentioning Muse (I did mention iWeb and talk about Google+ after all, both of which obviously don’t fit that category of app).

Muse definitely renders Machine Generated Code as it’s sole aim is to enable visual designers to “Design and publish HTML websites without writing code”. I have to admit that the first thing I did when viewing the Muse website (which is itself built with Muse) was to view source, and sadly I was disappointed with what I saw there – lots of nested divs, generally bloated looking content, and despite purportedly being ‘HTML5’ there were no HTML5 structural tags to be seen.

Many WYSIWYG apps have come and gone and have never managed to produce good clean code without requiring the user to intervene and clean up code, this doesn’t mean it’s impossible to create such an app, but it’s definitely a big challenge. As with Adobe Edge I’d recommend taking time to give good, reasoned feedback about what you consider is wrong with the output it produces, don’t just complain about it on Twitter.

Christian Heilmann wrote an interesting article called “Getting rusty – we need new best practices for a different development world” which I think gives an interesting pragmatic perspective on the debate about Machine Generated Code and why we rightly consider clean, semantic code desirable as opposed to that produced by apps like iWeb, Edge, Hype, Muse etc. His final couple of paragraphs sum up the thoughts and feelings that inspired me to write this post:

“Using web standards means first and foremost one thing: delivering a clean, professional job. You don’t write clean markup for the browser, you don’t write it for the end users. You write it for the person who takes over the job from you. Much like you should use good grammar in a CV and not write it in crayon you can not expect to get the respect from people maintaining your code when you leave a mess that “works”.

And this is what we need to try to make new developers understand. It is about pride in delivering a clean job. Not about using the newest technology and chasing the shiny. For ourselves we have to understand that the only one who really cared about our beloved standards and separation of concerns is us – as we think maintainability and not quick deployment and continuous iteration of code. The web is not code – the web is a medium where we use a mix of technologies fit for the purpose on hand to deliver a great experience for the end users.”

Footnotes:

  • 1: By post-Flash I mean as the only way to do interactive animated content on the web.
  • 2: Animatable looks to be one of the most promising apps being developed as the team behind it have kept the whole concept of falling back to non-animated content as core to the way the app works, basing it on actual HTML content rather than just created through JavaScript.
  • 3: I acknowledge that it is possible with recent versions of the Flash player to make Flash content that is more accessible, but generally Flash’s integration with Screen readers like Jaws etc is not great, and you have to specifically apply settings to the Flash content to help it be accessible.
  • 4: This information about Google+ development and other interesting info from this thread.