Development

Getting Sass-y w/ Jordan Isip by Jordan Isip

i7c5m8hgjhgm.png
 We'll learn the basics about Sass functionality and then put it all together at the end to build this out.

We'll learn the basics about Sass functionality and then put it all together at the end to build this out.

Join me at the Society of Work co-working space in Chattanooga, TN on Thursday, Nov 20 for a #chadev talk called "Getting Sass-y" - how to take advantage of CSS pre-processors like Sass to stay sane while building out designs.

http://www.meetup.com/chadevs/events/216703892/

 

UPDATE: I put the live coding example on Codepen for those that want to continue playing around with the custom mixin we created for the closed text shadow shade: http://codepen.io/anon/pen/XJJqWj?editors=110

Even More Peaceful Productivity on Taco by Jordan Isip

 New "Focus Mode" feature on Taco that collapses 'For Later' tasks for even more peaceful productivity. Shown with (obviously) fake tasks.

New "Focus Mode" feature on Taco that collapses 'For Later' tasks for even more peaceful productivity. Shown with (obviously) fake tasks.

 

Taco (@tacoapp), a side project of mine with Troy Davis, is a productivity tool that aggregates tasks across multiple services, 'from Asana to Zendesk', to help people stay focused. We're currently in the process of dogfooding a new Chrome extension that brings up Taco every time you open a new tab. This has proved to be an extremely effective way for us to remain focused. Since hitting 'cmd+t' inherently shifts your context, it's way too easy to get distracted and fall into the rabbit holes of Hacker News/Reddit/Facebook or any other social time-consuming vices. With Taco instantly showing up when opening a new tab, it becomes a gentle reminder for my remaining Asana tasks and GitHub issues that I had set aside to work on for the day. This helps me keep my focus and continue plugging away.

One issue we quickly noticed, however, was that seeing all of our tasks each time we opened a new Chome tab was a bit, well...daunting. To remedy this, we decided just the short list of 'up next' tasks would be appropriate to reduce noise and stay within our mantra of 'peaceful productivity'. So after some quick design iterations, we came up we came up with what we've been calling 'focus mode' - a simple and minimal way to toggle the visibility of your 'for later' tasks. Either clicking on a toggler on the left side of the screen (shown in gif above) or by hitting the keyboard shortcut '\' (same shortcut that hides files drawer on GitHub's Atom editor). Also state is saved via cookie so if you collapse and refresh, it will still be collapsed. We're still making small tweaks but we'll be rolling this out to all of our Kickstarter backers soon!

Oh, and on mobile (or slim screens), we simply just hide the toggler via CSS Media Queries:

 
 
 

Taco on Kickstarter: "Basecamp to Zendesk, All Your Tasks in One Place" by Jordan Isip

I’ve been designing and prototyping a web application called ‘Taco' with Troy Davis for the past 23 months. Taco is a productivity tool that brings all of your existing tasks, from all of your existing task services, to one single place. It’s been bringing us peaceful productivity for the past couple years, and today, we are launching a Kickstarter to try to help others stay productive. If you use multiple task services, you should check it out.

Finished campaign at 209% funded with 194 backers!

SASS IE Filters by Jordan Isip

One issue I just ran into was with IE filters on this gradient function I have based on The Ultimate CSS Gradient Generator output. 

=gradient($startColor, $endColor) background: $startColor background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%) background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$startColor), color-stop(100%,$endColor)) background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%) background: -o-linear-gradient(top, $startColor 0%,$endColor 100%) background: -ms-linear-gradient(top, $startColor 0%,$endColor 100%) background: linear-gradient(to bottom, $startColor 0%,$endColor 100%) filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$startColor', endColorstr='$endColor')

This worked perfectly until we tested it on IE. IE’s gradient filter was returning a harsh dark blue to black gradient for any colors that were passed into the function. 

Broken Gradient on IE

To figure out what was going on, I fired up IE on SauceLab’s Cloud VMs. SauceLabs also has a handy program called"Sauce Connect"which allows you to create a tunnel and test your localhost. Inspecting the element using IE’s in browser developer tools showed that it was displaying variable names rather than the values.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$startColor', endColorstr='$endColor')

To fix this, we can use interpolation #{ } to spit out the proper values for the variables:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{$startColor}', endColorstr='#{$endColor}')

Almost done. While I was reading up on IE filter gradients, I found out that the startColorStr and endColorStr colors expect a non-shorthand hex as well as the alpha value. In the setup above, #{$color} in SASS will output the shorthand of the color if available - so #006699 will turn into #069. Luckily, since SASS 3.2, we can use the function ie_hex_str() to convert the colors to full hex along with the alpha value. So all we need to do is wrap the color variables in the IE filter with ie_hex_str. The finished cross-browser gradient function will now look like this:

=gradient($startColor, $endColor) background: $startColor background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%) background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$startColor), color-stop(100%,$endColor)) background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%) background: -o-linear-gradient(top, $startColor 0%,$endColor 100%) background: -ms-linear-gradient(top, $startColor 0%,$endColor 100%) background: linear-gradient(to bottom, $startColor 0%,$endColor 100%) filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie_hex_str($startColor)}', endColorstr='#{ie_hex_str($endColor)}')

So in use, we can use this SASS mixin function by calling:

+gradient(#FAFAFA, #FFF)

This will ouput the following CSS:

background: #fafafa; background: -moz-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -o-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -ms-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFAFAFA', endColorstr='#FFFFFFFF')


HTML Emails with Rails 3.1 by Jordan Isip

joevandyk:

Getting HTML emails to look nice is a pain. Most email clients can’t use stylesheets, so you have to embed all the styles inline in the HTML. You also have to write a separate plain-text version of the email. And popular email clients (Outlook, Windows Live Mail, etc) render html email using some…