I really need to think of a clever name for my blog

Code samples, geeky links and other musings. Note this blog has recently moved from Posterous, so isn't fully back up to speed yet!

This week’s tasty tips…

Some ‘magic’ CSS3 transitions:

http://www.minimamente.com/magic-css3-animations/

 

Starting with the basics, then really getting into the depths, with some top tricks for using browser dev tools. Not had time to read the all, but my favourites thus far:

http://devtoolsecrets.com/secret/console-output-data-as-a-table.html
http://devtoolsecrets.com/secret/console-referencing-the-current-and-previous-element.html

Good modern UI too. Great work all round.

http://devtoolsecrets.com/

 

I don’t often post about design related items, but for app UI/UX designers, here’s a PSD template for creating all-new spaffy (if you like that sort of thing) iOS7 designs. Personally I’m in two minds – layered effects for intuitive understanding of navigational relationships are great. The soft focus pastels? 70′s porn of UI design.

http://www.teehanlax.com/tools/ios7/

Request Quest – HTTP Request Quiz

What causes an HTTP request to be fired?
What *should* cause an HTTP request to be fired?
How can you take advantage of the discrepancies between browsers?
Why are there still SO many damn discrepancies?

Meh – about half these questions can be at least partially answered by Jake Archibald’s (WIP at time of writing) quiz, which is also a nice bit of front end design (so… only works in Chrome desktop atm!), and with a little thought, if you have a captive target browser, another can be answered too.

http://jakearchibald.github.io/request-quest/

If you care to compare, I scored 29.

Fascinating visualisation of billions of geotagged tweets from the European region since 2009
The geography of Tweets

Responsive Patterns Library

A collection of patterns and modules for responsive designs.

http://bradfrost.github.io/this-is-responsive/patterns.html

Direct config of Linux firewall with iptables

There are several firewall applications for Linux, but what you may not realize is that, at the heart of all these programs is a single all-mighty application that is built right into the Linux Kernel: iptables. This is the Linux firewall. No matter which program you use to configure your firewall under Linux, it ultimately all comes down to iptables. All that these other programs do is configure it.

So, here comes the question: if those programs simply configure iptables, why not simply configure it directly yourself? Doing so is easier than you might think!

The Linux Firewall

Free Javascript books online

http://jsbooks.revolunet.com/

woops! Clearer PHP errors

A handy library for improved clarity when debugging in development environments. PHP juniors will probably find this especially helpful

whoops is a nice little library that helps you develop and maintain your projects better, by helping you deal with errors and exceptions in a less painful way.

http://filp.github.io/whoops/

Nettuts tutorial:

http://net.tutsplus.com/tutorials/php/whoops-php-errors-for-cool-kids

 

 

Justification for marginless RWD

Deliberately disingenuous post title aside, this is some very clever stuff.

I would very much like to try making the line breaking element a pseudo-element.

While working on a project early last year, I quickly became frustrated having to re-calculate the margins between menu items in my full-width footer nav each time the client requested a new link in the menu.

Thinking about how “justified” text in Microsoft Word fills the entire width of the line by creating even word spacing, I wondered if the same principle could be applied to a menu of text links in HTML. Knowing that ‘text-align: justify’ was a long established CSS property (the descendent of HTML 4  attribute align=”justify”), I did some Googling for answers.

In its natural state, ‘text-align: justify’ will not work unless the contents of the line are long enough to cause a line-break. Otherwise, the text remains left aligned. Incase you’re wondering why this is, it’s because in a typesetting situation this is the desired behavior - the final line of a block of justified text is always left aligned. Perhaps this was an oversight when the CSS spec was designed, but even if we only have one line of text, that one line still behaves like the final line.

It took me a few tries, but we can solve this problem by giving 100% width to an invisible inline element at the end of the line (shown in purple for demonstration purposes). As this “break” element is too wide to share a line with anything else but itself, it causes a line-break, thus becoming the final line, and  forces the words before it to justify.

Text-align: Justify and RWD

[link] Improving the security of your SSH private key files

Ever wondered how those key files in ~/.ssh actually work? How secure are they actually?

As you probably do too, I use ssh many times every single day — every git fetchand git push, every deploy, every login to a server. And recently I realised that to me, ssh was just some crypto voodoo that I had become accustomed to using, but I didn’t really understand. That’s a shame — I like to know how stuff works. So I went on a little journey of discovery, and here are some of the things I found.

 

http://martin.kleppmann.com/ssh-keys.html

Devtools, repaints and ajax uploads

Some recent interesting links from the industry:

HTML5 Rocks: Avoiding unnecessary repaints

Screencast: Improving Your 2013 Productivity With The Chrome DevTools

Mini AJAX upload form with drag & drop functionality