OpenWest notes: Do more with LESSCSS

I attended Jake Smith‘s presentation, “Do more with LESSCSS” at the OpenWest conference. Here are my rough notes.

Why use LESSCSS? Be organized in your CSS code — DRY principle (Do Not Repeat yourself)

What is LESSCSS not?

  • doesn’t solve IE or other browser bugs
  • doesn’t save you from yourself.
Gives you:
  1. variables, which are especially useful to help you reference paths or colors or fonts using String interpolation: ‘@{imgPath}divider.png’
  2. nesting. But don’t nest unless you really need to. Never go more than three levels deep on your nesting because it will bloat out your CSS.
  3. Normally, @import slows down page load times, but LESSCSS combines all your imports so that it’s a single HTTP GET.
  4. Hex math to make colors lighter or darker (as for visited links, etc.)
  5. Mixins — the heart of LESS.
  6. if/else — called guards. It looks like a media query.
  7. scope — inherit the closest variable
  8. namespacing
You can have less.js load and compile your less css. But don’t do it. Use CodeKit (a paid tool) instead to compile it before your browser sees it. It will minify it for you as well. There’s also the “Less App”, which is free. SimpleLESS works on Windows and Mac. And there’s LiveReload, which is a paid app for Linux, Windows and Mac. Or use the command line using Node.js’s nvm, then “lessc myfile.less output.min.css -x”

There’s a LESS compiler for PHP, Ruby, etc., but do not use them – they’re not being kept up-to-date.

LESS vs SASS

SASS has a built-in sprite generator. But Jake generates his own sprites. LESS is gaining features of SASS, like @extend.

LESS 1.4 will have (will be delivered by the end of the month):

  1. :extend() functionality
  2. math must be wrapped in parenthesis
  3. variables as default variables
  4. new math functions
  5. convert function: convert(5em, px)

Posted in CSS

Fun and enjoyment when projects involve others

I believe we’re social beings, and that we succeed or fail based on the quality of our interactions with others. Such interactions introduce accountability and are educational and motivating.

Jake Edge reports that when Linus Torvalds was asked what motivated him to write Linux, the answer was that

If Linux hadn’t attracted other people right away, the project probably would have died within six months. But the involvement of others was a ”huge motivating factor” for [Linus] to continue, because it “made it much more fun“.

 

 

OpenWest: Embrace your inner designer

During the first weekend in May, I attended the outstanding OpenWest conference, and enjoyed learning from experts. Among the most interesting sessions was one by Josh Broton titled, “Embrace your Inner Designer“.

Is design important? Yes. It changes how users see your application, how they use your application, and how they spread/recommend your application.

Think in flows, not in screens. Make a list of steps users take to use your application, and then do it yourself, and have your staff do it too.

  1. Users navigate to our site
  2. Users click login button
  3. User enters email address
  4. Enter password
  5. Click login button
  6. System validates credentials
The best marketing is FREE marketing. When your users recommend the app to others.

Design tips for developers:

  1. Use a consistent layout — use a grid system to ensure proper spacing.
    1. e.g. http://5by5.tv, http://panoetic.com
  2. Use white space! It helps users differentiate between objects. Less space creates groupings. It improves your readability and user retention.
  3. Use Color, Size and Positioning to convey importance.
  4. Be Consistent. Use one sans-serif font for the body on the screen. On paper, use serif fonts. On Retina displays, either is okay. Use one other font for accent. Use h1, h2 tags, etc. If you change the font you’re using part way through, it takes the brain a while to switch so that it starts comprehending again.
  5. Icons should only be used to add emphasis. This drives him crazy about mobile apps. If you must use icons, then be consistent, and adhere to UI standards.
  6. Color. Every color should consistently match an action. Remember that 10% of the world is colorblind. Use “Adobe Kuler” to help you pick good color palettes. There’s a CSS plugin to desaturate your website.
  7. Use typical casing. All UPPERCASE is extremely difficult to read. Use a non-monospace font. People use width to help them differentiate words.
  8. Left-align type and objects. Don’t center text or right-align.
  9. Steal/mimic ideas. “99% of creating is forgetting where you stole an idea from”
  10. Navigation MUST be easy. Proper nesting, breadcrumb navigation, and consider touch devices (which have no hover capability).
  11. Keep it Simple. Don’t make your users think. Ever. Buy the book — it’s great. by Steve Krug.
    • But you can let them access additional features or enable them.
    • Search engines may penalize you.
  12. Make action items obvious.
  13. Make important items stand out.
  14. Minimize noise
  15. Omit needless items. “The reduction to the essential has never led to catastrophe.” — Dieter Rams
  16. When in doubt, leave it out!
  17. Keep your instructions simple
  18. Test, test, test
Ask your users if they can do what they need to with your app. Don’t ask them whether your app does what it should.

Twitter bootstrap is awesome for non-designers. You can tell websites that use it because of their look, but that might be okay. (Wikipedia info here)

Audience question: Does Windows 8 suck?

Answer: For my mom, it’s perfect. The use of whitespace is great. However, people don’t like switching to a new design paradigm. He despises the complete and total waste of space in Metro.

Check out Font-Awesome — it helps you know standard icons to use in your application.

Chasing Linux mount point indirection

It can be a challenge to track down what mount point on a Fedora/RHEL Linux box belongs to which physical disk partition when there are several layers of indirection including Logical Volume manager, Encrypted Disks and UUIDs. Fortunately, the computer does it for us most of the time. But when I, as a human being, needed to step in and figure it out, google came to the rescue. Here are my old notes.

cat /etc/fstab (my transcription of the info):
 / is /dev/VolGroup00/LogVol00
 /home is /dev/mapper/luks-625f820f-1aba-45b3-aacd-4d17dcc9240a
 swap is /dev/mapper/luks-a9362b00-c1c6-470f-9b5b-4e062d96ff10

cat /etc/crypttab:
 luks-625f820f-1aba-45b3-aacd-4d17dcc9240a UUID=625f820f-1aba-45b3-aacd-4d17dcc9240a none

sudo blkid
 /dev/mapper/VolGroup00-LogVol02: UUID="625f820f-1aba-45b3-aacd-4d17dcc9240a" TYPE="crypt_LUKS"

sudo lvscan
 ACTIVE '/dev/VolGroup00/LogVol02' [363.09 GB] inherit

sudo pvscan
 PV /dev/sda2 VG VolGroup00 lvm2 [465.66 GB / 0 free]
 Total: 1 [465.66 GB] / in use: 1 [465.66 GB] / in no VG: 0 [0 ]

sudo fdisk -l
Device Boot      Start         End      Blocks   Id  System
/dev/sda2 14 60801 488279610 8e Linux LVM

I don’t like chasing down that many levels of indirection, so I normally try to simplify things on a desktop system by not using LVM.

Experiencing Android on an HTC EVO 4G LTE

In January, I joined the bandwagon and bought a smartphone. I’m frugal, so I went with https://ting.com/ for my provider, and I’m paying about $15 per month for 100 minutes, 100 text messages and 100 MB data, and I don’t get reamed if I go over those limits.

I would have bought an iPhone, since I’ve been using an iPod Touch for the past two years, but Ting only offers Android phones. So I purchased the HTC EVO 4G LTE, which is an improved version of the HTC One X, although it has the dumbest name ever. It’s a fantastic smartphone, has a fantastic screen, and it shopped with Ice Cream Sandwich — the first release of Android that I’ve liked. Now it’s been upgraded to Jelly Bean, which is better in subtle and worthwhile ways.

What’s better with iOS (iPhone and iPod Touch)?

  1. Screen orientation change doesn’t delete data. This is a major black-eye on Android. Every time the screen orientation changes, the app’s UI is destroyed, and unless the developer took special pains, all data is lost. I’ve lost plenty of data (usually paragraphs of notes that I’ve entered with a bluetooth keyboard) this way with my Android, whereas with iOS, it wasn’t a problem.
  2. Universal media control on lock screen. FF, Pause/Play. If Jelly Bean fixes this, then I haven’t seen the fix because HTC’s Sense UI took it away.
  3. Screen orientation lock so that when I’m laying on the couch, trying to read, it will stay in the correct screen rotation mode. As a workaround, I have an app that locks the orientation.
  4. Peripherals. You’ll find a wide range of cases, keyboards, and peripherals for Apple i-devices at Target, Wal-Mart, Best Buy and elsewhere. Not so much for Android devices. Bluetooth peripherals (speakers, headsets, etc.) offer Android somewhat equal footing.
  5. Integration. Our Honda Odyssey integrates beautifully with our iPod Touch, showing album artwork on the in-dash screen, and allowing browsing and selection of albums. With Android, I can play my music over bluetooth, and that’s about it.
  6. Publishers. Everyone publishes content for iTunes and iTunesU.
  7. Easier to manage app notifications — it’s all in once central place. Jelly Bean introduced this ability, but it’s not in one central place. I disable notifications from any and all games. It’s unacceptable for them to bother me, ever.
  8. Updates. With an Apple product, you get operating system updates for three years. Not so with most Android devices. You’re lucky to get one OS update. The solution would be to purchase a Google-branded phone like the excellent Nexus 4, and then you will get two years of OS updates.
  9. It ships with a note-taking app by default.
What’s better with Android?
  1. I can limit data usage for the entire phone, and prevent individual apps from using mobile data. Since I’m using Ting, this is a big deal.
  2. Hardware connectors are cheaper (HDMI output)
  3. Widgets
  4. Google integration and authentication is SO much less hassle.
  5. WiFi Analyzer – is it even possible on an iPhone?
  6. AppLock Pro allows me to hand my Android phone to my children, knowing that they can only access the apps that I’ve allowed. Apple’s guided access is almost as good, but doesn’t allow me to define a range of apps they are allowed to use — it’s on an instance-at-a-time basis.
What’s better with the HTC EVO 4G LTE compared to an iPhone or iPod Touch?
  1. The larger screen makes reading content a much more enjoyable experience compared to my iPod Touch 4th generation.
  2. The EVO 4G LTE allows 32GB storage to be inserted.
  3. The battery is more easily replaceable.
Lessons learned:
  1. Most apps are fantastic on Android, just like on iOS: mint.com, Gospel Library, Pandora, Gmail, Dropbox, Kindle reader, Google Earth.
  2. A purpose-built digital camera is still better. Although I love the camera on the EVO 4G LTE, my Canon PowerShot takes better pictures.
  3. Gmail eats long-typed emails — ones that I type with my bluetooth keyboard. So I don’t trust gmail for anything but reading, searching, and short replies.
Here are my most used and favorite apps for Android: A final note about ting.com: Although they do voice roaming on Verizon’s network when no Sprint tower is available, they never do data roaming. This means that when I’m out-and-about at my city library, or shopping, I don’t have a data connection. For the price, I’m willing to live with it. For a more expensive plan, yet more affordable than Sprint or Verizon, it would have been ideal to purchase a $300 Nexus 4 and use T-mobile as my provider.

Software rot and maintenance

Software doesn’t exist in a vacuum — the environment and its inputs and outputs change over time. So it’s likely to break at some point and will require maintenance.

I’ve got a now-ancient static webgallery generator that I’ve tweaked and used for more than a decade. I enhanced it so that it creates animated gif thumbnails for movie files using a combination of transcode and mencoder. Recently, I added an MP4 movie file along with my photos. The web gallery generator chugged away longer than usual, and I gave it no notice — until it filled up my hard drive.

It wasn’t expecting to encounter an additional movie file format, and when it did, it went with the default of using ImageMagick to generate the thumbnail, instead of using my alternate solution for movie files — and ImageMagick filled up my hard drive with a giant temporary file.

So I edited the Perl-based web gallery program and added .mp4 and .m4v files to the list of special cases to be handled separately. It will work until the next time another new movie file format is encountered, and then I’ll need to maintain it again.

Nearly all software is that way — it must be maintained, or else it rots.

Ubuntu and how to disable advertising

Post-Fedora life with Ubuntu 12.04 has been good. I haven’t upgraded to 12.10 (I’m going to stick with a long-term-support release for now), but I’ve heard from people that refuse to upgrade due to the new advertising that shows up in search results. Apparently, Canonical 1) is trying to find ways of generating revenue, 2) made it very easy to disable the advertising. LWN.net explains what’s going on, and the Electronic Frontier Foundation explains how to disable the advertising.

http://lwn.net/Articles/528781/

https://www.eff.org/deeplinks/2012/10/privacy-ubuntu-1210-amazon-ads-and-data-leaks

The simple command to disable the advertising is:

sudo apt-get remove unity-lens-shopping

If one is concerned about this, it seems to me that one ought to also be concerned about online advertisers and about gmail sorting through one’s email.

 

Norton turns my computer into a snail

We’ve used Norton Online Family for well over a year in order to give our children’s accounts time and website restrictions. During that time, our five-year-old Vista computer became unbearably slow, and it’s been difficult to identify the culprit, since the I/O slowness is attributed to svchost.

My experience with other Norton consumer products has been poor, and so I guessed that by uninstalling their Online Family software, it might improve performance. Since uninstalling it, the computer feels at least twice as fast — for login and logout, for network file copies, etc.

I liked Norton Online Family’s functionality, but I couldn’t bear it’s performance hit to the user experience. Now I’m in the market for another solution. Do you have any recommendations?

Arstechnica: Use your phone as a document scanner

Arstechnica has an article about using a smartphone as a document scanner “in a pinch”. It’s fun to see the possibilities that technology opens up.

Seven years ago, I wanted to scan some journals for archival purposes. Using a traditional flatbed scanner would have taken far too long, and wouldn’t have worked well since the pages were bound. So I mounted my Olympus C-8080 digital camera on a tripod, added crude lighting from lamps, and quickly photographed the pages. It may not be perfect, but it’s better than nothing.