Work

Taco: Now With Editable Labels by Jordan Isip

Full announcement coming soon on the Taco blog, but excited to show a preview of Taco's new feature that was highly requested by our customers - custom task labels.  At times it makes sense to change a task label that makes sense to how it relates to you, but perhaps not to your entire team. Now you can edit the task label for yourself on Taco and not have it be reflected on your associated task service. More info, and hopefully a screencast, coming soon!

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:

 
 
 

SEO Landing Pages on Taco by Jordan Isip

 

Taco is a side project I work on with Troy Davis that started as a solution to our own problems and later developed into a successful Kickstarter project. We are now in the final phases of our public release (sneak peak) and, in the midst of launching, we wanted to put in some thought for SEO marketing for some of that good ol' fashion search engine traffic.

Taco is a productivity tool that aggregates tasks across multiple services, 'from Asana to Zendesk', to help people stay focused. But since everyone have different needs and different workflows, this means we need to support lots of different services (we're up to over 30) and was the entire reason behind our Kickstarter campaign. However, as we scale up our number of services, it quickly becomes more difficult to target search engine traffic on our main marketing pages since page titles, imagery, illustrations, etc. become less focused on individual services. A quick look at Google Keyword Planner/Analysis tool reveal that people aren't searching for "aggregating task services on a single screen" (obviously), they are searching for a direct solution to their problem (again, obviously). Something like "Manage Basecamp with Asana" or "GitHub Issues and Trello Cards". Our attempt to help solve for this was pretty much SEO 101 (maybe 102?) - creating separate landing pages. We did this by reusing modules from our new front page (sneak peak) to create dynamically generated landing pages that targeted this search use case.  By passing in a combination of services in the URL (eg. https://tacoapp.com/manage/github-issues-and-trello-cards) it would result in examples shown and linked to above.  By creating this template, dumping our supported services list + associated example tasks for each service, and adding each link to a sitemap.xml, this produced over a couple hundred different landing pages for each possible service combination.

Implementation note: we also set up URLs so that service slugs only work when they are alphabetical to enforce canonical URLs, meaning /github-issues-and-trello-cards work while /trello-cards-and-github-issues won't.

We'll know more soon about how effective these landing pages are for us as we continue experimenting with this and similar variants the very near future.

More examples:

Follow Taco progress: @tacoapp

 

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')