Everyone Does Everything: How To Work on Teams of Generalists

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

When I first started studying graphic design I remember reading an interview with my favourite studio — the crazy Dutch modernists ExperimentalJetset. There was this quote that stood out — it didn’t mean much to me at the time but now really neatly summarises how I think product teams should be organised.

Q: Can you say how you divide up your workload between the three of you? 

A: We once saw this interview with legendary player Johan Cruijff in which he explained the concept of ‘Totaal Voetbal’. Total Football is a system where a player who moves out of his position can be replaced by any other player from the same team. So the roles aren’t fixed; any player has the ability to be attacker, defender or midfielder. When you think of it, it’s a very modernist, modular system. 

For the past few years I’ve been crafting myself into a weird designer-developer hybrid, whilst trying to convince others to do the same thing. As evidenced by David Cole’s great recent post, this is getting more and more common, but the industry is still catching up to where I think it should be.

At Makeshift—for the first time—I’m starting to connect the dots I first read about in the ExperimentalJetset interview. Whilst in the past I’ve worked with designers who work across traditional graphic design disciplines—as Jetset do—at Makeshift we’re assembling a true full-stack team.

A motley crew of generalists, each capable of handling everything from branding to UX and front-end engineering, to back-end and sysadmin. This is awesome — it’s the team I’ve always wanted to work on, but now that we’ve assembled a team of generalists we’ve found another problem.

No one knows how to work with generalists.

---

In the past I’ve worked on teams of relatively specialised developers. I’d write the odd few lines of Ruby but sticking mainly to design and front-end development was pragmatic if I was in a room with great Ruby developers. I’ve also worked with talented designers, coding features and taking names on the server side. That’s what we do best as generalists — figure out what’s missing from the team we’re on, and get on with it.

We’re like web-flavoured amoeba. Or Robert Patrick’s character in Terminator 2.

It breaks down when working with other generalists though. You know that thing when you’re about to walk into someone on the street? You walk to your left and they walk to your left. You walk to your right and they walk to your right. You either walk into each other (35%) or end up in this awkward, overly polite British stalemate on the pavement (65%). It’s like a shit game of chess in the morning when all you want is to get to a coffeeshop. Nightmare.

Anyway, working on a team of generalists has the potential to be a bit like that. Or a night out when you and two mates wear the same shirt. You know the one I mean — probably that same red, checked one. No differentiation. Who’s going to be the quirky one of the gang? Exactly. Awkward. You’re all going to have to go home and change.

OH MY GOD WHAT SHOULD WE GET THE GENERALISTS TO DO?!?!?!?

We’ve got work to do though, let’s get back to the Kanban board. Not knowing how to divvy up tasks because you’re all equally capable of tackling them seems like a bit of a #firstworldproblem.

It’s definitely a problem I’d rather have than not but in an industry evolving towards generalists it’s also a problem that we need to solve. Annoyingly, I’m a bit short on answers — we’re kind of making it up as we go along, but I’ve noticed a few different working patterns crop up.

The split

For big features it makes sense to break them down into components and divvy up roughly according to ‘traditional’ roles. One of us will design the component and write the front-end code whilst the other implements the tests and server-side logic. This can sometimes result in some ‘smooshing’ even after the two streams are merged to make everything smooth — if we’ve both been working on the same HTML file things can get messy, ya know? If we’re doing this we try to regularly switch roles lest we each fall into ‘designer’ or ‘programmer’ forevermore. That’s not the goal!

The full-stack

A team of generalists affords you the luxury of each player tackling a small feature from start to finish. Design to front-end to tests to Ruby to “OH MY GOD WE’RE GETTING 500s ON PRODUCTION” to more tests to more Ruby to fixing it on IE to finish. Programmers are most efficient when we can hold the entire problem in our head and when you have a really good grasp of what you’re trying to solve it’s nice to juggle the design, HTML structure and your intended Ruby implementation in your head all at once.

If a piece of code is written by multiple authors, none of them understand it as well as a single author would. This is my favourite way of working, but depending on the complexity or scope of a feature it isn’t always feasible. Secret weapon time.

The pair

When I crossed the murky chasm from graphic design to product design and software engineering I was amazed to learn about pairing. The output of a pairing session always feels like more than the sum of its man-hours. This is great and I’d love to be in a position where Natalia (our other full-time hacker at Makeshift) I could pair all day, but we just have lots of different things to tackle and I worry that having both of us intensely focus on one narrow part of a narrow problem at one time would leave other things without love.

That said, pairing is a great way to break down the trickier bits of tasks that you’d otherwise go for a full-stack, single-person implementation on. Having two people look at a screen and hold the code in both of their heads at the same time means you don’t end up stepping on each others’ toes but you also have the increased problem-solving power of two people. A++.

Caveat

This is all rad when you’re working on the kinds of products that we’re building at Makeshift, but it would be naïve for me to think every software company is hacking in the same ballpark. I love the products that we’re making, but we’re not solving the same problems as engineering teams at Google, Facebook or Palantir. I’d imagine that generalists there would be ‘resourced’ totally differently.

The other thing I should note is that as we grow at Makeshift we’ll probably be looking for people with a little bit more specialism on either extreme of the designer/developer spectrum. But hey — this was a post about working with generalists 🙂

Diversity

No matter how little ‘design’ I actually do day-to-day, being ‘A Designer’ is an important part of my personal myth. When a friend brought up designer-as-self-identity the other day I could definitely relate. I started this deep-dive into engineering to enhance my design skills, not replace them. In any case, it’s important to break things up to avoid repetition. The full-stack, single-person small feature thing is great for that, but it’s also nice to do big features in different disciplines. Just the other week I got into some gnarly millisecond-counting performance work. I learnt a lot about different types of caching in Rails and how I could improve my SQL queries but afterwards I was challishing for a meaty bit of visual design.

And so, as a generalist, that’s exactly what I did.

---

This post started out as an idea on HelpMeWrite — an app I’m building to help you become a better writer.

Thanks to Anthony, Sam, Namit, Reuben, Cole, Peter, Anna, Jennifer, Natalia, Stephen, Thomas, Nick, Chris,Denichaud, Nick, Stef, Paul, Klaus, Steve, Jamie, Marie, Lewis, Gaz, Joel, Kevan, Sofia, R2k, Amanda, Jase, James & Marko for giving me the push to write it!

via Hacker News https://medium.com/words-about-design/12e0882c51d1

Hexo – A fast, simple and powerful blog framework

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

Features

• Incredibly fast – generate static files in a glance
• Markdown support
• Deploy to GitHub Pages & Heroku with only one command
• Ported Octopress plugins
• High extendibility & customizability
• Compatible with Windows, Mac & Linux

Install

npm install -g hexo

Update

npm update -g

Getting Started

Setup a project:

hexo init project
cd project

Create a new article:

hexo new "New Post"

Generate static files:

hexo generate

Start the server:

hexo server

Next Step

Interested? Check the documentation for more info!

via Hacker News http://zespia.tw/hexo/

The Hikikomori’s Guide to JavaScript

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

Don’t start with an Application, start with the API. This might seem weird, but it actually makes a lot of sense, because the API defines how other computer things can interact with the data your application manipulates. But hey, why should we leave that as “other computer things”? Let me rephrase:

The API defines how your application (and other computer things) can interact with the data you’re interested in.

My usual design approach is to examine the inputs and outputs of the application, and then design an API that handles such data. Later I’ll stack the user experience and the “glue” code on top of such API to form an actual application.

This fits nicely with the “One Module Does One Thing” approach because then the API defines which kind of data you’re dealing with, and all the meaningful transformations you can apply to such data. Transformations in turn do one thing, and might be grouped logically. Modules are really just a logical group of computations, that it happens to be a file in many languages is just an accident.

For example, let’s say we want to write an application to display Tweets to the user. First and foremost, we examine the inputs and outputs, and draft some types to encode the data in our application (I’m using a type notation inspired by Haskell, but this should be nonetheless pretty straightforward):

-- | A TwitterTweet is something Twitter gives us (the input)
-- (note that this is a stripped down version)
type TwitterTweet
  favorited     :: Boolean
  retweeted     :: Boolean
  retweet_count :: Number

  created_at :: String  -- ^ Serialised Date
  source     :: String
  user       :: User
  id_str     :: String

  in_reply_to_user_id_str   :: String
  in_reply_to_status_id_str :: String
  in_reply_to_screen_name   :: String

  entities   :: { "urls"          :: [Entity]
                , "hashtags"      :: [Entity]
                , "user_mentions" :: [Entity]
                }

  text :: String    

So, the data Twitter gives us is quite a mess, and it’d be really difficult to manipulate that kind of data in our application. We can do better, so let’s define a better type to encode a Tweet:

type User
  name :: String -- ^ The users' screen name
  id   :: String -- ^ Twitter's user ID

type Entity
  url          :: String
  expandedUrl  :: String
  displayUrl   :: String
  indices      :: (Number, Number)


type Text
  plain    :: String
  entities :: { "urls"          :: [Entity]
              , "hashtags"      :: [Entity]
              , "user_mentions" :: [Entity]
              }

type Tweet
  id            :: String -- ^ Unique identifier for this tweet
  user          :: User   -- ^ The user that tweeted this
  inReplyTo     :: Tweet
  source        :: String -- ^ Which application was used to compose this
  date          :: Date   -- ^ When this tweet was crafted
  favourited    :: Boolean
  retweeted     :: Boolean
  retweetCount  :: Number
  text          :: Text

So, now User and Text are separate types, this is because they make sense outside of the context of a Tweet and we might want to manipulate them separately. There’s no reason to provide a complected type to a function that only needs to know the name of a user, for example.

Once we’re done with the types our application needs to manipulate, we can draft an API that provides the primitives to manipulate these types, given the operations we’ll be applying to them and the output.

-- * Type conversions

-- | We need to convert from Twitter format to ours
normaliseTweet :: TwitterTweet -> Tweet

-- | Convert Twitter Date serialisation to actual DateTime
parseDate :: String -> Date

-- | Extract the User that composed the tweet
twittedBy :: TwitterText -> User

-- | Extract reply information
repliedToUser :: TwitterText -> User
repliedToTweet :: TwitterText -> Tweet

-- | Extract the Text
textFor :: TwitterText -> Text


-- * Display transformations
-- (These are application-specific because they only make sense in the
-- context of user-facing HTML pages)

-- | We want to display a Tweet as HTML
renderTweet :: Tweet -> HTML

-- | We want to display a Text as HTML
textToHTML :: Text -> HTML

-- | We want to know the relative time since the tweet
fromNow :: Date -> String

-- | We want to display a link to a User
linkToUser :: User -> HTML

-- | We also want to display a link to a Tweet
linkToTweet :: Tweet -> HTML

If there’s one hint I can provide when doing the initial API design, it would be:

Extract the most basic, orthogonal concepts, and provide primitives to encode them.

You can always add combinators on top of those minimal and simple primitives to let them do more stuff. Working with reeeeally small set of primitives and a lot of combinators means you get to write simple code that actually scales! But then, picking the right primitives can be really hard at times, so you need to have a good deal of knowledge about the domain you’re trying to encode in your API.

via Echo JS http://killdream.github.io/blog/2013/04/the-hikkikomoris-guide-to-javascript/

How to use a Reddit-clone to boost company culture

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

Recently we tried something new at Treehouse and it’s working wonderfully well, so I thought I’d share the secret with you.

We recently crossed the invisible it’s-impossible-to-communicate-effectively line. The strange place where it feels like you’re small enough as a company not to have ‘communication procedures’ but large enough that somehow everyone is no longer on the same page (and misinformation spreads like wildfire). For us, that number was around 30 employees. We’re at 53 now, so it was time for a new strategy. 

Previously, we used Campfire as our ‘water cooler’. The place we’d hang out and chat about stupid stuff, random news, celebrations, etc. This was really important because we have a distributed team across the World, so we couldn’t rely on physical interactions to boost morale and communication.

The problem is that if you miss a conversation in Campfire, it can be difficult to go back and figure out what happened. The lack of threading, comments and up/down votes makes it very difficult to decipher what’s worth reading and what’s just random banter. Everything has the same importance in a chatroom.

Internal Reddit-clones

In an email thread about this issue, Jim brought up the idea of building an internal Reddit-clone. He cranked it out in a couple days, called in Convoy (because the movie is full of awesome) and here’s what it looks like …

The idea is simple: If it’s not actionable or urgent, post it to Convoy. Here’s the general guidelines:

• Phone or Google Hangout: Need an answer immediately
• IM: Need an answer in the next hour
• Email: Need an answer in next day or two
• Convoy: No answer required

Jim even built in a bit of gamification with points and user activity streams …

We still use Campfire for quick banter that’s too transient for Convoy. The Developers and Designers live in Campfire and really use it as a hive-mind. The rest of us though tend to abuse Hubot a bit in Campfire but leave the real discussions and random posts for Convoy.

We don’t have any rules about having to check Convoy or Campfire. It’s all about how much each person wants to stay connected. If they’re feeling out of the loop or disconnected, Convoy is a fun and easy way to jump back in.

Now that we’ve been using Convoy for a couple weeks, I definitely feel a palpable difference in the company culture. We’re more connected and everyone is having a chance to weigh in on discussions. Previously, you’d see these huge email threads about topics that may or may not interest you. Now email is less noisy and a lot of the discussions are happening in Convoy. Email is preserved for actionable items, which is great.

In conclusion, I’d highly recommend using an internal Reddit-clone so that your Team has a chance to discuss non-urgent/non-actionable topics or just offer encouragement or distraction. We love it.

via Hacker News http://ryancarson.com/post/49494542970/how-to-use-a-reddit-clone-to-boost-company-culture

How to Slice a Bagel into Two Linked Halves

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

It is not hard to cut a bagel into two equal halves which are linked like two links of a chain.

To start, you must visualize four key points.  Center the bagel at the origin, circling the Z axis. 
A is the highest point above the +X axis.  B is where the +Y axis enters the bagel.
C is the lowest point below the -X axis.  D is where the -Y axis exits the bagel.

These sharpie markings on the bagel are just to help visualize the geometry
and the points.  You don’t need to actually write on the bagel to cut it properly.

The line ABCDA, which goes smoothly through all four key points, is the cut line. 
As it goes 360 degrees around the Z axis, it also goes 360 degrees around the bagel.

The red line is like the black line but is rotated 180 degrees (around Z or through the hole).
An ideal knife could enter on the black line and come out exactly opposite, on the red line.
But in practice, it is easier to cut in halfway on both the black line and the red line.
The cutting surface is a two-twist Mobius strip; it has two sides, one for each half.

After being cut, the two halves can be moved but are still linked together, each passing through
the hole of the other.   (So when you buy your bagels, pick ones with the biggest holes.)

If you visualize the key points and a smooth curve connecting them, you do
not need to draw on the bagel.  Here the two parts are pulled slightly apart.

If your cut is neat, the two halves are congruent. They are of the same handedness.
(You can make both be the opposite handedness if you follow these instructions in a mirror.)
You can toast them in a toaster oven while linked together, but move them around every
minute or so, otherwise some parts will cook much more than others, as shown in this half.

It is much more fun to put cream cheese on these bagels than on an ordinary bagel. In additional to
the intellectual stimulation, you get more cream cheese, because there is slightly more surface area.

Topology problem: Modify the cut so the cutting surface is a one-twist Mobius strip. 
(You can still get cream cheese into the cut, but it doesn’t separate into two parts.)

Calculus problem: What is the ratio of the surface area of this linked cut
to the surface area of the usual planar bagel slice?

For future research: How to make Mobius lox…

---

Note: I have had my students do this activity in my Computers and Sculpture class.  It is very successful if the students work in pairs, with two bagels per team.  For the first bagel, I have them draw the indicated lines with a “sharpie”.  Then they can do the second bagel without the lines. (We omit the schmear of cream cheese.) After doing this, one can better appreciate the stone carving of Keizo Ushio, who makes analogous cuts in granite to produce monumental sculpture.

---

Addendum: I made a video showing how to do this.

---

via Hacker News http://www.georgehart.com/bagel/bagel.html

How Microsoft quietly built the city of the future

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

How Microsoft Quietly Built the City of the Future

A small, covert team of engineers at Microsoft cast aside suggestions that the company spend US$60 million to turn its 500-acre headquarters into a smart campus to achieve energy savings and other efficiency gains. Instead, applying an “Internet of Things meets Big Data” approach, the team invented a data-driven software solution that is slashing the cost of operating the campus’ 125 buildings. The software, which is saving Microsoft millions of dollars, has been so successful that the company and its partners are now helping building managers across the world deploy the same solution. And with commercial buildings consuming an estimated 40 percent of the world’s total energy, the potential is huge.

By Jennifer Warnick

“Give me a little data and I’ll tell you a little. Give me a lot of data and I’ll save the world.”

– Darrell Smith , Director of Facilities and Energy

Microsoft

“This is my office,” says the sticker on Darrell Smith’s laptop, and it is.

With his “office” tucked under his arm, Microsoft’s director of facilities and energy is constantly shuttling between meetings all over the company’s 500-acre, wooded campus in Redmond, Washington.

But Smith always returns to one unique place.

The Redmond Operations Center (often called “the ROC”) is located in a drab, nondescript office park. Inside is something unique – a new state-of-the-art “brain” that is transforming Microsoft’s 125-building, 58,000-employee headquarters into one of the smartest corporate campuses in the world.

Smith and his team have been working for more than three years to unify an incongruent network of sensors from different eras (think several decades of different sensor technology and dozens of manufacturers). The software that he and his team built strings together thousands of building sensors that track things like heaters, air conditioners, fans, and lights – harvesting billions of data points per week. That data has given the team deep insights, enabled better diagnostics, and has allowed for far more intelligent decision making. A test run of the program in 13 Microsoft buildings has provided staggering results – not only has Microsoft saved energy and millions in maintenance and utility costs, but the company now is hyper-aware of the way its buildings perform.

It’s no small thing – whether a damper is stuck in Building 75 or a valve is leaky in Studio H – that engineers can now detect (and often fix with a few clicks) even the tiniest issues from their high-tech dashboard at their desks in the ROC rather than having to jump into a truck to go find and fix the problem in person.

If the facility management world were Saturday morning cartoons, Smith and his team have effectively flipped the channel from “The Flintstones” to “The Jetsons.” Instead of using stone-age rocks and hammers to keep out the cold, Smith’s team invented a solution that relies on data to find and fix problems instantly and remotely.

SLIDESHOW: Building the Microsoft Campus

“Give me a little data and I’ll tell you a little,” he says. “Give me a lot of data and I’ll save the world.”

Smith joined Microsoft in December of 2008. His previous work managing data centers for Cisco had given him big ideas about how buildings could be smarter and more efficient, but until he came to Microsoft he lacked the technical resources to bring them to life. What he found at Microsoft was support for these ideas on all sides – from his boss to a handful of savvy facilities engineers. They all knew buildings could be smarter, and together they were going to find a way to make it so.

Smith has a finger-tapping restlessness that prevents him from sitting through an entire movie. His intensity comes paired with the enthusiastic, genial demeanor of a favorite bartender or a softball buddy (and indeed, he does play first base for a company softball team, the Microsoft Misfits).

Ever punctual and an early riser, Smith lives near Microsoft headquarters and has taken to spending a few quiet hours at his desk on Sundays.

“I call it my den because I live a mile away. I come here, I make coffee, I have the building to myself,” Smith says.

His family and the people who know him best understand. Smart buildings are his passion, and everything in his life has been moving toward finding ways for companies the world over to get smarter about managing their buildings (which will help them save money and reduce their energy use).

“Smart buildings will become smart cities,” Smith says. “And smart cities will change everything.”

via Hacker News http://www.microsoft.com/en-us/news/stories/88acres/88-acres-how-microsoft-quietly-built-the-city-of-the-future-chapter-1.aspx

Log : Console.log with style

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

README.md

Console.log with style

Demo

Features

• Safely call log (instead of console.log) in any browser.
• Use markdown syntax for quick formatting:
  • italic — log('this is *italic*')
  • bold — log('this word _bold_')
  • code — log('this word `code`')
• Use a custom syntax to style text however you want: log('this is [c="color: red"]red[c]').

Screenshot

Something went wrong with that request. Please try again.

via Echo JS https://github.com/adamschwartz/log

Setting up Sublime Text 2 (alexmaccaw.com)

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

maccman

JavaScript programmer, O’Reilly author, working at Stripe

• alexmaccaw.com
• say hello
• feed

  Svbtle April 9, 2013

I recently decided it was finally time to part ways with TextMate, my trusty companion for these last few years, and start the hunt for a new editor. After a quick Twitter poll the unanimous advice was that I should try Sublime Text 2.

After a few weeks of using Sublime Text I can safely say that it’s the best editor I’ve used. It’s fast, extendable and hasn’t ever crashed on me. That said, that no editor is perfect and Sublime Text does require a fair bit of initial configuration.

---

After you’ve downloaded & installed the editor, the first step to configuring Sublime Text 2 is to install the package manager. I’m hoping in future versions of the editor this package manager will come bundled, but for now it requires a separate installation. Run Sublime Text, Press ctrl ` (control backtick) to open the editor’s console, and paste in the code listed here.

Once the manager is set up, you can install packages with ⌘⇧p (command shift p) and typing Install Package.

Theme – Soda

Sublime’s initial look leaves a lot to be desired. However, luckily there’s a beautiful theme called Soda. To install Soda, open the package manager (⌘⇧p), type ‘Install Package ↵’, and then ‘Theme – Soda ↵’.

To activate the theme, open Sublime’s preferences ⌘, (command comma), which is a JSON file, and set the "theme" key to "Soda Light.sublime-theme" (Remember to check commas).

{
  "theme": "Soda Light.sublime-theme"
}

You may have to restart the editor, or at least open a new window, for the theme to activate.

Extending the editor

There are a few other packages to install:

• SideBarEnhancements – Adds useful file operations to the sidebar, such as ‘New file’, ‘New folder’ etc.

• AllAutocomplete – Allows autocompletion across open files.

• TrailingSpaces -Strips trailing whitespace from files.

Follow the same steps as before to install the packages, ⌘⇧p and "Install package".

Tabs & Spaces

The default indentation style uses tabs instead of spaces, and it’s likely that you’ll want to switch this (unless you solely program in a language where that’s the convention, such as Go). Open Sublime’s preferences (Settings – User or ⌘,) and add:

{
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

If you’re anything like me, and dread trailing white space, then you should install the TrailingSpaces package. You’ll need to change the default preferences for the plugin too. Open TrailingSpace’s preferences (Preferences -> Package Settings -> TrailingSpaces -> Settings – User), and add:

{
  "trailing_spaces_include_current_line": false
}

Also add this to your global user preferences (⌘,):

 "trim_trailing_white_space_on_save": true

Key bindings

There’s a key binding I used the whole time in TextMate: ⌘ ctrl r to reveal the currently opened file in the sidebar. You can add this to Sublime by opening the key bindings preferences (Preferences -> Key Bindings – User) and adding:

[
  {"keys": ["ctrl+super+r"], "command": "reveal_in_side_bar"}
]

Sublime’s fuzzy search (⌘ t) is incredibly fast and convenient, and it’s my primary way of navigating around my projects. As well as navigating by file name, you can go to a particular line in a file by typing :123 (colon line number) or to a particular method by typing #name (hash method name).

Command line

Surprisingly Sublime Text doesn’t come with a easily accessible binary, since this is probably the primary way developers will open the editor. That said, you can easily add support by creating a symlink:

ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /usr/bin/subl

I also use an alias in my ~/.bash_profile file, allowing me to easily open a directory from the terminal:

alias e='subl . &'

Icon

Sublime’s default icon is fairly ugly, but there are a few replacements on Dribbble. One of my favorites is by Elliot Jackson. To install it, download the icns file and replace the application’s icon:

$ mv ~/Downloads/st2.icns /Applications/Sublime\ Text\ 2.app/Contents/Resources/Sublime\ Text\ 2.icns 

Pasting

One suggestion from Jason Barry is to use ‘Paste and Indent’ for ⌘V instead of the standard ‘Paste’. This adjusts your indentation to automatically match the context it’s pasted in. To do this, put the following in your Key Bindings – User file:

[
  { "keys": ["super+v"], "command": "paste_and_indent" }, 
  { "keys": ["super+shift+v"], "command": "paste" } 
]

More packages

A few more packages you may find useful:

• Git – Git blame/branch support
• CoffeeScript – .coffee syntax highlighting
• Eco – .eco syntax highlighting
• Stylus – .styl syntax highlighting
• Sass – .sass syntax highlighting
• SublimeLinter – lint code as you type
• GitGutter – show Git diffs in the gutter

Conclusion

So that’s a fair bit of setting up required for an editor, most of which you’d think would be the default configuration. Sublime Text 2 definitely needs a bit of polishing from a product perspective. The default website, icon, and theme are ugly to say the least, and it would be convenient to be able to install the editor through the App Store. A GUI for configuration would be a good idea as storing preferences in JSON files may appeal to programmers, but it definitely alienates designers.

That said it’s early days for the editor, and the core framework has clearly been built extremely well. It’s ridiculously fast, stable and very extendable. I love it and absolutely recommend you try it.

1,474

Kudos

Read this next

Abba – JavaScript a/b testing

←   Full blog

© 2013 SVBTLE

maccman

JavaScript programmer, O’Reilly author, working at Stripe

• alexmaccaw.com
• say hello
• feed

  Svbtle April 9, 2013

I recently decided it was finally time to part ways with TextMate, my trusty companion for these last few years, and start the hunt for a new editor. After a quick Twitter poll the unanimous advice was that I should try Sublime Text 2.

After a few weeks of using Sublime Text I can safely say that it’s the best editor I’ve used. It’s fast, extendable and hasn’t ever crashed on me. That said, that no editor is perfect and Sublime Text does require a fair bit of initial configuration.

---

After you’ve downloaded & installed the editor, the first step to configuring Sublime Text 2 is to install the package manager. I’m hoping in future versions of the editor this package manager will come bundled, but for now it requires a separate installation. Run Sublime Text, Press ctrl ` (control backtick) to open the editor’s console, and paste in the code listed here.

Once the manager is set up, you can install packages with ⌘⇧p (command shift p) and typing Install Package.

Theme – Soda

Sublime’s initial look leaves a lot to be desired. However, luckily there’s a beautiful theme called Soda. To install Soda, open the package manager (⌘⇧p), type ‘Install Package ↵’, and then ‘Theme – Soda ↵’.

To activate the theme, open Sublime’s preferences ⌘, (command comma), which is a JSON file, and set the "theme" key to "Soda Light.sublime-theme" (Remember to check commas).

{
  "theme": "Soda Light.sublime-theme"
}

You may have to restart the editor, or at least open a new window, for the theme to activate.

Extending the editor

There are a few other packages to install:

• SideBarEnhancements – Adds useful file operations to the sidebar, such as ‘New file’, ‘New folder’ etc.

• AllAutocomplete – Allows autocompletion across open files.

• TrailingSpaces -Strips trailing whitespace from files.

Follow the same steps as before to install the packages, ⌘⇧p and "Install package".

Tabs & Spaces

The default indentation style uses tabs instead of spaces, and it’s likely that you’ll want to switch this (unless you solely program in a language where that’s the convention, such as Go). Open Sublime’s preferences (Settings – User or ⌘,) and add:

{
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

If you’re anything like me, and dread trailing white space, then you should install the TrailingSpaces package. You’ll need to change the default preferences for the plugin too. Open TrailingSpace’s preferences (Preferences -> Package Settings -> TrailingSpaces -> Settings – User), and add:

{
  "trailing_spaces_include_current_line": false
}

Also add this to your global user preferences (⌘,):

 "trim_trailing_white_space_on_save": true

Key bindings

There’s a key binding I used the whole time in TextMate: ⌘ ctrl r to reveal the currently opened file in the sidebar. You can add this to Sublime by opening the key bindings preferences (Preferences -> Key Bindings – User) and adding:

[
  {"keys": ["ctrl+super+r"], "command": "reveal_in_side_bar"}
]

Sublime’s fuzzy search (⌘ t) is incredibly fast and convenient, and it’s my primary way of navigating around my projects. As well as navigating by file name, you can go to a particular line in a file by typing :123 (colon line number) or to a particular method by typing #name (hash method name).

Command line

Surprisingly Sublime Text doesn’t come with a easily accessible binary, since this is probably the primary way developers will open the editor. That said, you can easily add support by creating a symlink:

ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /usr/bin/subl

I also use an alias in my ~/.bash_profile file, allowing me to easily open a directory from the terminal:

alias e='subl . &'

Icon

Sublime’s default icon is fairly ugly, but there are a few replacements on Dribbble. One of my favorites is by Elliot Jackson. To install it, download the icns file and replace the application’s icon:

$ mv ~/Downloads/st2.icns /Applications/Sublime\ Text\ 2.app/Contents/Resources/Sublime\ Text\ 2.icns 

Pasting

One suggestion from Jason Barry is to use ‘Paste and Indent’ for ⌘V instead of the standard ‘Paste’. This adjusts your indentation to automatically match the context it’s pasted in. To do this, put the following in your Key Bindings – User file:

[
  { "keys": ["super+v"], "command": "paste_and_indent" }, 
  { "keys": ["super+shift+v"], "command": "paste" } 
]

More packages

A few more packages you may find useful:

• Git – Git blame/branch support
• CoffeeScript – .coffee syntax highlighting
• Eco – .eco syntax highlighting
• Stylus – .styl syntax highlighting
• Sass – .sass syntax highlighting
• SublimeLinter – lint code as you type
• GitGutter – show Git diffs in the gutter

Conclusion

So that’s a fair bit of setting up required for an editor, most of which you’d think would be the default configuration. Sublime Text 2 definitely needs a bit of polishing from a product perspective. The default website, icon, and theme are ugly to say the least, and it would be convenient to be able to install the editor through the App Store. A GUI for configuration would be a good idea as storing preferences in JSON files may appeal to programmers, but it definitely alienates designers.

That said it’s early days for the editor, and the core framework has clearly been built extremely well. It’s ridiculously fast, stable and very extendable. I love it and absolutely recommend you try it.

1,474

Kudos

Read this next

Abba – JavaScript a/b testing

←   Full blog

© 2013 SVBTLE

via Hacker News 20 http://blog.alexmaccaw.com/sublime-text

Breaking down Amazon’s mega dropdown

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

The hover effects on Amazon’s big ‘ole “Shop by Department” mega dropdown are super fast. Look’it how quick each submenu fills in as your mouse moves down the list:

It’s instant. I got nerd sniped by this. Most dropdown menus have to include a bit of a delay when activating submenus. Here’s an old Khan Academy dropdown as an example:

See the delay? You need that, because otherwise when you try to move your mouse from the main menu to the submenu, the submenu will disappear out from under you like some sort of sick, unwinnable game of whack-a-mole. Enjoy this example from bootstrap’s dropdown menus:

I love bootstrap, don’t get it twisted. Just a good example of submenu frustration.

It’s easy to move the cursor from Amazon’s main dropdown to its submenus. You won’t run into the bootstrap bug. They get away with this by detecting the direction of the cursor’s path.

If the cursor moves into the blue triangle the currently displayed submenu will stay open for just a bit longer.

At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their cursor into the currently displayed submenu. Amazon uses this for a nice effect. As long as the cursor stays within that blue triangle the current submenu will stay open. It doesn’t matter if the cursor hovers over “Appstore for Android” momentarily — the user is probably heading toward “Learn more about Cloud Drive.”

And if the cursor goes outside of the blue triangle, they instantly switch the submenu, giving it a really responsive feel.

So if you’re as geeky as me and think something this trivial is cool, I made a jQuery plugin that fires events when detecting this sort of directional menu aiming: jQuery-menu-aim. We’re using it in the new Khan Academy “Learn” menu:

I think it feels snappy. I’m not ashamed to copy Amazon. I’m sure this problem was solved years and years ago, forgotten, rediscovered, solved again, forgotten, rediscovered, solved again.

If anyone else on the planet ends up finding a use for jQuery-menu-aim, I’d be grateful to know what you think.

---

Thanks go to Ben Alpert for helping me understand the linear algebra / cross-product magic Amazon uses to detect movement inside the “blue triangle.” I ended up going w/ a cruder slope-based approach, mostly b/c I’ve lost all intuitive understanding of linear algebra. Sad. Need to watch more KA videos.

via Hacker News http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

“I Want Hue” – Colors for Data Scientists

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

See also our other tools at Médialab Tools!

And a huge thanks to these inspiring works:

Chroma.js

I massively use this excellent js library to convert colors. If you have not done it yet, look at this post. You’ll understand much useful things about color in dataviz.

ColorBrewer

Very famous tool, that showed the way few years ago. If you do not know it, you must take a look.

via Hacker News http://tools.medialab.sciences-po.fr/iwanthue/