Carousels are one of the most common components web developer’s build. As other trends come and go, carousels tend to stay.
Recently I’ve been using the nth-child CSS pseudo selector when building CSS3 demos for my “Introduction to CSS3″ series on The Daily Egg; to the point where nth-child became a bit of a habit. For those of you who have not come across nth-child, it allows you to target a particular child elemehnt by number or a simple formula.
So I was building a carousel the other week and I used nth-child to create my dummy carousel items. Each item had a different background color.
It was all working splendidly until I needed to make the carousel loop. Then as it looped, my nth-child changed. As you are probably aware, the problem with looping carousels is that you have to repeat your items so something can animate in from the left or right.
Repeating items in a carousel has always bothered me. It feels like a messy solution, but it gives the right visual appearance and works cross browser.
Then I began thinking about a presentation I gave recently on “Layouts of the Future”, in which I spoke about current hacks we have to make to create CSS layouts and how help is round the corner with the likes of columns; CSS Regions and… flexbox.
Flexbox allows us to build layouts horizontal or vertical layouts with relative ease and flexes the contained boxes to fill the area available. But, one of the other cool things about flexbox is that you can rearrange your layout by using the box-ordinal-group property.
A rainy April Saturday in North Greenwich (London) was the host of this year’s State of the Browser; where a representative from four of the five browser vendors spoke about how their browsers have progressed in the last year and what we have to look forward to going forward.
The day was structured as five talks; followed by a choice of 6 breakout sessions before concluding with a vendor Q&A.
Recently I’ve been looking in to how the EU Cookie Law affects web sites serving users in Europe. The law was introduced into EU legislation in May 2011 and comes into effect in the UK on 26th May 2012. While this law currently only effects European countries, it is likely that the US will follow suit and implement a similar law in the years to come.
Disclaimer: I am not a lawyer, not am I a representative from any authority on cookies. These are my interpretations of the cookie law and (like all my blog articles) these views do not represent the views of my employer or associates. If this subject matter is of interest to you, it is important that you do your own research on the cookie law to ensure your website is complying with the law.
What is the Cookie Law?
The cookie law is a new EU privacy legislation that requires websites to provide clear and comprehensive information about the cookies being stored; and obtain consent from visitors in order to store or retrieve any information about the user.
In the UK, this becomes law on 26th May 2012 and sites that do not comply could be fined up to £500,000.
“Responsive design” is the latest buzzword in a long series of web buzzwords which has featured “XML”, “Web 2.0″ and “HTML5″ to name a few; but it’s one that shouldn’t be dismissed.
The days of assuming your user is browsing your website on a desktop or laptop machine are over. Mobile users are no longer restricted to people trying to find directions to a restaurant or building – they now sit at home on their comfy sofas and use their mobile phones to browse the web; they sit on trains and use their mobile data connections to shop online; they sit in parks whilst eating their lunch reading the latest news or tweets; or watching a TV catch up service. The human population are becoming slaves to their mobile phones as CNET’s recent photo gallery showed.
Whether this is a good thing or a bad thing doesn’t matter. It’s now a fact of life. Netflix’s recent comment about supporting almost 1,000 different Android devices using their service means that we cannot guarantee a certain screen resolution – unlike the iPhone, Android device screen sizes (and capabilities) vary immensely. And Androids are becoming more popular – we can’t just ignore them.
But mobiles aren’t the only device. Tablets are a whole new kind of device that have appeared in the last 3-4 years, with another set of screen resolutions. TVs and game consoles now ship with web browsers; and the desktop and laptop PC/Mac are far from dead either. The days of opening Photoshop, starting a new document; typing in a width and height and ignoring everything else are well and truly over.
Chris Coyer’s recent slideshow “What We Don’t Know” not only covered responsive design but a whole host of other user uncertainties and is well worth a read; but my favourite slide by far was the following one (even though it didn’t include any mobile resolutions):
So how do we deal with this? Like everything in the world of web development, there is no one answer; and also it’s messy. The usual story then!
Currently if you have a page where content is separated by a drastic change in layout you will need to include part of your content inside one element, and the other part inside another element. If you’re using a CMS, this means you need to have two content fields for what is essentially related content.
CSS Columns already offers functionality to separate content in to columns, but CSS Regions provide greater control and flexibility of content on your page by allowing content to flow through the page structure, whatever that structure is.
CSS Regions are defined areas of the page where content can flow. If the content is too large for one region, it will continue to flow in to the next region. If the page is resized or the text size is increased, the page will automatically reflow through the regions. The following diagram shows a couple of simple examples of where regions could be useful:
With CSS Regions, we need to specify:
Our content source element(s).
The elements of our page we wish to populate (our regions).
Since Firefox 4 last March, Mozilla have begun to include their own developer tools built in to the Firefox browser. Whilst Firebug still remains available as a plugin and is still supported by Mozilla, the browser vendor identified the need to include built-in developer tools – possibly so it has more control over future features and targets of developer tools within Firefox.
Last May Mozilla’s Product Manager for Developer Tools, Kevin Dangoor, blogged:
At this stage, Firefox needs to ship with a strong baseline set of tools for web developers. Firebug is a standalone project with a lot of history behind it and big plans for the future. We want to be able to build new tools that head in some new directions while allowing the Firebug project to continue to explore their ideas. Our goal is to help the whole developer tools ecosystem. We want to make it easier for people to hack on the built-in devtools, on Firebug and on entirely new experiments, too.
Mozilla have recently released a road map and feature list for the Developer Tools which shows where they intend to take this new toolset in the coming months. If you’ve not yet had time to get acquainted with the new tools, we’ll take a look at what’s currently included; what’s coming soon to the browser and what differentiates Firefox’s developer tools from the other tools available. After all, these tools have the potential to become a web developers new best friend.
My entry in to the competition is a jetpack style game. As the theme of this years js1k competition was ‘love’, the game is called “Cupid’s Heart Collection” and revolves around the user playing as Cupid who has to fly through his love cavern collecting hearts and avoiding spikes. As you venture further in to the cave, things speed up. Your final score is based on Distance * Number of Hearts collected.
Whilst we’ve been busy supporting older versions of Internet Explorer, a few new CSS features for backgrounds have sprung out of the woodwork and in to our browsers.
These features have been hiding behind their more popular gradient background color cousins; but are worth making a note of, especially if you’re creating sites for mobile phones and recent browsers; and the best news is that they are completely prefix-free!
Let’s take a look at what these properties are, what they do and afterwards we’ll have some fun with animating backgrounds. Yay!
I wanted to write up my notes on the jQuery UK Conference as I had an amazing time. Apologies to anybody who follows me on Twitter who didn’t want to know about the conference, you were probably spammed a bit. But shame on you for not wanting to know!! This isn’t a concise write-up of everything that happened, but is more what I took from the conference (what I learnt/found relevant to me .etc)
Yesterday I travelled to Oxford to attend the jQuery UK conference, which the team at White October carefully crafted together. The snow threatened to stop me, but thankfully calmed down by the morning. So a quick hop, skip and jump on to a train and coach; and I found myself in Oxford at the Saïd Business School.
After discovering I was pretty much the only person who hadn’t won a Blackberry Playbook, the White October team kicked off the conference by introducing themselves and their keynote speaker Ralph Whitbeck.