Tag Archives: css

Links from the past few months

I haven’t blogged for a log while now, and have quite a few interesting things I’ve read and found that I’d like to note and share.

General

JavaScript

Web

Recent links

JavaScript

CSS

Web

Other

Interesting little Java and Web things learnt this week

Java’s Collections.unmodifiableCollection doesn’t pass equals and hashCode to the backing collection. I’m surprised I haven’t come across this before!

The user-select CSS property allows you to prevent selection of certain content. As the link explains, it’s useful for preventing accidental selection of icons next to buttons. A certain well known UK high street electronics shop’s website also uses it to prevent text selection, presumably to prevent you copying product names into price comparison sites. It’s not reliable or widely supported though. The same effect can be had by doing a preventDefault (or return false) in the “onselectstart” event handler (again doesn’t seem to be standard).

Continuing on the theme of text selection, I find the auto highlighting of library URLs on hover on the cdnjs website quite useful. It’s achieved using the Selection capabilities of the DOM, which allows you to get or set the current selected text.

Links from the summer

Development

CSS

JavaScript

Web

HTML5

Java

Links from the past four weeks, 7th July edition

JavaScript

CSS

Java

Development

  • https://www.youtube.com/watch?v=UMnZiTL0tUc – The Secret to Safe Continuous Deployment: how a team at Google uses “perceptual diffs” of screenshots of their web application to detect things that usual forms of automated tests won’t

I have a few more interesting things queued, they’ll have to wait until next time though as I haven’t had time to read them properly and/or play with them.

Links from the past three weeks, 9th June 2013 edition

Web

JavaScript

CSS

KnockoutJS

Other

Links from the past three weeks

Posts by LinkedIn on how they used HTML5 local storage and implemented smooth infinite scrolling for their new iPad app:

Others:

Use offsetHeight to force redraw between CSS transition changes

Often when using CSS transitions, I need to manipulate the same elements sometimes with transitions and sometimes without.

A simple example is moving an element off the page immediately, then transitioning it back in. Due to browsers compressing property changes behind the scenes, simply adding a “noAnimate” (transition: none) class, setting left, removing the class, then setting left again results in the element being in the right place, but without any transition.

I was previously told that the solution was to put the last two steps in a setTimeout callback – and that works. However the code quickly becomes messy in non-trivial situations. While reading today, I found that all that needs to be done is to force a redraw in between, which can be done by accessing the element’s offsetHeight.

Example here: http://jsfiddle.net/nzW24/

Links of the week ending 28 April 2013

modern.IE

Microsoft’s just launched modern.IE – a collection of tools which aims to make the task of  testing web pages and applications on IE easier.

The main tools of interest are an online page scanner (no good if your page isn’t public), and virtual machine images (now for some additional platforms, including VirtualBox) for browser/OS combinations going back to IE7 on Vista.

Also came across the IE10 compat inspector script, and a good post about best practice when using vendor prefixes via the new site.