How to Backup Your Inboard Collection with Dropbox by Jordan Isip

Screenshot of Inboard App

Screenshot of Inboard App

Over the past few days I've been diving into Inboard app to manage random inspiration photos and screenshots I've run across. Overall, the app works exactly as I expect (similar to managing a Lightroom collection) and I've been absolutely loving it. 

The only issue I've found so far is that you can't easily backup your collection to the cloud. Apparently it's on their roadmap though. But until cloud backup is officially supported, you can use a symlink to backup your collection to Dropbox. A symlink is just a special type of system file that references another file or directory (in this case the Invision collection).

If you look under the hood, Inboard stores your collection data in:

 /Users/[your user name]/Library/Group\ Containers/V7X89GG36Z.com.ideabits/Inboard/

What we want to do is setup a symlink reference in your Dropbox folder that points to this Inboard collection in such a way that Dropbox thinks that the files are located inside within your Dropbox folder. We can do that by simply using Terminal to create the symlink:

$ ln -s /Users/[your user name]/Library/Group\ Containers/V7X89GG36Z.com.ideabits/Inboard/ ~/Dropbox/

Once your symlink is added, you should see the symlink pointer in your Dropbox:

Clicking on that folder will bring you to the original folder, but if you go to your folder on Dropbox.com, you can see the files are being properly backed up:

While you won't have full access to all Dropbox functionality (like share links on right-click pull out menu), you at least get peace-of-mind that your collection won't be lost if your hard-drive crashes.

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

Leica T (Type 701) Hands-On Initial Impressions Review by Jordan Isip

The New Leica T (Type 710) Announced Earlier Today

The New Leica T (Type 710) Announced Earlier Today

I'm a huge fan of Leica. I love their extensive history, their opinionated product design, and even the luxury brand that they've carefully cultivated over the years. I've personally owned and shot with an M9-P, X1, M6, and various Elmarit, Summicron, and Summilux lenses. Although I have shot some of my favorite photos with these systems, I've sold all items listed above except for my film M6 and 50mm Summicron lens which I'll hopefully keep for my lifetime.

While I still really enjoy the M system, the size and weight has become an issue for the way I shoot. M bodies, especially digital versions, have been getting bulkier and heavier with each iteration and they have become a reminder that I haven't been to the gym enough to comfortably carry around that amount of girth and weight all day. So over the past year I've been in search for a compact system that would provide a similar shooting experience I get when using my trusty film M: extremely responsive, no lag, long battery life, discreet in operation, great image quality, interchangeable lenses, ~1.5x or less crop factor, small in size and relatively lightweight. I've gone through numerous cameras during the search and I'm currently using and have been quite happy with the Fuji X series. Although, having shot with the Fuji for the past few months, I've been finding myself longing for the Leica signature colors and the feel (not the weight) of M bodies. There is a certain feeling of confidence that oozes from an M body that makes me want to use them. It's most likely all in my head, but whatever gets me to shoot more is good enough for me. So it's no surprise that I was excited about the announcement of the Leica T earlier today. Finally, a compact digital Leica system with interchangeable lenses. Details of the full announcement.

Lucky for me, there is a Leica store close to my office in SoHo (NYC) so I had the opportunity to stop by and play with it in person.  Below are my initial thoughts on the handling of the camera. If you are looking for a full review with specs and photos, there are links at the bottom of the post to full and much more informative reviews. 

Still from Leica's "The Most Boring Ad Ever Made?" Advertisement

Still from Leica's "The Most Boring Ad Ever Made?" Advertisement

Love

  • Body - The design and craftsmanship of the hardware is exactly what you'd expect from Leica. This isn't a rebadged Panasonic/Sony, this is a Leica from the ground up. The body is made out of a single block of aluminum. According to Leica, they spend 45 minutes polishing the aluminum by hand. I'm still thinking about how nice it felt while I type this. It seriously looks and feels sexy. It's like Apple gave birth to a camera. It's well balanced, controls are in the right places, and feels right in the hand.  It inspires me to want to take photographs with it - which is something very few cameras do.

  • Shutter sound - quiet yet confident sound.

  • 23mm F/2 Summicron Lens - The lens is small and light. Very well balanced with the body. Auto-focus with the Leica T seemed about what I was expecting. Not DSLR fast but similar to what I've seen on Fuji X100. Maybe slightly slower than the Fuji XE-2. Hard to gauge since I only tested it in the store's lighting conditions.

  • Strap - Leica completely redesigned the way the strap hooks up to the body. It has a very seamless look and the rubbery strap feels nice in use. Very well done considering the strap for the Leica M9-P seemed like an afterthought.

  • Images? - I didn't get to test it but from what I've seen online, the image quality and colors look great. Or at least good enough for what I'm looking for.

Meh

  • Control dials - due to their lack of physical buttons and lack of aperture control on T system lenses, I understand the need for Leica to make these dials contextual. Having said that however, part of me wishes there was a single dial on the back for aperture and the dials on top were similar to the Leica X series with a dedicated shutter speed dial (with auto mode) and exposure compensation dial so I could set these without having to look at a screen. 

  • Electronic Viewfinder - The EVF itself has a decent display, I'd say on par with the Fuji X100. There is an eye-sensor which is nice but, unfortunately, there was some noticeable lag switching between LCD and EVF. 

  • Adapter - I was able to use the T with the M-Mount adapter and 35mm Summicron (EFL 50mm). One major issue is that there is no focus assist on the T. Without peaking or split screen (Fuji style), it can be very challenging to focus fast lenses wide open. There is, however, a zoom feature to help with focus but I imagine that's not the most efficient way to focus during real-world use. Judging from the LCD screen, the image quality with adapter seemed to work very well. No noticeable vignetting or image quality issues. But it's hard to say how it will look once viewed on a big monitor or when using wide angle lenses. Oh, and I really wish the adapter wasn't another $400.

  • Touchscreen - Leica isn't known of their software so on one hand I'm quite impressed with how far Leica pushed their comfort zone. For the most part the touchscreen works well and is intuitive once you understand the controls. It's just not particularly responsive and fluid if you are comparing them to iOS interfaces - which is easy to since it feels like an Apple device. But it works well enough; swipes and other gestures just have to be a bit more deliberate. 
  • Available lenses - The Leica T launches with the 23mm Summicron and a slow zoom lens that I didn't even bother playing with. 
  • Cost - cost is always an issue when it comes to Leica products. They aren't as mass produced so there will always be a premium because of that. $1850 body, $1950 Summicron lens, $600 viewfinder, $300 adapter - over $5k after taxes.
Leica T with Flash, Viewfinder, and Adapter accessories.

Leica T with Flash, Viewfinder, and Adapter accessories.

Hate (hint: software)

  • Remember when I said it's like Apple gave birth to the hardware? It feels like Samsung adopted it and wrote the software for it. Ok, it's definitely not that bad, but there are small things that make me sad. Let's hope they fix these in the next firmware update.
  • Can't turn off the LCD when using EVF - When I'm shooting, I hate using the LCD. I don't want it lighting up the room (even if it's just showing my settings) when I have the camera on in my hand. I only want to use the LCD for playing back photos and modifying settings, I wish there was an additional button to turn on and off the display. Or even have some fancy gesture to do it (I'd rather have the button). 
  • Can't turn off photo review - Why?? I don't want to see the photo that I just shot. I know what I just shot, I pushed the shutter button after I composed my photo. I'd rather be composing my next shot. 
  • Lag time - It takes a little over a second for the camera to start up and it takes another half second for the display to show up in the EVF. While this doesn't seem like much, it might just be enough to miss candid shots due to the delay.
  • Viewfinder - I really wish the Leica T was designed with an integrated viewfinder. 
  • This is a nitpick and a personal preference, but I hate how prominent their red dot badge is. I completely understand their branding desires and that people pay a premium for the red dot. However, for me, I really wish they had an option for a classy understated treatment like older film Ms or even the newer Leica M9-P. 
My old M9-P with gorgeous top plate only branding. I wish Leica had options for a less branded camera like this one.

My old M9-P with gorgeous top plate only branding. I wish Leica had options for a less branded camera like this one.

Conclusion

As I write this, it's become painfully obvious that the T wasn't designed for people like me in mind. I'm one of the probably dozens (DOZENS!) of people looking for a Mini-M and the T is unfortunately (for me) not it. That's not to say it's not a beautiful camera and well designed camera. It's definitely unique camera that looks and works great but it's just not exactly what I'm looking for right now. Would I ever buy one? I'd have to play with it more but I'd definitely consider it after it's further developed. It would be really nice to share Leica lenses between my film and digital cameras. However, the software issues I mentioned above will need to be fixed along with some sort of focus assist for manual lenses. Until then, I'm happy with my Fuji XE-2 (or at least I'll keep telling myself that).

 

Further reading:

 

Buy:

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


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…