IE11: what we know and what we can speculate
A build of Windows–codenamed Windows Blue–was leaked onto the internet recently. What does this tell us about what is coming in IE11?
April 2013
1 post
March 2013
2 posts
Vertical text with CSS 3 Writing Modes
Languages with latin-based writing systems such as English are typically written left to right, and from top to bottom. However, there is a whole different world of writing modes out there. CSS3 Writing Modes allows you to use these in your web sites. Read on to find out what you can, and can not use right now.
Finer grained control of hyphenation with CSS4 Text
CSS3 Text provides the ability to apply hyphenation to text, via the hyphens property. While this is all well and good, it doesn’t provide the fine grain control you may require to get professional results. For this, let me introduce to you CSS4 Text.
February 2013
2 posts
Get help faster, by reporting better issues
I have been spending quite a bit of time recently helping out with compatibility issues on sites such as StackOverflow and the MSDN forums. It is often difficult to give helpful advice, as the reporter doesn’t give sufficient details to debug the problem. Instead of repeatedly typing the same message in each thread, I’ve distilled some points here, that may guide you when reporting your web development woes. Taking some time to stop and think, and put yourself in the shoes of the person that will read your report, will help you create better reports, and you’ll receive faster and better quality feedback.
Hey -o-, let’s go!
So the news we were all dreading came to pass. Opera will drop Presto, in favour of WebKit. Four becomes Three. Only one browser engine remains where the dominant contributions come from an independent vendor who don’t have a vested interest in a large native ecosystem. What does this mean for Opera, and the Web at large?
January 2013
1 post
Predictions for the Web in 2013
2012 was a bumper year for the Web. Lets get our crystal ball out and look what we could have in store for us in 2013, in terms of the browser and platform wars.
December 2012
1 post
Public service announcement: time to update your CSS3
If you use experimental CSS on your sites, demos, articles or tools, there is a certain amount of maintenance required to keep on top of changes. With a number of recent changes in the browser world, now is the time to revisit and update your code. Read on to find out what may need updating.
November 2012
1 post
Mobile first: the revolution is well under way
A little over a year ago, I wrote a post about how countries in Africa were at the foothills of a mobile web revolution. Nigeria had just started seeing more web traffic on mobile devices than traditional desktop, and more countries were on course to follow that lead. This post looks at what progress has been made since then, and what the trends look like going forward.
October 2012
4 posts
Flip Ahead and Fast Forward. Providing hints to detect the next page
Internet Explorer 10 introduced a new featured called Flip Ahead. This makes a best guess at detecting the next page, article, post, thread, product or so on. When the user performs a forward swipe gesture (or presses the forward button on a mouse) it loads the detected page. If this sounds familiar to you, you’ve probably heard about or used Opera’s Fast Forward feature. This is roughly the same concept (although Opera bundles in other things, such as logging in), and can be activated using a mouse gesture, or pressing the space bar when reaching the end of the page.
Both implementations use heuristics to detect the next page. For Opera they are defined in the fastforward.ini file. The location of this file can be found by enteringopera:config#UserPrefs|FastForwardConfigurationinto the Opera url field. I’m unsure of the exact heuristics employed by IE. Browsing history data is reported back to Microsoft to improve Flip Ahead, so I expect the heuristics will evolve time goes on. As the feature “phones home’ it is opt-in and thus disabled by default.
Device screen resolutions ordered by OS
Its often a chore to track down what screen resolutions are supported by the various operating systems and devices that are commonly used on the Web. Vendor sites and developer guidelines are often helpful, but it means hunting down information across many sites and documents. Sites like GSM Arena are great, but it often means checking devices one at a time, and useful information for web developers are lost amongst the densely packed information that is of limited concern to us. As I was researching this information anyway, and I’m a bit of a data nerd, I thought I may as well catalogue the information on my blog for easy access at a later date. If the information is of use to anyone else, then all the better.
I’ve grouped the data by operating system, version, and device type, as I wanted to see what resolutions needed to be supported to broadly cover a particular OS. Not surprisingly, some of the more closed operating systems have tighter control and consistency potentially making them easier to support, while more open operating systems have a plethora of different resolutions and aspect ratios.
Public service announcement: You (probably) don’t need to escape quotes in strings
// use single quote (or apostrophe) character for JS strings, double quotes for quotes
var quotedString = 'This is a string "with a quote" inside it';
// otherwise use the backslash character (\) to escape quotes and apostrophes
var anotherString = "This is a string with an escaped \"quote\" inside it";While this is useful advice for teaching escape sequences–which you will probably need when including HTML, CSS or other languages inside strings–you don’t need to do it when including English text.
Its ok if you don’t know this, as we’re getting into the realms of typographic geekery that the average developer or programming book author doesn’t delve into, but let me explain.
Realigned.
It has been just over a year since I moved from my old blog at My.Opera.com to the Tumblr blog you’re reading now. In that time I persevered with a slightly modified built-in theme, that wasn’t really designed for long form blogging. As things broke, I fixed them, but the code was getting messy, and the Disqus integration was acting all kinds of weird.
I knew that with my kind of experience with web technology, I should really have a theme of my own, that fit my particular needs. As I was laid off recently, there is no time like the present to give the blog a complete overhaul. What you see now is the result of that labour.
September 2012
1 post
See your site like the rest of the world does. On the Nokia X2-01
In our world of ever increasing high resolution displays, multi-core, multi gigahertz processors, 4G networks and touch enabled experiences, it is often easy to forget how the rest of the world lives.
Beyond the latest iPhones, and Android devices, there are a multitude of devices out there, enabling the next billion to experience the World Wide Web for the first time. Move away from the wealthy few of the industrialised world, and a whole different picture emerges. One that might be familiar to those of you who were pioneers on the mobile web; before the iPhone came out and changed our mobile experience forever.
July 2012
3 posts
Montage and Ninja are here
After leaving Opera last year, I hopped over the Atlantic to join Motorola Mobility in the Bay Area, to work on a top secret project. Many people asked Why Motorola? and What are you working on at a mobile company?. Well, finally, we revealed our project to the world last week.
Creating an angled split feature area with CSS transforms
For an upcoming project I’m working on, I needed to have a feature area that showcased two things equally. The easy option would have been to show them in boxes, either side by side or one on top of the other. I decided instead to try my hand at a comic book look, where the cells are split diagonally. I also wanted to have a hover effect, so that each cell grew bigger or smaller depending on which cell was hovered.
CSS has traditionally not been good at things that are not square (or rounded with border-radius), but it is possible with minimal extra markup. I was speaking to Simurai and he suggested using skew to skew the box, then skew the contents back again. That idea worked and formed the basis of the technique, along with a bunch of other fiddling.
box-sizing: border-box; the results are in
A week has passed since I created a poll on the use of box-sizing: border-box. In that time 256 people filled out the survey. The results so far are as follows:
June 2012
1 post
Sizing Boxes (Back to the Future)
The way we are building web sites is fundamentally changing. The XHTML (Strict if we took pride in our work) has given way to the more loose HTML5. Image slicing and dicing, and wrapper divs are starting to be replaced with lean (perhaps semantic if we’re lucky) HTML and CSS3 effects such as border-radius, box-shadow and gradients. Elastic layouts have metamorphosed into responsive design with Media Queries. JavaScript–no longer considered a toy–has earned its place at the table, forming a triumvirate with HTML and CSS. We may be at the cusp of a real tool for layout with flexbox. Perhaps even the venerable em unit will fall out of favour, replaced with the more predictable rem, and flexible vh and vw units.
April 2012
1 post
Responsive viewport units (vw, vh, and vmin)
With all this new fangled talk of responsive web design, its about time that we had a poster child CSS unit to go with it. So move over em, CSS3 Values and Units introduces a bunch of new viewport units that are getting ready for their time in the limelight.
October 2011
7 posts
What’s new in CSS3 Values and Units?
In CSS3 the values and units we can use in CSS properties are defined in the appropriately named CSS Values and Units specification, with the exception those relating to colour and images, and the pre-defined keywords specific to individual properties.
This spec gives us one new CSS wide keyword to play with (the initial keyword), five new relative units for lengths, five new functional notations, and various new types and units to support new CSS3 modules such as Grid and Flexbox layout, Transitions, and Transforms.
What’s new in Android 4.0 for Web Developers?
Google recently announced the Ice Cream Sandwich version of Android, along with a new version of the WebKit-based browser. Lets have a look at what is in there that’s of interest for web developers.
Web Notifications
One of the traditional advantages of native apps over the Web is that they can access the platform’s built in notification system. Mobile operating systems generally have their own baked in, while desktop OS like Mac OS X have commonly found 3rd party notification systems such as Growl.
In the near future, we should be able to take advantage of this kind of functionality in our web apps as well. The Web Notifications specification provides us with this ability. This defines what are known as simple notifications. With simple notifications it is possible to create a notification which contains an icon, title, and body test. This can then be displayed by the notification system that the browser/user-agent hooks into. The spec doesn’t define this, so the user-agent can either roll its own, or use an existing system made available by the operating system.
New standards support in Opera 12 alpha
I couldn’t find anywhere that lists the new standards support in Opera 12 alpha all in one place, so I thought I’d write it up here for my own benefit. You might also find it useful.
What are CSS Shaders?
Adobe announced a proposal for CSS Shaders at Adobe Max two days ago. This was backed by both Opera and Apple, and the spec will be developed by the FX Task Force at the W3C. For those of you who are not aware, the FX task force is an elite band of ninjas’s chosen from the ranks of the CSS and SVG Working Groups to work on specs common to both technologies. Their most notable work so far is perhaps the Filters Effects 1.0 spec, but they’re also working on a common model for Transforms and Animations.
So what exactly is the CSS Shaders proposal, and how does it relate to the existing proposals and technologies? First I will introduce you to the required terminology (you can skip that section if you are already into computer graphics), then I will dig into the proposal and see what it can do. I’m basing this off the spec as I don’t have a build to play with.
What’s slated for CSS4 Selectors?
The CSS Working Group recently published the first working draft of CSS4 Selectors. “Wait…CSS 4? I thought CSS3 was still incomplete” you might ask. The spec process changed after CSS2.1. Instead of one monolithic spec, CSS3 was broken down into smaller bite sized chunks. Each chunk or module graduate to the Recommendation stage independently when they’re ready. As each module doesn’t depend on each other (typically. Some related modules might have dependancies, such as CSS3 Selectors on CSS Namespaces) work can start on the next level of the module–if there is demand for a new version–after the current level reaches REC. Therefor work on CSS4 specs will go on in parallel with CSS3 modules. The selectors specification is one such module where there is demand for some new features .
September 2011
13 posts
The makeup of the Open Web stack
The Open Web has never had as many capabilities as it has today. We’re seeing an explosion in new or updated specifications, and prototype and stable implementations to go with them. This blog post will look back as the platform we have had available (Called Open Web 0 here) and then looks forward at what we are beginning to get now and into the short and medium term future (which I’ve labelled Open Web 1).
What’s cooking on the Open Web?
There is so much movement with existing, new, and experimental specs that it is often difficult to keep up. Lets have a look at some of them that are being implemented in browsers right now or in the very near future.
Windows 8 on tablets. Genius?
There has been a lot of debate on sites such as Daring Fireball about Microsoft’s strategy of putting Windows 8 on tablets, rather than a version of Windows Phone 7 optimised for tablets. As Gruber puts it:
The Era of mobile dominance is beginning
We’re in the middle of a mobile web revolution. However, its not iPhone, smart phones or the west that is leading this revolution. No, if you want to go to the epicentre of where the mobile web is really changing the status quo and leap frogging the incumberants then you have to go to Africa.
Thousands of miles from the innovation centres of Silicon Valley and the legions of iPhones and Androids, in Africa feature phones are the top dog. But no one surfs on features phones! Wrong. Where in the world are mobile devices creating more page views and unique users than their PC counterpoints? The US? Nope. Japan or South Korea? They’re well known for their technical prowess and eagerness to embrace a mobile digital lifestyle, but nope and nope. Its Nigeria, and probably with a Nokia.
Motorola Classics
Motorola is right up there with the best of them when you consider the seminal phone models that influenced the industry. They have never been as big outside the USA as inside, but those classics mostly had global appeal. As I am shortly joining Motorola Mobility to hopefully kick start a new successful chapter in its storied history, I thought it was worthwhile writing my fist post here on some of the devices that made Motorola great.
