Author Archive: Strack

Pleasantness in my idiocy

Okay, this is one of those moments when I realized that I’m still a noob in SO many ways, but i really don’t care, because what I found/discovered makes me so happy that it trumps my insecurities.

Being able to cycle between windows in the same app, on a Mac, is something that (until today) I wasn’t aware had a shortcut key.
So, for example, if you have multiple windows of Chrome and you want to cycle between them, or you have multiple emails open in Outlook and want to go between them instead of seeing your inbox, you can simply press this key combo, and it will cycle for you!
Continue reading…

Semiology and Time

Just a quick note so I don’t forget (and will expand on this topic later):

I received the BEST present for Christmas, in the form of the book Semiology of Graphics by Jacques Bertin. This book is pretty much everything you could want in a book, if you’re interested in semiology / semiotics, and infographics.

As I’ve been perusing (totally using that word wrong!) my precious copy, I had the thought occur to me regarding calendars and mixed metaphors.

Way too many years ago, I was working on a project to deliver email cases to customer support reps. The cases needed to be sorted by multiple different attributes, including:

  • Time in queue
  • Category / Type
  • Number of previous replies

 

…among others.  Well, we tried to represent some of these sorting attributes using a file tree component. We quickly learned that you can’t represent multiple attributes in one file tree. You have different hierarchies, and trying to represent them in a single hierarchy is against the laws of physics. Well, it’s against the laws of semiotics, but you get the picture.

So, as I was thinking about that previous debacle of an experience, and about clearly displaying time, it occurred to me that most calendar or project apps- which show a standard graphic representation of a calendar, with each week being a row – mix metaphors:

What you’re after, usually, is a visualization of project resources and ETAs for portions of your project. This type of visualization is best represented by a Gantt-type of view, with a timeline and various project lengths represented easily.

What you end up with is a Calendar with a bunch of bars going across multiple rows, or meaningless dots. The effort to properly visualize such a debacle of an experience is immense, and significantly takes away from discussion or analysis.

It helps me to know that, when I see such a mixed-metaphor calendar project timeline, it’s not my fault that I can’t understand it. Just like my multiple-attribute file tree experiment, it’s beyond the laws of semiotics.

I have some (wicked, wicked) plans on how to resolve this problem, but I’m not quite yet ready to share it. Will expand on this later, but thought I’d get the idea out there and see whatchyall think.

 

-Strack

CSS Vertical Centering? Absolute-ly!

I ran across a pretty wicked-cool article on Smashing Magazine late last night, and decided to do a little experimenting.

It turns out (even though NONE of the browser vendors have addressed this issue) there’s actually a way to vertically center elements.

Distilled, the CSS is pretty simple:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

 

We all know the margin: auto trick for horizontal centering, but if you combine position: absolute, and set the top and bottom properties to 0, guess what? It’s worky for vertical centering as well!

Stephen Shaw’s article goes on to show that it works in most scenarios, including padding, offsets, and even responsive resizing.

I gave it a little run in CodePen, specifically wanting to see what happens when the absolute centering is inside of a container, and you move that container around. The results of my experimentation are here:

Sure enough, the vertical centering stays true to the CSS rules around position:absolute (If the containing element is relative or fixed, positioning — and in this, case centering — is relative to the bounds of the container). As you can see from the screenshot, in addition to the immovable, centered div (with a nested centered div inside of it), there are two fanciful elements, with all their fancy dragging abilities. Each draggable element has double nested, vertically centered divs inside.

In short, it works like a charm.

I did, however, make one modification for text, and that is to treat the div containing text with display:table.
The reason for this is so that we can vertically center multi-line and single-line text. If we employ the vertical centering CSS, like Stephen did, to a div with text, the text won’t ‘cheat up’ on multiple lines. The fix for this is pretty straightforward:

.txt{
text-align:center;
width:100%;
display:table;
}

[Update: the height is automatically calculated, so no reason to set it, unless you maybe want to look at compatibility/fallback -- Thanks Stephen!] You’ll notice the height property is set to 2.4em. Setting the height to this value is a good approximation for the amount of height needed when you have a multi-line text div.

If you want to display a single line in the center, just add the following:

.single{
height:1em;
}

Feel free to play around with the CodePen example, and do make sure to check out  Stephen Shaw’s article.
He did the heavy lifting here, I’m just propagating a great code snippet.

See the Pen here

Or snag the Gist right here

 

-Strack

Shout out to a pleasant design

Well my goodness, I came to make a blog post, and an hour went by with me just tweaking blog settings. Tsk, tsk, tsk…

 

I ran across, of all things, a medical applications review website today, and looking at the design, I was impressed with it. Impressed enough to give imedicalapps.com a quick shout out.

Continue reading…

Adobe Summit is coming up!

March 4-8, in Good Ol’ SLC, it’s the Adobe Marketing Summit.

Why you should attend:
-That dude that jumped from SPACE will be there. He’ll jump on you for $5 I think.
-The Black Keys are headlining. Yes, those Black Keys.
-You want to improve your business.

Here’s a neato intro video:

Swiper, no Swiping… Swiper, no….You’re Toooooo Late!

I’ll expand on this post with a specific example in a few days, but I wanted to get a shout out to Vladimir Kharlampidi for his new Swiper library.

It’s a Carousel, it’s an app-store slider, it’s Windows Metro, all in one slick, performant package. It’s new, it’s FREE, and it just works.

It even asks you to Touch it. How lascivious!

It even asks you to Touch it. How lascivious!

There are some bugs and missing API calls ( .index() and .currentSlide() need to be fixed, and you absolutely need to get to the baseSlides when params.loop = true — I’ll prob. submit the pull requests) so if you want to get programmatic you have to do a little bit of landscaping, but it’s competitive with any other HTML slider out there, works 100% with touch, and it’s fast.

Oh, and did I mention it’s FREE?

Check it out, and tell your friends.

Strack

Seeing the trends, and hanging 10 at CES

CES (the Consumer Electronics Show in Las Vegas) is a pretty interesting place. The sheer size of it makes for so many different and interesting situations that one could find something to write about, regardless of the subject matter.

The subject I’d like to talk about is trends. And I don’t mean what trends are finally here and available as products (multi-touch, waterproof electronics, etc). I mean the trends that are coming up just under the radar, right on the horizon.

See, I’ve been coming to CES for 3 years now, and you kind of get this… Continue reading…

Want to learn Meteor? (updated with Winners!)

As I mentioned several months ago, Meteor  is a fantastic new JavaScript framework.

I like it so much that I just wrote a book about it.

I’m giving away a couple of copies for free, to celebrate and get the word out about Meteor.  If  you want to be entered in the contest…

Continue reading…

Collection of Data Visualization Tools

This is more a note for me to remember the link than anything, but if you’re interested in learning more about HTML-based (or just regular) Data Visualization, there’s an excellent collection of products condensed into one place:

datavisualization.ch

 

My two personal favorites on that list: D3 and Raphael.

D3 is as robust as a cake-loving kid with a slow metabolism (shout out to my brother John!), and there’s a great tutorial for D3 from Scott Murray that will get anyone started. (skip/glean through the first couple of tuts if you’re already a JS/CSS junky)

Enjoy!

-Strack

New Adobe pricing – An honest perspective

 

I ran across this article from TNW, on facebook (of all places).

Now, I don’t want to over-plug the Creative Cloud, but the perspective from this article is really spot on.

Read the Article Here

The price really is amazing for all you get. The only real question is, are you familiar enough with all the products to take proper advantage of such a great deal?

I know for me I’ve avoided using Dreamweaver in the past for HTML / Javascript editing. It just seemed too bulky.  With DW 6, however, I’ve changed my mind. The add-on features it has make it worth learning and using. Yes, [insert your notepad-like editor of choice] will always be faster for quick editing, but the load up time is now tolerable (not the first time you open it after install– that still sucks), and SO worth it now:

  • Refactoring / Code completion is top notch and customizable
  • dynamic parsing of javascript libraries = most comprehensive autocomplete I’ve seen to date
  • live code actually works now – no more save-put-refresh-firebug tango!
  • linked files available and editable in one click (not new, but still awesome)
  • helpers for building apps ala PhoneGap
  • the “Code View” with a couple of tweaks is the best of both worlds: clean & simple IDE, all the bells and whistles are quickly accessible.

And that’s just Dreamweaver. The new Photoshop and Illustrator are amazing, with about 5 other products all getting honorable mention ribbons.

And then– Add the cloud services:  Storage, Collaboration, Test Servers, etc.

And if you’re a student or past customer, $360 for a full year? Ridiculously good deal. That’s less than you spend on coffee.

If you’re one of those people that uses multiple products in your everyday workflow, Creative Cloud makes today a very happy day indeed.

 

-Strack