When we polled you about what you’re up to these days and how you get the job done, we asked designers about design tools, and developers about development tools. The results were enlightening, and a little surprising. Let’s dig a little deeper into the development tools results.

Common Versus Popular

From the results of our multiple-choice question, Which coding tools do you use most frequently?, it looked like the runaway favorite was GitHub.

But we followed that question up with a second question, this one open-ended: Of all the coding tools you use, which one is most essential to you? Because it was an open text field, we had to take a few liberties with interpreting the answers, but the results still have a clearly different shape.

The clear winner, as you can see, was Sublime Text, which was almost twice as popular as the second-place finisher. We asked a few respondents why it was their favorite.

“A good selection of plugins, extensions, and visual themes,” said Scott Gruber, who also cited its customizability. “With each trick and with every customization Sublime Text became more indispensable.” He cited Josh Earl’s work-in-progress Sublime Productivity for helping him get up to speed.

Albert Johansson concurred with Scott’s points on customization, saying that of other tools he’d tried, they “lacked the extension structure that Sublime has.” Sublime’s friendliness to keyboard-centric use also won him over. “I love the simplicity in the keyboard shortcuts.”

When we asked both what their second-favorite tool was, they named a few things, but the one tool in common? Git or GitHub. As we’ve observed before, Git seems to be like the water in which the fish swim: indispensable to most, but so invisible that it’s rarely thought of at all, let alone as a favorite.

We asked Jeffrey Isham about his favorite coding tool, our second-place winner, Atom. He’d tried Sublime, but settled on Atom for its stability and customization options, which he found as good as Sublime. He also said:

Without any customization, the time from clicking download to doing work is quick, which is good when using multiple computers. I recently started a new job, and this was by far the easiest of my tools to get up and running with.

Basics

As for the other question we asked, developers’ responses were pretty much in line with the overall set of responses. Developers indicated they were slightly more likely to use MacOS or Linux than the overall population, and correspondingly less likely to use Windows, but not by a sizable margin in any of those cases.

It was when we asked If you had to pick just one communication channel for work, what would it be? that the biggest differences showed up. Preferences for Slack, email, and Skype were essentially the same as for the wider population of respondents; but beyond those three, GitHub and JIRA appeared in the top five. Neither did so for the overall population.

The other interesting tidbit here was that, unlike with the overall population, “Other” didn’t appear in the top five (or even the top ten). We take this to mean that developers are very picky (no surprise there!) and that the web development toolset, while broad and deep, is also becoming fairly stable—a good sign for the maturation of our medium.

That’s it for our brief survey of your favorite developer tools. We’ll be back soon with a look at the design tools you love most (and why). No spoilers, but here’s a sneak peek: one of these tools is surprisingly old. That’s all we can say until next time.

Community

• @aneventapart Twitter feed
• An Event Apart Facebook
• An Event Apart Google+
• Twitter Search: #aeabos (AEA Boston hashtag)

Speaker Links and Resources

Jeffrey Zeldman

Jaimee Newberry

Dan Mall

Brad Frost

As 2017 kicked off, we asked our social media followers to tell us a little bit about themselves. Asking fewer than 20 questions aimed at finding out how respondents do their work, whether in design, development, or both, we got a quick snapshot of how part of our audience approaches their craft.

We’ll be doing deeper data dives in the days to come. In the meanwhile, we’re sharing some top-level data and conclusions with the community. Enjoy!

The Basics

We’ve heard a lot about how there are no more multi-skilled unicorns in our business—but, at least among people who responded to the survey, a different story emerged. A bit over 20% said they’re designers, and 30% said they’re developers, but 37% said they’re a mix of both designer and developer.

When it came to operating system preference, the Macintosh still commands a clear lead, but not as wide as we’d expected: 76% said the Mac is their OS of choice, while 19% prefer Windows. That seems like complete dominance, but in past years that split was even wider. With recent announcements, like the Surface line of professional devices and the availability of a full UNIX shell, combined with Apple’s reluctance to release new hardware in the past few years, Microsoft would seem to be winning some hearts and minds.

Tools

Depending on how people answered the design-versus-development question, we asked them about the tools they use. These were “choose all that apply” questions, so the numbers add up to more than 100%. The winner among those of the design persuasion? It was a virtual tie between good old pen and paper and Photoshop.

We admit to being a little surprised by Sketch’s showing. There’s been a lot of buzz around Sketch and its capabilities, with many leading designers singing its praises, but only a third of our respondents indicated that they use it. Then again, 34% is a pretty good showing for a program that’s only a few years old, especially when it’s up against a multi-decade behemoth like Adobe Creative Suite. And Sketch’s development does feel more nimble than Creative Suite’s. Time will tell if it continues to gain advocates.

On the coding side of things, two-thirds of our respondents use the most-widely adopted tool, GitHub.

What’s interesting is that once we dug into the details a little further, GitHub was not actually the most popular tool among our respondents. As a follow-up to the question “Which tools do you use most frequently?”, we asked “Which tool is indispensable to your work?” GitHub (and Git in general) wasn’t the most-frequently mentioned indispensable tool, not by a long shot.

This probably speaks to GitHub’s pervasive nature, sort of like the foundation walls of a building. We never really think about them and, if asked to name our favorite thing about a house, we’d likely choose the layout or the space or the location—forgetting that without the foundations, the building wouldn’t stay standing.

So which were the favorite coding tools? We’ll explore that in a separate article in the near future. Stay tuned!

Teamwork

We asked respondents which one communication tool they’d pick if they could only have one, and, surprising almost nobody, Slack ran away with the top spot. Email came in a distant second, with the rest lingering at, or below, 10%.

Finally, when we asked people how projects got started, there was a clear winner, but the other options had strong showings. Very fittingly, given the nature of the industry, randomness seems to have won the day here.

Not Goodbye, but Instead, Adieu

The results have given us quite a lot to think about, both in terms of what we heard and what we might ask in the future. We’ve been doing follow-up with some of the respondents (providing an email address for further contact was an optional question in the survey) and will soon let you know what we heard from them. So let us not say goodbye, but instead, adieu!

Community

@aneventapart Twitter feed
An Event Apart Facebook
An Event Apart Google+
Twitter Search: #aeaea (AEA Seatle hashtag)

Speaker Links and Resources

Jeffrey Zeldman

• Sharing Our Work: Testing and Feedback in Design by Jessica Harllee
• A Primer on A/B Testing by Lara Hogan
• What Really Matters: Focusing on Top Tasks by Gerry McGovern
• Interviewing Humans by Erika Hall
• Managing Feature Requests by Rachel Andrew
• Beyond Goals: Site Search Analytics from the Bottom Up by Lou Rosenfeld
• Beyond Usability Testing by Devan Goldstein
• Design, White Lies & Ethics by Dan Turner
• The Distance to Here by Rian van der Merwe
• Connected UX by Aarron Walter
• Being Real Builds Trust by Steph Hay
• Audiences, Outcomes, and Determining User Needs by Corey Vilhauer
• Product Management for the Web by Kristofer Layon
• Testing Content by Angela Colter
• Quick and Dirty Remote User Testing by Nate Bolt
• Internal Site Search Analysis: Simple, Effective, Life Altering! by Avinash Kaushik
• 10 Fundamental Web Analytics Truths: Embrace ‘Em & Win Big by Avinash Kaushik
• Is Conversion Rate Enough? It’s A Good Start, Now Do More! by Avinash Kaushik
• Analyze This: 5 Rules For Awesome Impromptu Web Analysis by Avinash Kaushik
• How to Conduct Competitive Research by Inc. staff
• 10 Tips on How to Research Your Competition by Darren Dahl
• Book: Just Enough Research by Erika Hall
• How We Write Proposals in My Design Studio by Jeffrey Zeldman

Krystal Higgins

Onboarding opportunities over time

• MIT manager onboarding checklists
• “New data shows losing 80% of mobile users is normal, and why the best apps do better ” – Andrew Chen and Ankit Jain
• “Minimizing Change Aversion for the Google Drive Launch ” – Google (case study)
• “Change Aversion: Understanding It, and How to Design for It ” – Google (slideshow version of case study)
• “From first run to the long run ” – Krystal Higgins

Onboarding with multiple methods

• “The Truth About Learning Styles ” – Linda Nilson
• “Do users change their settings? ” – Jared Spool

Creating onboarding for long-term guidance

• “How we put Facebook on the path to 1 billion users ” – Chamath Palihapitya
• “Replication and Analysis of Ebbinghaus’ Forgetting Curve ” – Jaap M. J. Murre and Joeri Dros
• “Spaced Repetition Promotes Efficient and Effective Learning: Policy Implications for Instruction ” – Sean H. K. Kang
• “Onboarding New Hires: Current practices and new directions ” – Sirota
• “Building onboarding for long-term guidance ” – Krystal Higgins

Luke Wroblewski

• Spotify ditches the controversial ‘hamburger’ menu in iOS app redesign
• Media, Productivity & Emojis Give Mobile Another Stunning Growth Year
• How to design for thumbs in the Era of Huge Screens
• Windows 8 Touch Guidelines
• An Event Apart: Buttons are a Hack
• Why “The Fold” Is A Myth – And Where To Actually Put Your Calls To Action
• Scroll behavior across the web
• Scrolling is easier than clicking
• Ericsson Mobility Report

Val Head

UI Animation Newsletter

• The UI Animation Newsletter
• Designing Interface Animation

Design Systems & Animation Tips

• Researching Design Systems
• Integrating animation into the UX workflow
• Design Doesn’t Scale

Traditional storyboarding

• Pixar storyboards

Ethan Marcotte

• More information on Ben Schmidt’s data visualization work.
• Trent Walton’s “Redefined” and “Device-Agnostic” are two essays I’d recommend to any responsive designer.
• The Toast is a wonderful independent publication, and one I (and some friends) worked with last year. (Our team wrote a detailed overview of the redesign process, if you’re curious.)
• Both The Toast and The Guardian (and, like, many other sites) make use of the flexible box module, or “flexbox.” If you’d like to learn more, I can recommend:
  • Chris Coyier’s “Complete Guide to Flexbox” is an invaluable reference.
  • Flexbox in 5 Minutes. What it says on the tin.
  • Games! http://flexboxfroggy.com/ and http://www.flexboxdefense.com/ are fun but they also really helped me get my head around some of the finer layout tricks. Recommended.
  • And finally, it’s worth noting that flexbox isn’t for everything.
• Interested in @supports? Well! MDN, David Walsh, and SitePoint have more information for you.
• If you’re interested in learning more about pattern libraries / style guides, I can recommend Anna Debenham’s excellent book on the topic.
• A few favorite pattern libraries / style guides are those published by Starbucks, Ushahidi, MailChimp, and Code For America.
• We are, as I mention in the talk, living in a golden age of automation and tooling for pattern libraries. Zeplin, DevBridge’s Styleguide, and KSS are a few examples; Fractal is one I especially like.
• For many more, I recommend Susan Robertson’s article on the topic.
• While “Atomic Design” is a popular methodology for organizing a style guide, many organizations and teams find value in designing, well, their own design language. Alla Kholmatova, Charlotte Jackson, and Ellen de Vries have been big influences for me in this area.

Jeremy Keith

Rachel Andrew

• Code Collection of examples used
• Boring CSS
• Glish CSS
• The Noodle Incident Box Lessons
• Fractal
• Using Feature Queries in CSS
• CSS Grid Specification
• Flexbox Specification
• Box Alignment Specification
• CSS Shapes Specification
• Can I Use
• Being Where the People Are – a post about vendor prefixes
• Grid by Example
• MDN Grid Guides

Jen Simmons

• Examples from this talk
• A giant list of links to resources for learning CSS Grid
• Jen Simmons, The benefits of learning how to code layouts with CSS
• Jen Simmons, Six Layout Myths Busted
• Layout Land
• Video of Jen Simmons’ 2015 talk, Modern Layouts: Getting Out Of Our Ruts
• Video of Jen Simmons’ 2016 talk, Revolutionize Your Page: Real Art Direction on the Web
• Book recommendation, Graphic Design the New Basics
• The Vignelli Canon (free PDF)
• Mark Boulton, A Richer Canvas
• Mark Boulton, Five Simple Steps to Designing Grid Systems, Part 1
• The Marber example at Grid Set App (and find others, along with blog posts at https://gridsetapp.com)
• Nathan Ford, Content Out Layout
• Jen Simmons, CSS Writing Modes
• Jen Simmons, Using Feature Queries in CSS
• Grid Garden, a game for learning bits of CSS Grid

Una Kravets

• Google Mobile Perf Study Results
• Internet Usage in India
• Wikipedia
• Progressive Rendering
• Putting your Images on a Diet
• WebP Documentation
• Video on WebP
• Zamzar Online Converter
• Homebrew
• BPG Web Encoder
• FLIF Format
• FLIF Polyfill
• magick-loader
• gulp-gm
• grunt-imagemagick
• node-imagemagick
• SVGOMG
• Comparing File Formats
• Introducing GIFV
• Social Media Sizes Cheat Sheet
• “Blur-Up” Technique
• Medium’s Image Loading Technique
• iOS Video Autoplay News
• Facebook Image Loading Technique
• Picturefill
• una.im/CSSgram
• Guetzli Compression

Chris Coyier

I have a book! It’s called Practical SVG.

Some good SVG primers

• Using SVG
• Everything You Need To Know About SVG
• Can I use… data for Basic SVG Support
• Make the Logo Bigger (Chrome Extension)

Graphs & Charts in SVG

• How to Make Charts with SVG
• Highcharts
• Animated SVGs: Custom easing and timing
• Chartist.js, An Open-Source Library For Responsive Charts
• Codepen: Interactive SVG Info Graph
• Codepen:  Simple SVG Charts
• amCharts

SVG Shape Morphing

• How SVG Shape Morphing Works
• MorphSVG Greensock plugin
• Codepen: Donald Trump’s Signature Morphing Into a Buttface
• Codepen: Mobiltelefonens Evolution (SVG Shape Morphing)
• Codepen: Shape Morph in CSS with d: path() + :active state
• The SVG path Syntax: An Illustrated Guide
• Codepen: Simple Path Examples
• bodymovin – after effects to html library
• svg jou jou monster

SVG Line Drawing

• Playstation 4: The Review
• Codepen: Feast SVG Logo Animation
• Codepen: THINK svg Animation

Animating Interfaces

• Transitional Interfaces, Coded
• Codepen:  SVG Page Hopper
• Codepen:  SVG Balloon Slider
• Animating an SVG Menu Icon with Segment
• Codepen:  morphing shape with spinning color stroke (svg + canvas)
• Loaders and Spinners
• Codepen:  Morning Commute
• Codepen:  Day 090 – Equalizer – version 1
• Codepen:  Musical Chord Progression Arpeggiator
• Codepen:  SVG Animated Guitar (Play Me!)
• Codepen:  SVG Animated Bucket Drums

SVG Icon Systems

• Icon System with SVG Sprites
• grunticon
• Inline SVG with Grunticon Fallback

Art

• Codepen: BB8 from Starwars️ – with SVG & GSAP
• Codepen:  SVG Fire
• Codepen: Mr. Potatohead SVG
• Codepen: Alex the CSS Husky
• Codepen: microlife
• Codepen: #Codevember 08 – Animated SVG Turbulence Filter
• Kubist
• Codepen:  SVG Animated Low Poly Tiger

Diagrams

• Olympic Feathers
• film flowers
• The anatomy of responsive images
• The SVG path Syntax: An Illustrated Guide
• SVG text and Small, Scalable, Accessible Typographic Designs
• Codepen: My First SVG Banner Ad

Headline Lockups

• Codepen:  Example of a Text Lockup
• Codepen:  SVG with <text> example

SVG in the Real World

• Tweet by Tami Brass
• Codepen:  no sprite, no JS heart animation – click it!
• Codepen:  Twitter Birthday Heart Animation in SVG
• Boxcar Press

Explain Your Product

• Codepen:  Change inline svg styling
• Networking on DigitalOcean
• Codepen:  Drivetrain
• Codepen:  MC High Five
• Codepen:  SVG Phone call
• Interactive Data Visualization: Animating the viewBox
• Codepen:  Urban landscape in polygonal style

At the beginning of February, we ran a short public survey asking people about their work/life balance, what they’re up to these days, and, most especially, about the tools they love and use to get their web work done. We got some great answers, but we’d like to hear from even more of you. So we’re re-opening the survey to run for another two weeks. Once it’s done, we’ll share some results.

If you missed our work, life, and tools survey the first time around, here’s your chance to participate. It’s less than 20 mostly multiple-choice questions, and should take about five minutes to finish. And to thank you for sharing your insights with us, we’ll share a special discount code with you at the end! Sharing is caring. See you at the survey.