The ‘Web vs. Native’ argument shouldn’t exist. We should be working on a unified solution, mixing the visibility of the Web with the raw power of native applications.

Reverse scoping

This is a feature that’s explicitly documented for SASS, but it’s also possible with LESS. The & operator can be used to reverse the scope of the selector:

Unfortunately, you are limited to just adding something before or after the parent selector (i.e. you can’t intercept the selector half-way through), but it’s extremely useful in most situations. Especially for Modernizr, as you can see!

CSS3 Mixin trick

I know a lot of people use the Compass framework, but I think something like that is overkill. Here’s how I write CSS3 properties that have multiple values:

Readability

I think LESS’s main drawback is readability. To allieviate this issue, I have gone away from my normal method of CSS formatting, and tried to follow these conventions:

• - Use simple comment-drive dividers before any nested selectors that are targetting a different element.
• - Whenever possible, place the selectors which are directly modifying the parent element at the top of the nest.
• - Avoid resorting to single-line selectors within nested selectors. Keep everything constant. (… unless it’s a ‘dictionary’ of modifications, such as a heavy list of different background colours)

Here’s a quick example:

Semantic grid

I eventually got round to trying Semantic.gs on a project, and it’s great! I’ve always been an advocate of rapid prototyping with column classes on elements, but this now means there is literally no need for it.

It has got a few niggles, for example .push and .pull don’t always work on nested fluid grids, but the amount of coding you save negates that anyway.

Go to http://semantic.gs for more information.

Here’s a few nuggets that are definitely worth checking out:

The UI for Scorekeeper

This is just beautiful to look at – to the point where I almost want a PlayBook. The transitions are extremely user friendly: for example, any designed information is persistent, i.e. it stays on the screen throughout scenes, if it makes sense to do so. I think this is something that is often overlooked in UI design (particularly on the web).

CSS3 Matrix Mapping

I was starting to think that people had stopped playing around with CSS3 transforms for a while, until this turned up. I think it would be interesting to see the Matrix used for 3D transition effects. It runs very smoothly.

jQuery prepareTransition plugin

The idea of this jQuery plugin is fairly simple, but it’s an intuitive way of keeping your JavaScript as DRY as possible when animating using CSS3. It essentially toggles a class when an element is transitioning.

jQuery Publish/Subscribe plugin

I’ve got to admit, the concept of pub-sub is fairly new to me, but this plugin seems like a great way to get learning the asynchronous pattern.

Kippt - online bookmarking

God knows how many online bookmarking services there are out there, but this one has been catching the attention of a few people this week, and I’m guessing it’s mainly down to it’s UI not being a piece of turd *cough*Pinboard*cough*.

Kirby - a file-based CMS

When I first saw this, I thought it was going to be some kind of retro SQLite mashup, but this ‘NoDB’ CMS actually seems pretty fresh. The jQuery-style API looks interesting too.

That’s what a week of the web looks like in 2012! Hectic, but creative nonetheless

Admittedly, it’s useful if you definitely want to *hide* content from certain users. But seriously, how often do you want to do that? It’s not that often that you want to slag your new boss off… surely?

Circles should be collaborative, subscribable spaces.

I’m Joe, and I’m interested in UI design, inspirational talks and snowboarding; but I can’t stand that hipster-looking photography that’s as common as muck. And I really want to follow Dave the Rails developer. The only problem is, he uses Instagram a bit too much.

But what if all our favourite apps out there had a standard format for only subscribing to certain topics (whether it’s a service, hashtag, etc.) from a particular user? That means I could pick-up all the latest Rails advice; whilst letting him live his hipster lifestyle for a few more months. Everyone’s a winner.

No more blacklists.

I know that certain third-party apps, like TweetDeck, let you “mute” content from services and hashtags. But that’s such a negative way of looking at the freedom of content. We all know what we want.

I’ll leave you with this thought, and maybe even you’ll go off to build the next Twitter. But I’d rather Twitter and Facebook read this instead, came up with an open standard, and we all lived happily ever after.

Either way – I’m off to party on a school night.

I really need to sort my workflow with everyday technology. The fact that I’ve even wrote this kind of document assures that I’m going insane with it all. So, I figured I’d share my notes…

GTD & Notes

• Reminders on iOS is absolutely shocking.
  • Things is a lot better. I think I’ll move back
• I often still reside to use the Notes app on iOS. But I feel like these are so enclosed.
  • Yet, EverNote looks a bit heavy.
  • Need a better, lightweight option.

Consuming content

• Flipboard is absolutely awesome for reading.
  • I need to see if I can get BBC News onto Flipbord
  • I need a proper newspaper that I can read, but something that can be integrated into Flipboard – The Guardian?

Movies

• I’ve recently built up a habit of using IMDB for reviewing films. But I feel like nothing is being done with this data to any extent.
• Flixster feels more social, but its UI is extremely amateurish.
• Can IFTTT sync both of these services??

Social

• Forrst is ok. Maybe I should just take the RSS feeds and use them for regular use (and then just post to Forrst when I’ve got something to share)
• 52Network has potential.
• Google+ is just shit (apart from the stuff that Paul Irish puts on it.)
  • Is there any way I can delete this, whilst still retaining my Google Profile?
• Massively intrigued by Path , but my network doesn’t seem to span it. Plus, I quite like the Facebook timeline, and I’m happy with keeping my Facebook network quite small.
• I don’t have the passion to take pictures, so Instagram really isn’t for me. But I do like seeing photos that people take sometimes. (As long as they dont use that crap tilt-shift lens)
• Twitter is still top priority for inspiration and news
  • Do I need to start following more people?

Music

• I’ve now got iTunes Match – will feels pretty good so far.
  • I like the AppleTV integration
  • The fact that you have to clear your current music sync from any iOS devices if you want it to use Match is ridiculous.
• Spotify Premium still rules for me.
  • I just wish you can bookmark albums on it.
• It’s an absolute shame that these two services are two different beings.

Bookmarking

• I need a service for my bookmarks.
  • Pinboard looks a lot better than Delicious these days. This can be then hooked up to TweetBot.
  • I’ll just use Chrome Bookmarks for regular use sites.

Writing

• I’ve just come across another major issue.
  • I really enjoy writing in IA Writer. But then I came to share this document.
    • Ended up reformatting the whole thing in Google Docs!!!
    • And then again for WordPress. (Just because I changed my mind!)
  • Is there any way to share Markdown documents on the Web? (Without using a static generator)

As an aside, I think it’s staggering that we actually use all these services. We must be able to do something about it, and converge these apps into ‘patterns’.

But I now feel like it’s time for it to evolve into something else entirely.

Masked dividers

View on JS Fiddle

An extremely common design technique is to make a heading with a mask on a divider. Yet admittedly, I’ve always struggled to think of how to do this in CSS. Turns out, it’s actually quite easy, and well supported in browsers.

First of all, the H2 element is displayed as ‘inline-block’, which allows us to center a block-level element, but still have a flexible width. Then, it uses both the :before and :after pseudo elements, to create a border effect, placed on the left:0 and right:0, respectively. Each of these elements is ‘stretched’ out as far as possible using a negative margin, and an equal-unit padding.

You could take it even further and use background images, or whatever.

Rolling text effect

View on CSS Desk

Something that I’d always wanted to achieve (but only in a clean fashion), was the rolling effect on text, which was often found on Flash website navigation items. I still think this effect looks awesome, and it’s now just as fast and effective with CSS3.

This is very much a ‘trick’. It makes use of both the ‘top’ and ‘margin-top’ property, on the relatively positioned anchors. Here’s how it works:

1. 1. The top margin is transitioned so that the text falls off the navigation. This takes 0.3 seconds
2. 2. When that transition is half-way through (so it’s only just out of sight, the top property flicks (without a transition duration) to the text is still out of sight, but on the upper side instead.
3. 3. The top margin transition finishes, so that the text appears to be in the same place as where it started.
4. 4. The transition is only applied to when you mouse-over, so when you mouse-out, it flicks back to its original state. But because this original state looks exactly the same as when the transition ended, the user doesn’t notice!

The finishing touch comes with how fast the transition is, and what kind of easing is used. It wouldn’t work the same without those settings, in my opinion.

Creating friction with 3D CSS

View demo

This one is a bit harder to explain, as it’s not just CSS3. But it wouldn’t be possible without 3D transforms. I’ve recently being looking into basic physics for animation, and one of the most effective ones for ‘drag and drop’ is adding friction to your objects. It’s a simple calculation, but it took me a while to get my head around.

The idea is that you’re constantly calculating the different of the current ‘x’, and the cursor’s position. This is now made possible by the supposedly lightweight ‘requestAnimationFrame’ function, which in my implementation uses the ‘tick’ function as a callback for this. Both the translate AND rotate make use of the delay. So if you move the cursor really fast, the object will look like it’s being “dragged”, as it rotates more than usual.

A few tips when working with 3D CSS transforms:

1. 1. Try and separate your transforms between different elements. As far as I know, it alleviates any browser strain when you’re translating with the parent, and moving with the child element. I may be wrong, but this is what I’ve found from my experiences.
2. 2. Rounding a pixel value, using a double bitwise operator (~~), actually smoothens out animation.
3. 3. Applying a subtle box shadow will give the effect of an anti-aliased object. This does have an impact on performance sometimes, so be careful.

That’s everything for now. If this has inspired you to produce something else, I would love to hear about it!

Update: It turns out that jQuery does have this functionality built-in. When using the ‘toggle’ and ‘toggleClass‘ methods, you can choose to override it with the ‘switch’ parameter. Every day is a school day! I still think the principle of this code is one to think about.

The origin of jQuery’s beautiful design mostly comes from chaining selectors. Unfortunately, chaining becomes a lot harder to achieve when conditional statements get involved. Here’s some code that I would often find myself writing:

This is what I would call ‘wet’ code. Everything that’s important (the selectors and its related methods) is repeated, using a conditional statement. The main problem lies in that jQuery doesn’t see ‘show’ or ‘addClass’ as TRUE; not does it see ‘hide’ and ‘removeClass’ as FALSE. Luckily, ‘showIt’ is a boolean, and we can use this to our advantage. Here’s two helper plugins I’ve made to keep your jQuery chaining in shape.

So with this little bit of extra helper code, we can achieve the following:

It might not be quite as readable, but I think it’s important to make jQuery’s common DOM methods ‘boolean’ based.