Are we a generation of idiots, smartphones and dumb people?

Remember those days before the world wide web, before social media when we were… well, actually social. We could sit in the same room with someone and chat with them in person rather than via Facebook or Twitter?

I appreciate social media and Skype, living here in the East Neuk of Fife which St Rule regarded as the western ends of the world. It helps me keep in touch, which is better than nothing. But I do love getting together with my friends in real life, which doesn’t happen as much as I’d like.

During this extended period of recuperation from viral meningitis, I have loved spending more time with Jane, Reuben, Joshua and Isaac. Long may that continue.

While I don’t think we’re a generation of idiots, I do think we need to put down our phones a little more often, step out from behind our computer monitors, and engage with the world face-to-face.

And maybe then rush home and micro-blog about it!

Compiling Twitter Bootstrap 2.0 with SimpLESS on Windows 7

Using LESS with Bootstrap

This afternoon, after a couple of hours of poking and prodding various pieces of software, I worked out how to compile Twitter Bootstrap 2.0 using SimpLESS. This is what I’ve discovered so far…

CSS frameworks

Having been an avid user of the Blueprint CSS framework for a number of years now (I created what has become quite a popular cheatsheet for the framework, which even got released with the Joomla! CMS a few versions back) I am aware of its limitations, particularly in the area of responsive web design.

So I’ve been keeping an eye on how various CSS frameworks have been developing, such as 320 and up, Less Framework 4 and Twitter Bootstrap.

Twitter Bootstrap reached version 2.0.0 in late January of this year; the current version is 2.0.3 (released 24 April 2012). I downloaded it last week and have spent a couple of days idly playing around with it. with a view to using it on a future web project.

One thing that I was uncertain about, however, was how to use the LESS files.

LESS

When it comes to CSS pre-processors, such as LESS and Sass, I’m a bit late to the party. What can I say, I’ve got twins and a 16 month old and I still don’t get enough sleep.

Sass claims that it “makes CSS fun again”; LESS that it “extends CSS with dynamic behavior such as variables, mixins, operations and functions.” Chris Coyier prefers SASS. Bootstrap from Twitter uses LESS so I guess, for now, I’m going with LESS.

I’ve dabbled with both LESS and Sass over the last year but not enough to get proficient in either, and certainly not enough to use either in a production environment. One put-off for me, certainly in the early days, was the lack of GUI to compile the files. Sass uses Ruby; LESS uses JavaScript (either client- or server-side).

These days, however, there are a number of standalone desktop applications that allow you to compile LESS code without needing to poke around with command-line commands. One of my favourites is SimpLESS from We Are Kiss.

SimpLESS

SimpLESS is available for Windows, Linux and Mac. It installs as a very simple application onto which you drag-and-drop your directory/folder containing the .less files, click a button and it convert your LESS files to CSS. It’s just a shame that you can’t batch process all the files, a feature that WinLess offers.

By default, if your directory structure includes a \less directory and a \css directory then SimpLESS will compile all your .less files into .css files within the \css directory. Sounds simple enough. No faffing, and you get a very usable CSS file at the end of it all.

Also by default SimpLESS will compress/minify your CSS files unless you include //simpless:!minify in the .less file. I include it at the top of the file.

Bootstrap from Twitter

Twitter Bootstrap 2.0 uses LESS. It has a directory full of LESS files that control every aspect of the framework: accordion, alerts, breadcrumbs, button-groups, buttons, carousel, forms, layouts, etc.

So, if you want 16 columns instead of 12 edit the @gridColumns, @gridColumnWidth and @gridGutterWidth variables within variables.less and recompile. That’s how customisable the framework is.

Except… when I did that I and I used SimpLESS to compile the LESS file I got an error:

Syntax error in progress-bars.less on line 33
Syntax error in progress-bars.less on line 33

Syntax error in progress-bars.less on line 33.

After a little digging around on the internet and I discovered a very helpful post on GitHub. This is what I did…

How to fix SimpLESS to compile Twitter BOOTSTRAP 2.0 on Windows 7

  1. Download and unzip Twitter Bootstrap v.2.0;
  2. Copy the \less directory to a new test directory and create a new \css directory as its sibling, so you will have:
  3. Download and install SimpLESS;
  4. Download the fixed version of less.js from We Are Kiss;
  5. Replace the existing less.js located at
    C:\Program Files\SimpLESS\Resources\js (32-bit Windows)
    C:\Program Files (x86)\SimpLESS\Resources\js. (64-bit Windows);
  6. Run SimpLESS;
  7. Drag your \test directory onto SimpLESS;
  8. Click the ‘reload’ icon against bootstrap.less to compile it;
  9. Success! You will now have compiled .css files in \test\css
Successfully compiled LESS file
Successfully compiled LESS file

A few things I noted:

  • If you run SimpLESS without the fixed less.js file then you will need to restart the application after you copy over the fixed less.js file in order for it to start using the new version.
  • less.js v.1.3.0 from the official LESS website does not work; only this fixed version from We Are Kiss works as expected.
  • The two main files to compile are bootstrap.less and responsive.less.

Time to get creating…

I got a mention in .net magazine (issue 228)

Tweet feed from dot net magazine
Tweet feed from .net magazine (issue 228 June 2012)

Shortly after last month’s issue of .net magazine dropped through the door—I’ve been subscribing to it for the last few years—I tweeted about a keyboard that I spotted in their regular “latest gear this month” feature:

It’s not often I see something in @netmag‘s gear reviews that makes me think “I really want that”. But today: @LogitechUK K750 solar kbd 🙂 — Source

What a very pleasant surprise this morning to discover that I’d been quoted in .net magazine’s Tweet feed round-up on page 12 of the latest edition (issue 228, June 2012) which dropped through my letterbox this morning.

And it’s true. I’d just bought a new keyboard (the Logitech K360) and then I spotted the larger K750 solar keyboard and I have to confess that I coveted it. During Lent.

“It will be mine,” I thought. “Oh yes, it will be mine.”

And a month later it is, and I have a keyboard up for sale on eBay. But that, I suspect, will be the subject of another post, another evening.

What do you think of the new @TweetDeck? My initial impressions…

tweetdeck-new

A couple of days I excitedly downloaded and installed the latest version of TweetDeck, the social networking application that is now being developed by Twitter themselves.

What a disappointment! What have they done to it?!

Can’t distinguish columns

Now, don’t get me wrong. I’ve always had some fairly major niggles with TweetDeck’s usability, particularly if you’re using it to manage multiple accounts. There is no easy, quick, don’t-make-me-think way to distinguish which column is associated with which account.

The addition of a tabs option, or colour-coding columns would go a long way to making the system easier to use. In my humble opinion.

Customisable notifications

But what TweetDeck did excel at, that the likes of Sobees and MetroTwit didn’t was its handling of multiple accounts, and the flexibility in terms of column placement, notifications customisation (what shows, when and where).

That flexibility, particularly in the area of notifications, has now gone in the new instance of TweetDeck. I’m sorry to see it go—it was very useful.

Posting an update

The new TweetDeck also seems to assume that you’ll always be using it in a full-screen (maximized) view. Old TweetDeck worked well in maximized view too, but at least you could still post an update when viewing only one column.

In the old TweetDeck the post-an-update window sits at the top of the column. In the new TweetDeck, however, the post an update window disappears off the edge of the viewport:

tweetdeck-old-postupdatetweetdeck-new-postupdate

The send update keyboard shortcut has also changed, from Enter to Ctrl+Enter (on Windows), which takes a bit getting used to.

Social network(s)

When it launched TweetDeck supported only Twitter, but it soon added Facebook, MySpace, LinkedIn, Google Buzz and Foursquare. I used to use just Twitter, Facebook and LinkedIn within TweetDeck.

When I logged into the new TweetDeck I saw only Twitter and Facebook. That said, within the options I can’t actually see how you would add a Facebook account—but maybe it only allows one, which kind of makes sense, and so these settings have been hidden.

I can understand why Twitter might want to limit the number of rival networks it allows you to access using their application. But similarly, I do wonder if this will drive users away to find other clients that do support the wider range of services that they use.

Private messages

One really neat feature that I loved, and didn’t really think about until it was taken away, about the direct (private) messages (DM) column in old TweetDeck was that you could also see the DMs that you sent other people.

Conclusion

In conclusion I have to say that I’m really disappointed with the new TweetDeck. In many ways it has become less useable and less useful. I suspect that over the next few weeks I’ll evaluate the other social media clients and move to one of those.

In the meantime I still have TweetDeck 0.38.2 installed, so I’ll continue to use it.

  • Old TweetDeck — 7/10
  • New TweetDeck — 3/10

Update

There’s an interesting review by David Bayon on the PC Pro blogs entitled New TweetDeck: more mainstream, less flexible which has one paragraph of the positives of the new version and nine paragraphs of the negatives.

His conclusion:

…for me the new client takes away much of what made TweetDeck so useful – namely the flexibility and control – and replaces it with much of what makes the Twitter web client so annoying. I don’t like the Twitter web interface, that’s why I use TweetDeck. Or at least it was until now. The former buying the latter means that distinction is only going to get narrower from here on in.