Switching it up…

Toggles and switches were born out of a frustration of the Digital Surgeons dev team. They have been through several iterations, as we strove to find a better solution to the problem, before finally manifesting themselves in Gumby 2 as the mighty Toggles and Switches. When CSS3 came along and we were given the ability to create animations and other aesthetic UX gems with pure CSS, we dove at the chance. “No JavaScript?” we exclaimed, amazing. However, this was not actually the case.

Ain’t no JS got time for that…

We found that although CSS was now capable of handling the majority of our front-end UX, triggering effects and changes were a different story. Psuedo states like :hover and :active could be used but if we wanted to trigger style changes based on other events we had to resort back to trusty JS. This meant we had a lot of code written purely to add and remove classes from elements based on user interactions. We are JS enthusiasts at Digital Surgeons. Once you understand the true power of the language, you begin to hate using it in such rudimentary ways. We went through many iterations of design patterns before taking a step back and re-evaluating the problem.

Keeping it active

The concept behind toggles and switches is simple yet the potential is massive. The basic premise is that a class of .active should be added or removed from an element based on data-* attributes specifying the target selector and binding events. Lets help explain that with a little code. Take the anchor below for example. We are specifying a target selector in data-trigger and the event to bind the whole process to in data-on. In this case, when the anchor is clicked, .active will be added to #my-element.

<a href="#" class="switch" data-trigger="#my-element" data-on="click">Click Me!</a>

Notice the .switch class. This anchor is a switch which means the .active class will be added only once. If we change that to .toggle, the .active class would be added first and then removed on the next trigger, this process would continue indefinitely.

Turn it off and on again

This wasn’t quite enough for us. We had realized the potential of what we were building and decided that with a small addition, huge advantages could be gained. Adding the ability to specify a selector to remove the .active class would unleash a new realm of possibilities. Take a look at this Toggle.

<a class="toggle" href="#" data-trigger="#my-element|#your-element" data-on="mouseon">Click Me!</a>

Two selectors can be specified in the data-trigger attribute using a pipe separator. When the user hovers on this anchor, the .active class will be added to #my-element and removed from #your-element. This process would then be reversed on the next trigger and so on. If we were using a Switch the process would occur only once.

I have the power

This simple concept has the potential for complex functionality. We have built many UI elements using Toggles and Switches and without writing any extra JS.

Gumby 2 now comes with drawers and modals as examples of what you can build using toggles and switches. Check out the Sass for drawers and modals. The .drawer and .modal classes are both hidden by default and utilise the .active class in order to display them, for example .modal.active displays the modal. You can then use any combination of toggles and switches to add and remove the .active class, this provides major flexibility. We have also added variables to settings.scss for you to tweak the provided modal and drawer styles.

<!-- Open and close drawer -->
<a class="toggle" href="#" gumby-trigger="#mydrawer">Open/Close Drawer</a>

<!-- Open modal window -->
<a class="switch" href="#" gumby-trigger="#mymodal">Open Modal</a>

<!-- Open one drawer and close another -->
<a class="toggle" href="#" gumby-trigger="#mydrawer|#myotherdrawer">Next Step</a>

There have been far more advanced creations, check out the Toggle and Switch usage on the new Borderfree site.

The selectors sepecified in data-trigger are passed directly to JS so any valid CSS selector can be used no matter how advanced. Also, multiple events can be specified, separated by a space, in data-on. The toggle or switch will trigger on each of the specified events. It’s also worth noting that the default event is click so no need to specify data-on="click". Here’s a few more advanced examples.

<a class="switch" href="#" data-trigger="#list > li.children:first-child | #element .child">Click Me!</a>
<a class="switch" href="#" data-trigger="#list > li[data-attr]" data-on="mouseon mouseout">Click Me!</a>
<a class="switch" href="#" data-trigger="#form input | #form > a:last-child" data-on="focus blur">Click Me!</a>

Once you realize the potential of these tools you can build pretty much any UI feature. We’ve seen drawers, accordions, feature sliders any much more. Check out the Gumby showcase for more creative uses of Toggles and Switches and get involved with Gumby on GitHub.

In 2007 Anheuser Busch created a commercial called “The Swear Jar” that they housed on bud.tv (see above). That video went viral and got reuploaded all over Youtube.  And who can forget the Snickers “Do Something Manly” commercial? A commercial that made it to TV and then got removed.

Banned television commercials are some of the most viral videos on the internet and they save a lot of money in the marketing budget.

Too Much For TV

The majority of banned commercials will get taken off television or never make it to television because their content is too inappropriate. The Snickers commercial, “Do Something Manly,” is the perfect example. It was named one of the top 10 best Super Bowl ads that year, but was considered to be homophobic by several humanities groups. The ad got kicked off of television, uploaded to the internet and has now been remade, remixed and re-uploaded over and over again; easily quadrupling the original viewership.

Never Too Much For The Internet

Thats right, some brands intentionally make their commercials too inappropriate for television, but just shy of explicit to keep them on YouTube. PETA and Budweiser have frequently released commercials digitally that are almost too inappropriate for YouTube with intentions of getting their brand recognized on social media and the blogosphere.

Not only brands, but activist groups that can’t afford to have a television advertising buy will take the risk just to get recognized.

Who wins?

These banned commercials and risque digital videos are getting shared via social media and reposted on blogs at an exponential rate. The consumer wins, right? Of course they do, they get social clout when their friends enjoy the video. They get traffic when their blog is linked to for posting the videos. Everyone wins, especially the brand.

The people are getting what they want (traffic and laughs) but the brands are the ones who are cashing in. Brand’s save tens of thousands of media dollars by using viral distribution. The viewers do all the marketing work for them by sharing these videos within small contained communities.

How Does It Happen

Not every video on the internet has the potential to go viral. The content in the video has to be able to grab the attention of a certain group of people in order for them to want to share it.

In an interview with Lucas Watson, the Vice President of global video sales at Youtube, Watson brings up three key ingredients that can help a video reach viral ad success. According to Watson a viral video requires either human insight, conversation ignition or emotional connection. He says that brands that understand how to connect with their audience or create tension are more successful when it comes to video advertising.

What’s the Secret Ingredient?

A Study done by the website Buzzfeed suggests that friends are the most common influencers in content that goes viral. Viral content starts within small groups of friends rather than content shared by large influencers. Large influencers may be able to reach a larger range of people, but their content  usually doesn’t last long.

Two very similar, but different forms of sharing. When a user shares content on social media it is like they are using a bullhorn, putting the content out there for everyone to hear. In real life users do not do that. They share ideas in one-on-one conversations or group discussions. Imagine if users shared content in real life the same way they shared content online. Some people would listen, others would walk past wondering who is this kid with the bullhorn?

Effective viral video content online needs to be something that people can engage with on a human level. The amount of social media shares only get’s content so far. The secret ingredient is making content powerful enough to elicit an actual conversation between two individuals.

1) Hi, we’re Digital Surgeons, and we’re addicted to meetings. We’re currently 90 days clean of pointless meetings, but sometimes we still think about sending calendar invites to co-workers for no real reason. Harvard Business Review helped us, and maybe it can help you, overcome your addiction to meetings.

2) Stressing about an upcoming design interview? Trying to land your first job? Or maybe you’re a freelancer trying to get back into the stable employment game. The design team at Digital Surgeons has been in all of the above situations at some point in their career. Some of them have even been on the other side of the table doing the hiring. It’s through these collective experiences we were able to put together a comprehensive list of tips for Design Instruct on how to ace a design interview.

3) Until we are all replaced by robots (could be sooner rather than later), humans will only be able to perform one task at a time. So what happens when you need a designer to do a website for one client and a logo for another? Enter the moral dilema of resource thievery that project managers face daily, as evidenced in this Dilbert comic. Also, you should take time to poke around the rest of the blog. It has some really great writing on the topic of digital project management.

4) We’re never too proud to tip our hat to great digital campaigns even if we may not have been behind them. This campaign from Ray-Ban is one of those examples. It is perfectly on brand and combines mobile, social, digital and experiential. Everything we like to see.

5) Have you met our Tech Director, Chris Fidao? If not, you should. On top of being relentlessly hilarious, he is also incredibly skilled at his craft and always willing to teach. He demonstrates that passion for teaching with his tutorial on creating restful APIs in Laravel4 for Net Tuts.

6) Where does the future of E-commerce lie? For those in the know, they realize there is a land of opportunity in digital video. Making videos “shoppable” drastically increases the chances of a sale and it is still in it’s infancy. Here’s a look at a few of the technologies available and where the industry is going in this Agency Post article.

7) Our mad scientist and director of interactive, Aaron Sherrill, offers some tips on how to not overuse Jquery in your development projects.

8) Fast Company shows us what a startup needs to be successful in 2013… A couple of internet famous tweens talking about it. How much does it cost to buy children these days?

9) The devil is always in the details, and here are some great details on how to prepare your images for the web. Why design something beautiful only to have the images look subpar?

10) Pete Sena spends the small amount of time he isn’t working or sleeping combing the internet for new tools and resources. He forgoes a normal social life and sleep cycle for the benefit of others; a digital Mother Teresa if you will. Here are the resources Pete found for designers and front-end developers last month. The man is a saint, and all he asks for in return is a quick follow on Twitter.

While API updates are generally the responsibility of the development team, Twitter is making some changes that all members of an agency or marketing team should be aware of. Version 1 of the API, which is currently utilized in almost all embedded Twitter feeds and plugins that allow such feeds to appear on websites, is being deprecated and replaced by version 1.1.

In short, this update will likely impact all Twitter feeds that exist across your web properties. Plugins will no longer be able to pull information from Twitter the way it has in the past. Twitter has been employing “blackouts” of feeds utilizing the deprecated API to demonstrate which feeds will stop working completely once the transition is complete, the first of which took place early last week on March 5.

The complication is that developers cannot be sure which plugins will be able to adapt to the new version, which requires a deeper authentication process and will likely differ greatly from the current API. In addition, the new “embeddable timelines” limits the level of customization available.

While the developers of the industry grapple to accommodate this change, we recommend that marketers take inventory of all of properties’ that utilize the API and monitor those feeds. We try to post about this sort of thing often you should follow us on twitter.

Well, its finally here! We are proud to announce today that we are officially unleashing Gumby 2 to the world. Gumby 2 is the most powerful front-end responsive framework to date and we’re extremely excited to be able to give you all the opportunity to play with our new baby. Gumby 2 is available right now, we hope you love it.

There are a bunch of great new features and optimizations built into Gumby 2 that we hope you explore and utilize while creating your applications. The most obvious change, is that the entire framework has been rewritten in SASS, or more specifically the SCSS syntax. Most everything that you need in order to completely customize Gumby for use in your project has become a variable. We also have included a bunch of handy mixins that are at your disposal to make complex annoying stuff into easy fun stuff.

Gumby 2 has been completely re-architected from the ground up. Its got some amazing new features and everything has been upgraded in some way. Interested yet? Here we go.

SASS & Compass

Like I said, the first thing you’ll notice about Gumby 2 is that its been completely rewritten in SASS. This allowed us to turn most everything you’d ever need to change about Gumby into a variable; including the grid itself. We’re also leveraging the power of Compass’s awesome library of mixins to make stuff like CSS3 and vendor prefixes less ‘headachy’. With this new version, you’re no longer limited to a 940px wide grid; nor are you constrained to the limits of 12, or 16 columns. Our design team may, or may-not, have thrown a party in secret after we shared this idea with them late last year. With Gumby 2 you can work with a grid of any width that you want, its defined as a variable, with any number of columns you’d like.

What about the Hybrid Grid, you ask? Well, thats still there, and better than ever because now you’re able to define how many columns are in your hybrid grid in addition to the default grid! Other cool stuff thats easy to define is the color scheme for your entire UI, your base font sizes, button radiuses and more! We’ve always been most proud of Gumby’s ability to sit as the backbone of any project. The goal of version 2 was to make that even more true than ever before. We took your feedback (make color changing easier) and ran with the idea. We thought, what if changing everything was easier? The results speak for themselves.

Google WebFonts

We believe that frameworks should help developers and designers make the web more beautiful, without adding extra work to their schedules. Finding, converting, hosting, serving, and browser testing the fonts on your projects are all huge pains in the — neck. When we started building Gumby 2, we were planning on launching with Open Sans included in a ‘fonts’ folder with the rest of the framework files.

You could have continued with your current process which likely involves scouring the web for web safe fonts, researching licenses, or embedding a script from a site like TypeKit or Google WebFonts. That probably would have been fine, but that wouldn’t have made your life any easier. What we decided to do is give you a huge library to pick from, the Google WebFonts Library, right off the bat. If what you need isn’t in there, you always have the option to use one of your older methods — no extra work involved. If the font you need is a part of the Google WebFonts Library, all you have to do is select it while creating your Gumby build and magically all of the typography on your entire website just works right out of the box!

Modular Scale

Modular scale is a beautiful thing. Designers love it, developers love it, Digital Surgeons loves it. We’ve built Gumby 2 to have the best typography of any front-end framework available today. It was our mission to make beautiful type a focal point of our framework because it is something that we are extremely passionate about at DS. If you’re not familiar with modular scale, you can read about it here, here, here, here, and here too. We are leveraging an awesomesauce mixin by Scott Kellum (you should follow him on twitter) which makes beautiful typography something that comes baked into every single website or application you build using the Gumby Framework. It makes rapid prototyping better, it makes finished products better, it make responsive typography easy. It is just a brilliant idea, so we built modular scale deep into the core of the Gumby Framework.

New User Interface

Farewell green UI. The green was cool and all, but it wasn’t as project agnostic as a more neutral color palette would have been. We’ve given Gumby a complete fashion makeover in version 2. Gumby now sports a beautifully modern UI with a neutral color palette, amazing typography, your choice of metro or gradated interface treatments, tons of new elements to build with, and a weave.

Gumby 2 gives you two “interflavors” to choose from while building out your applications user interface. If your app has a flat UI, the .metro flavor will work wonders to speed up your workflow. The buttons and elements in metro are all “flat”, without any gradients and have squared corners by default. If your design is smooth and full of beautiful gradients, we’ve got a flavor for that too! We thought that giving you two flavors of Gumby to choose from, or mix and match together, would give you a solid foundation from which to bootstrap your responsive application. We’re all about cutting out extra work from anyone’s workday. We’ve done our best to make building front-end with Gumby the easiest, quickest, sexiest, and most fun experience possible.

Another effort eliminating work speeder-upper we’ve put together is our amazing Gumby Framework Customize Tool! Custom Gumby builds tailored to your project on a per-project basis! Do you even need any more reasons to go out and give Gumby a download?

A Cert-Entypo Beauty (see what i did there?)

Haven’t you heard? Icons are fonts now! We love a good glyph, so we love the Entypo iconset by Daniel Bruce about 260+ times. Which is why we’ve included every single one inside of Gumby 2. Not only are all of the icons there at your disposal, but they’re incredibly easy to implement into your projects. Give them a spin, and let us know what you think.

Supercharge your UI with Gumby JS

Gumby 2 JavaScript has been completely re-designed from the ground up. We have major improvements to all functionality as well as a ton of brand new features. Gone are the days of a single object housing all of Gumby’s magic, we’ve now abstracted each UI module into a separate file, hooking into the global Gumby object in order to keep everything namespaced and provide helpful debugging features.

The JavaScript is still designed to work in the background, bringing the UI kit to life without the need to write any extra code. However we have extended this philosophy by providing optional parameters, specified in html attributes, as well as dispatching and listening for custom events to allow programmatic interaction with the modules.

Every parameter of a UI module can be specified as an html attribute, using one of three formats. The valid HTML5 data-*, gumby-* or no prefix at all, each is fully supported so take your pick!

Toggles & Switches

Toggles were born in Gumby 1 but boy are they growing up fast! Gumby 2 Toggles boast new features, more advanced functionality and now have a baby brother in the form of Switches!

The aim of Toggles and Switches is to remove the need for pointless, boilerplate JavaScript needed for every CSS driven UI, adding and removing classes based on user interaction. The anatomy is simple yet powerful. Two CSS selectors can be specified using a gumby-trigger attribute. A class of .active will be applied to the first and removed from the second, Switches will perform this action once whereas Toggles will repeat the action, toggling the classes back and forth.

Although this may sound simple, powerful user interfaces can be built using a combination of Toggles and Switches.

Skiplinks

Skiplinks allow you to smoothly scroll the window or any element to a specific location. Specify a CSS selector, px value or just ‘top’ to easily scroll to that point on the page.

There are three optional attributes that can be used to modify this functionality, gumby-easing, gumby-duration and gumby-offset. Gumby uses jQuery and the easing and duration parameters are passed directly to $.animate() so why not include an easing plugin and get creative.

Fixed Positions

Fixing headers, sidebars and other UI elements, relative to the users scroll, is a common and painful requirement. Gumby 2 makes this easy yet flexible. Using the gumby-fixed attribute, with CSS selectors and px values, elements can be fixed and released at various points on the screen with ease. Check out the sidebar on the Gumby documentation pages.

Retina Images

Since Apple introduced the retina display we’ve had to change the way we design and build for the web, serving up responsive images for different device resolutions. Gumby 2 is here to help. If you include a high resolution image in the same directory as your regular image with the suffix @2x, applying the gumby-retina attribute to your will ensure the higher resolution image is served up on retina displays.

Custom Events

One of the major updates we’ve made to the Gumby UI kit is the introduction of custom events. Each UI module now listens for events that you can use to programmatically interact with modules as well as triggering events based on the users interactions. All events are namespaced with ‘gumby’ and jQuery’s trigger() and on() methods make binding and listening easy. Grab content from your server when a tab is changed, trigger style changes when your sidebar becomes fixed, give the user some feedback when a checkbox is checked, the possibilities are endless.

Now download it and go make awesome!

Go grab Gumby 2, follow us on twitter @gumbycss, and let us know what you think! We’d love to see the awesome stuff you are building with it, so please submit to our showcase once you’ve rolled out your next masterpiece. We’re super excited about having the opportunity to bring this awesome framework to you; rest assured that this is only the beginning of awesomeness yet to come! Thank you all so much for your support and contributions to the Gumby GitHub community, keep it up!

Configure it, (J)SON!

Sublime Text 2 stores settings in a series of JSON formatted files that exist in pairs of “Default” and “User” versions. These are accessible from the Preferences menu (inside the application menu on OSX). The Default version is overwritten on program upgrade and serves as a well commented reference for customizing every available option. Your personal configuration lives in the User version of the file and will remain in place on upgrade. As a bonus, add-ons follow the same convention and can be found in Preferences > Package Settings.

The main editor configuration lies in “Settings”, and is where some of the more interesting program-wide settings are available. Here are some of the changes we like to make:

  "auto_complete_commit_on_tab": true,
  "default_line_ending": "unix",
  "ensure_newline_at_eof_on_save": true,
  "trim_trailing_white_space_on_save": true

This combination of settings enforces a Unix world view on our files. Since we are a LAMP shop and work mostly on *nix operating systems (Macs + Linux), these settings make sense for everything we do. In particular it allows us to use the tab key to trigger autocompletion much like bash or zsh would. It also enforces the line-ending and whitespace conventions of Unix, which help to keep things clean in our source files.

  "highlight_line": true,
  "highlight_modified_tabs": true

These settings help with scanning and visibility while working. The first adds background color to the line the cursor is on, which is useful to quickly locate it. Syntax highlighting color schemes affect how contrasting the background color is. The second, as you might have guessed, adds a marker to tabs to let us know unsaved changes have been made to a file.

  "open_files_in_new_window": false

Specific to OSX, this prevents opening source files in Finder from opening a new Sublime Text 2 window instead of adding a tab to the current project.

What Does the Scouter Say About His Power Level?!

Make no mistake; The true power of Sublime Text 2 lies in it’s “fuzzy matching” and multiple cursors. If used judiciously, these features can account for a great deal of saved time and happier wrists. This alone is well worth the modest price of a license.

No-one Can Resist Fuzzy Matching. Except Klingons.

Fuzzy matching refers to the editor’s universal ability to guess what you mean from just a few key characters. It’s like autocomplete, except that you don’t have to spell things perfectly and can skip parts of the word/identifier. For example, if I want to switch the current file’s syntax highlighting to Bash, I would open up the command palette (Mac: Cmd-Shift-P, Linux/Windows: Ctrl-Shift-P) and invoke the command “Set Syntax: Shell Script (Bash)”. Typing any of “Syntax: Sh”, “syntax: sh”, “syntsh”, “setbash”, “stebash”, “stbsh”, or even just “bash” or “shell” will all bring that command to the top of the options, and simply hitting enter will select it and perform the action. That saves a lot of keystrokes, and prevents having to wade through the menu and get your hands away from your keyboard.

A Goto Anything prompt with a fuzzy search.

If that doesn’t seem terribly useful to you, consider when you are typing a variable name and mis-spell it. Say $darth_vader gets typed as $darthvader. Sublime Text 2 is smart enough that simply hitting tab at this point will correct it to match one of the identifiers it knows about. Or perhaps you have three similarly named variables like $hobbit, $hobbiton and $hbts, after typing just $hbt, you can cycle to the variant you want by hitting tab multiple times.

Even more helpful, autocompleting many built-in functions will automatically add the parentheses and move your cursor between them. This functionality is referred to as snippets and usually comes bundled with syntax highlighting packages. More advanced snippets go further and give you boilerplate code with the tab key moving you to the next logical editing area. Take for example the snippet for foreach in php:

An animation of smart tab movement in a snippet.

Perhaps the most time saving variation of fuzzy matching is the ability to jump to any file, symbol, method or line via Goto > Goto Anything (Mac: Cmd-P, Linux/Windows: Ctrl-P). Type a few key words or letters of a file in the current project and instantly have that file in front of you, pressing enter to pin it to a tab. Goto Symbol (Mac: Cmd-R/Cmd-P, ‘@’ Linux/Windows: Ctrl-R/Ctrl-P, ‘@’) allows you to browse symbols in the file with fuzzy matching, letting you type things like “set” to jump to any of the set methods in a php file for example. Goto Line (Mac: Ctrl-G/Cmd-P, ‘:’ Linux/Windows: Ctrl-G/Ctrl-P, ‘:’) to jump to any line in the current file. That’s really useful when investigating an error message. A hidden option using “#” in the Goto Anything prompt lets you jump to any word in a file. Combining two of these let’s you move even quicker. Say you need to go to the only get method in a file you remember having ProjectContent or Projcontent or some such in the name, you can type Cmd-P then “prjcont@get” enter and be brought straight to the declaration. Magic!

Coding Like a Sailor with Multiple Cursors

Multiple cursors is exactly what it sounds like, but I promise you it will bow your mind how useful it is and how dependent on it you will become. Let’s show an example of where it shines. Say you have the following code:

Let’s say you need to do a few things. You want to change the single quotes to double quotes (” -> “”). You also want to change each hyperlink’s url to point to a numbered article, whose number matches the number in the hyperlink’s text for demonstration’s sake (http://example.com -> http://example.com/blog/article/<number>). We would start by placing our cursor immediately after the quotations of the first href attribute. Hold Shift and click and drag with the right mouse button (Mac: Option and click and drag with left mouse button) downward to immediately before the quotations of the last href. You will notice that you now have selected all of the urls and quotations in a vertical block!

Now go ahead and type a double quote. Sublime Text 2 will be helpful and place the selection inside the new quotations instead of replacing it. But our old single quotes are still there. Simply use your keyboard’s arrow keys and delete/backspace key to remove them the same way you would for one line. Now we can just arrow over to the end of the urls and type the rest of the url as we want it (/blog/article/) up to the number. To get the numbers we can arrow over to the hyperlink text that select those numbers, copy, then arrow back to the end of the urls and paste.

An animation of the steps described above.

Voila! You’ve just done some identical work on multiple lines with minimal tedium. Without multiple cursors we might have chosen to delete four of the lines, make our modifications then duplicate the new line four times. After which we would have had to individually increment the numbers in both the urls and the link text. All that in addition to the work we just did!

More Control with Packages

Our next order of business is to install Package Control. Package Control is a package manager in the *nix style (like an “app store”, but in text mode and minus the purchases). Through it we install and manage upgrades for all of the other packages we use. Since it uses github as a backend, the packages are always fresh and the selection is well varied. We don’t use very many packages as the default functionality of ST2 is already very mature and capable, but there are a few essentials missing that every developer should have. Two of them expand the capabilities of fuzzy matching; These are Emmet (formerly known as ZenCoding) and Hayaku.

Expanding HTML with Emmet

Emmet allows us to use intuitive css-selector-like expressions to generate tedious boilerplate HTML. It’s hard to communicate just how awesome it is without experiencing it yourself. As an excersize, try opening an html file and pasting in the following:

  #main.container>(h2+p>lorem20+ul>(li>a.blue[rel="alternate"]{Link $ - })*5)*2

Now press tab while your cursor is just after the final character and watch the magic unfold. If you haven’t, take a look at what the output looks like:

What happens when you press tab after writing some Emmet selector-like abbreviations.

There’s a lot going on here, but it should all be very intuitive to anyone who has delved into front-end development. But wait, that’s not all! We can also highlight text, press Ctrl-W and get a text box at the bottom of our editor. Just type a selector expression and it will wrap the highlighted text with the appropriate markup! For more detail on all the possibilities, we reccomend looking at the documentation.

Here is Hayaku. Type only letters needed. See it unfold fast.

Hayaku greatly expands autocomplete for CSS files, letting us type just a few key letters and tab complete them into full style rules. Being able to type “dn” and get “display: none;”, or type “h20″ and get “height: 20px;” by tab-completing really saves a lot of key strokes. The best part is you don’t have to memorize any abbreviations, just take your best guess as to what the key characters are in the rule and hit tab. Hayaku will amaze you at how well it can guess what you meant.

If you looked further into the Emmet documentation, then at this point you might be wondering “Hey! Emmet is supposed to do some of the Hayaku stuff too, won’t they congflict?!”. Fortunately, if both are present, Hayaku will supercede Emmet’s CSS features in favor of it’s own, resulting in a happy developer.

Trapping Code Lint with SublimeLinter

Another must-have package is SublimeLinter, which applies code linting directly in the editor as you type for a multitude of web development languages including CSS, PHP, Ruby, Javascript, JSON, Perl and just about any language that either has a linter built in to its package or provided by another program. We do find however that CSSLint is too zealous and that SUblimeLinter’s default visual notification for errors was ugly, so we made the following modifications to Preferences > Package Settings > SublimeLinter > Settings – User:

  "sublimelinter_mark_style": "none", 
  "sublimelinter_gutter_marks": true

By default SublimeLinter outlines the entire line if one or more errors is present. Using these settings, we replace the outline with a mark in the gutter immediately next to the line numbers, which is less intrusive but still visually informative. As a bonus we have a hint for the number/severity of errors on a line by the size of the mark in the gutter. The end result looks like this:

A nicer looking inline SublimeLinter.

We tweak the csslint options to turn off many of the warnings mentioned in Matt Wilcox’s criticisms of CSSLint. We could turn it off entirely, but think that the remaining items (warnings to include the other vendor prefixes, fix outright errors etc.) are worth keeping around.

  "csslint_options": {
      "adjoining-classes": false,
      "box-model": false,
      "box-sizing": false,
      "compatible-vendor-prefixes": "warning",
      "display-property-grouping": true,
      "duplicate-background-images": false,
      "duplicate-properties": true,
      "empty-rules": true,
      "errors": true,
      "fallback-colors": "warning",
      "floats": false,
      "font-faces": false,
      "font-sizes": false,
      "gradients": "warning",
      "ids": false,
      "import": "warning",
      "important": "warning",
      "known-properties": true,
      "outline-none": false,
      "overqualified-elements": "warning",
      "qualified-headings": false,
      "regex-selectors": "warning",
      "rules-count": "warning",
      "shorthand": "warning",
      "star-property-hack": "warning",
      "text-indent": "warning",
      "underscore-property-hack": "warning",
      "unique-headings": false,
      "universal-selector": "warning",
      "vendor-prefix": true,
      "zero-units": "warning"
  }

In addition to these, you can obtain syntax highlighting packages for just about any language out there, and certainly all of the commonly used languages in web development. You can also find additional color schemes (syntax highlighting coloration) and themes (skins for the program itself — Soda Theme is the most polished in our opinion) to suit your preferences.

That’s a Wrap!

Despite the intimidating length of this article, we’ve only managed to go through some of the features Sublime Text 2 offers. We didn’t discuss, for example, the vi editing mode (“Vintage mode”) that one of our developers swears by (and to be fair, nothing beats Vim for terminal editing). But for many of us multiple cursors and tab completion engines are the compelling reason to stick with this editor. What do you think? Did we miss any blow-you-away features or packages that you use in your workflow? Drop us a line in the comments.

What the hell is SnapChat you ask? It is a mobile application that allows for real time picture/video chatting with friends. It is also the most demonized youth fad since…whatever the last thing was. It is widely accepted that Snapchat serves but one purpose: for millennials to spam pictures of their genitals to each other. Or so major media and blogging outlets would lead you to believe. Why are we even talking about this; is the team Digital Surgeons actually just a bunch of degenerate Snapchat sexting enthusiasts? Yes, but that’s not the only reason we are talking about Snapchat. Snapchat is not actually based around sexting. Snapchat is a force to be reckoned with in the social sphere and it is only a matter of time before brands begin utilizing it to create unique consumer experiences.

Why SnapChat?

After only a year of existence, SnapChat processes over 50 million images and videos. Every single day. Yeah, give yourself a second to wrap your head around that statistic. For comparison, Instagram has 5 million photos uploaded to it daily. And since we are name dropping other social platforms, we might as well make mention of the David vs. Goliath battle that Snapchat recently came out ahead on. If imitation is the sincerest form of flattery, Snapchat should be blushing at how much Facebook admires their platform. Zuckerberg himself took 12 days to copy Snapchat’s entire platform and release it as “Poke”. The best part of the Poke application? What a failure it is. Snapchat remains in the top 5 free apps while Poke doesn’t crack the top 100. Yikes.

A Sense of Intimacy

Is there any greater connection in the world than a one-on-one face-to-face relationship? Is there anything more powerful than staring deeply into someone’s eyes? We have long believed that the best way for a brand to succeed is to form these relationships with consumers. Social media allows brands to easily become personal again. Marketers have often lauded the public nature of traditional social platforms; rallying around cries of “virality” and “earned impressions” from brands on social media. Snapchat is not designed to be socially shared or accessible to all. The interactions are one-on-one and fleeting, you know, like real human interactions. A platform such as Snapchat lets brands not only get personal, but have that real face-to-face contact. A campaign will prove definitively how engaged a brand’s fans really are. Are they engaged enough to hold a private conversation to unlock content?

MMMMmmMillennials

If there’s one word that get’s marketers drooling, it’s the mention of the oh-so-sought after millenial consumer. That rambunctious 13-21 year old consumer that is full of disposable income and also thinks your brand sucks. They hate your banner ads and hate your email blasts even more. They aren’t even watching your commercials on TV… they’re too busy taking pictures of themselves and sending it to their friends on Snapchat. What’s a brand to do? Keep buying the same old ineffective ad units but infuse them with “wacky humor”? Snapchat is an untouched platform inhabited almost entirely by millennials; the next move is obvious.

Why we like Snapchat

We like Snapchat for same reasons we liked Facebook and Twitter when they came onto the scene: they’re cool and possibilities are endless. Snapchat provides marketers and brands a platform for interacting with consumers in humorous and personal way. Imagine if you got a SnapChat from the Burger King King or the Michelin Man? It’s funny. It’s slightly unsettling. It’s a great brand experience.

The Facebook Poke platform was recently utilized by an Israeli Lingerie brand; sending a ten second titillating video of a model putting on the brand’s tights. Clearly there is the safety of the Facebook name behind Poke but we believe the real success will be using the SnapChat platform. For a platform that has gained notoriety for being exclusively for sexting, wouldn’t it be interesting to see brand’s push the envelope?  We hope 2013 brings us a brand that is brave enough to connect with their customers in a bold, visual and 10-second manner.

Historically as an agency, we have always believed that social media should be handled in-house. We recommend that if an in-house social media team is possible, brands should pursue that option. It now seems that brands are finally catching on as Nike has recently moved all of its social media activity in-house and there are rumblings that other iconic brands are poised to do the same. We don’t believe there is any black and white definitive answer to the social media question such as “All brands should do social media in-house” or “All brands should hire agencies to handle every aspect of their social media strategy” or “social media is the devil”. We will, however, try to shine some light on the facts to making the decision to bring social in-house vs. hiring an agency.

Reasons why social media might not be possible to accomplish in-house

There are two kinds of brands that cannot have internal social media teams: Brands that are too big for it to make sense and brands that are too small. Holding companies that have multiple and, in some cases, conflicting brands within their portfolios will always find it hard to act in real-time while being creative, conversational, and innovative. They are simply too big and often too corporate to pivot quickly, take on resources/risk internally and, more often then not, won’t have the core competencies to direct/manage social media teams. It makes more sense for them to just manage a roster of qualified agencies that ooze with communications prowess.

Small brands are a different story. Smaller brands are typically either short-handed or not willing to risk adding a head or two to their staff budget in order to bring social media in-house.  Time is usually their enemy in this case and they lack truly qualified experts or utility players that can set content strategy and goals, read and analyze data, gain insights, write, design, and manage multiple platforms and tools. In this scenario it becomes a much smarter investment to just find a strategic agency partnership.

There is also a big technology layer to social media so both big and small brands will need to have a firm understanding of how these platforms work, forecast how they will change and put the brand on the right track for sustained success.

Five tips for bringing social media in house

1. Clear cut goals should be established beforehand: Think of the internet as the Sahara desert. Large, unknown, and unforgiving. Without setting clear goals for your social media activities, you might as well be hiking across the Sahara and hoping for the best. YOU’RE GOING TO HAVE A BAD TIME. You need to figure out which metrics are important and why. Do you want to increase followers? Why? What value will both parties obtain and how can you align your strategies to that. If you want to increase interactions volume may most likely not be the answer. Maybe the goal of these efforts is to drive traffic or media impressions to your brand or site. Figure these out ahead of time so you don’t end up in a situation where you need to kill and eat a co-worker to survive the oppressive desert conditions.

2. Get the right people on the bus: If you’re going to keep social media in-house, you need to have the right dedicated resources for the job. It’s not an interns job, nor the job of a secretary part-time. Asking your already inundated brand manager to do it is not going to cut it either. Try to hire and match the credentials against capabilities within a communications agency. This person should be accustomed to writing within your brand voice and essence. They should be have a fundamental understanding of all social media platforms: the technology that powers them, the different ways in which users interact on them and how to track all of these activities. These hires should have a strategy on how to translate your brand style into a theme based on each platform (i.e What is the visual theme of your Instagram feed?).

Be forewarned, upon posting the social media position to the internet you will be inundated with responses from recent college grads who fancy themselves as “social media experts.” The sad truth is that just because someone reposts Mashable articles for their 200 followers to enjoy does not make them an expert. Likewise, steer clear of people that call themselves gurus (just because we hate that word here). Lastly, and most important, are the numbers. Just because a person has 10,000 followers or likes doesn’t mean they are popular or know social media. They could have easily bought the followers or joined a #followback club in an effort to boost their profile for people like you! Look at engagement metrics, look through their connections (likes, followers, etc) to make sure they are real and that their connections are real as well.

3. Social media is not a “set it and forget it” solution: Why is social media popular? Because this generation is made up of sad, shut-in mole people who prefer digital friendship? Maybe, but also because it is entertaining, constantly fresh and easily digestible. We live in a real-time society. Whether it be research, reviews, feedback, whatever, you have to be prepared for anything and everything. An unexpected cultural event can be a great platform to pivot off of. Your brand’s content needs to be realtime. Tune in 24/7 because your consumers are. No brand that posts on Facebook and thinks “Phew, that should be good for the month,” will be successful.

4. Proper tools should be purchased: Agencies don’t provide social media services powered by magic. Behind the curtain is a myriad of software solutions for listening, engagement, analytics, development, promotions and reporting. It generally won’t make financial sense for you to purchase all of these softwares for your in-house efforts, but you will certainly need to pick and choose the strongest offerings. Some platforms do more then others. Some integrate with other software like CRMs, marketing automation platforms or email systems. Do your research, go through the demos, and then do more research. Oh, there goes that time thing again.

5. There needs to be buy-in at every level: Social media is the constant and public voice of your brand. For that reason, there needs to be input from every level, especially the highest level; yes, we’re talking about the Wizard of Oz him/herself. The CEO might understand why social media is important to a brand, but they also need to understand how valuable their input is. The biggest asset of having an in-house team is the close proximity to leadership; make sure you’re taking advantage of that close proximity to accurately disseminate the brand’s voice and to take the real-time value you’re getting from your consumers and turn them into actions. That is the magic and that will turn you into a truly social brand.

Remember, whichever approach you are taking or planning to take isn’t going to happen over night. There is no silver bullet to solving the social-media “problem” or everyone would be awesome at it. Social media is a constantly evolving communications landscape which requires dedication, expertise and a wide array of skills that cannot be done by one single person. In most cases, a mixture of in-house and partnerships with agencies, consultants or production houses end up being the lions share of how brands are resourcing this problem today.

We’d love to get your thoughts and philosophies on social media and how you are currently resourcing that.

Digital Surgeons offers social media services at every level… from consulting and building in-house teams and strategies to full content creation and community management services. See us in action or give us a shout. Either way thanks for stopping by.

Information is an interesting thing. It is the glue that holds our reality together. Right now your mind is interpreting the flow of information that my mind has manifested as this article. The brain to brain link that is active was likely unrealized until just now. That’s reality for ya. Ignore the man behind the curtain.

In the book The Grand Design, Stephen Hawking and Leonard Mlodinow lay out the concept of Model-dependent realism. It defines the way in which the human brain receives, interprets, and processes sensory information. “Our perception-and hence the observation upon which our theories are based – is not direct, but rather is shaped by a kind of lens, the interpretive structure of our human brains.” The purpose of model-dependent realism is to overcome needing to know the meaning of our existence. We store experiences in memory and compare what we observe with what we know. Our interpretation is added to our model and our life goes on.

Now: Marry that Science to Advertising

Advertising’s aim is to integrate an alternate reality into the memory of the observer. It’s the craft of designing a realistic false reality to trigger an intended behavior in the user down the road. The internet has become a valuable tool for marketers to get their message in front of users, but the message is deformed by the user knowing they are looking at a screen.

The screen may not be the largest display medium available, but it’s analytical capabilities are vast. We can capture time on page, how often links are clicked, and where people came from. A successful campaign is largely based on how many users makes their way through the funnel, reach the end, and click on the call to action, or like the page. Metrics can establish the success or failure of a given campaign given the route a user takes.

But how do you measure the success of out-of-home advertising?

In the lab we work on side projects that we think could impact the future of advertising and push the bounds of what it means to work in this industry. We get the opportunity to think outside the box and work toward a more technologically rich future.

We wanted to build a silent interface between information and a participant’s observation of it. That means no mouse and keyboard, voice commands, or any direct knowledge by the user that a computer is involved. Its purpose should be to process body language, user focus, hesitation, and frustration in order to analyze the participant’s engagement with the information presented.

Now we create.

So that’s what we did. Using the Kinect we created a system for tracking an area that is cloned into a virtual replica of itself. We capture and analyse the skeletal position of the users within the area and detect activities that match our predefined list of potential interactions. By evaluating the surface topography around the skeletons, we determine several things such as body type, hips direction, shoulder direction, where the head is looking, and where the user is pointing. This goes into a formula that determines the level of participation and focus given by the user.

Our system also monitors a user’s joint angles over time in order to graph their body language over the course of their interaction. We can then tell you about the trends that have developed over the course of the campaign.

With this system we have created a new type of ad platform for Out of Home advertising. A previously thought “traditional” advertising unit is now taking on a digital identity with clearly defined metrics.

Marketing:

Video will get bigger as a medium

People aren’t getting any less lazy in 2013. Why read a blog post when the same information can be conveyed to you in a 30 second video? With streaming quality increasing and camera prices decreasing, in 2013 it will be easier than ever to produce and then distribute content.

Inbound marketing will grow within brands and businesses

The role of the content strategist will rise in conjunction. Strategic content will drive inbound marketing efforts and increase the need for full-time employees to curate that content.

International will be the new domestic, for many

The internet has made our very large world navigable from the comfort of our couches. The same will be said about ecommerce in 2013. With exciting young companies such as FiftyOne making American brands easily attainable all over the world, the term “foreign markets” might begin to seem a bit dated in 2013.

The idea of thinking global and acting local will be turned on its side with businesses thinking local and acting global.

Experiential and brand experiences will be the new website

The standard HTML homepage will increasingly be blown out of the water by interactive elements and experiences that surpass digital.

Mobile will finally start to be a real concern for marketers

This will force us to be better at delivering better mobile experiences (responsive, adaptive, context driven): This 2013 prediction is nearing the ranking of “Broken Record” in the marketing world for how often it is discussed. The conversation keeps occuring because of the astronomical amount of data pointing towards mobile dominance in 2013. Morgan Stanley is predicting that there will be more mobile devices (tablets and phones) accessing the internet than traditional computers (laptops and desktops) in 2013 for the first time EVER.

The term big data will be abused as agencies promise magic insights based on analytics

Data regarding demographics and reach will be the driving factor behind marketing decisions in every area. More media outlets will hire more statisticians, developers and computer scientists following the wild success of Nate Silver’s election coverage for the NY Times. Punditry will suffer at the hands of big, meaningful data.

Brands as platforms will be a big aspect of many brands content strategy

The past few years have a seen a much bigger push for both content and innovation from brands. Brands that have pushed the envelope have consistently won both critical acclaim and increases in revenue. 2013 will show an increase in brands pushing the envelope in terms of product creation and new business units in an attempt to excite consumers.

Brands will start really listening to their customers

And, thus, a new form of advertising will be born where the brands act as the facilitator for what the customers collectively agree they want. The importance of data and brand advocates as well as the amount of tools available will aid this trend.

Social Media

We will see more social media gurus

As social media grows in popularity, so too grows the number of 20 somethings who claim to be experts. What exactly qualifies one as an expert, or a “guru”, is up for interpretation so in 2013 you will see an even larger amount of people “interpreting” themselves that way.

Social media agencies of record will grow

The rationale will be a bigger need for social CRM support and influencer programs. As the importance of social media grows, the need for experts in the field will become equally important. No gurus here.

Pinterest will only get bigger

Clearly written in the pinterest mission statement, it says: “There is always more room for cute cupcake recipes and shirtless Jake Gyllenhal pictures”. We kid, it doesn’t say that (but it should). For all of the potential knocks against Pinterest it is still a beautifully designed platform and concept that has miles to go before it sleeps (see: dies like friendster and myspace). Brands are currently struggling to use it for marketing purposes already without an available public API. Once a public API is released to developers in the coming year, the possibilities are endless.

Twitter will keep stepping on toes

Twitter burned some bridges this year with moves like ending firehose access and cutting itself from Instagram.

Facebook will be a-ok

It has been quite a tumultuous year for Facebook, but we’re still behind them 100%. Their innovation related to ad units as well as the addition of Gifts this year has shown the companies continued focus on sustainable, business minded innovation. It’s tactical moves such as these that will allow them to return to a share price over $30.

Brands social interactions will have to get more personal and creative in 2013

This is due to the lack of polarizing global events (Olympics, Elections, etc.) News jacking will need to be a bit more inventive as the topics won’t be as predefined or dominating.

Retail outlets that stock products and brands voted on by its customers via social media

Give the people what they want! Social media gives everyone a voice and in 2013 we will see retail outlets begin listening to that voice a lot more closely while stocking their shelves.

Design:

More Pinterest copycats

We’re starting to see it already, the term “Pinterest-style” has infiltrated marketing vocabulary when discussing grid-like visual design. While we love Pinterest, we cannot promote additional copycat designs for EVERY situation. In addition, sites like The Fancy and Wanelo will continue to pop up and attempt to pull revenue away from Pinterest.

Infographics will have to step it up to maintain relevance

The one page “factsheets” are a dime a dozen and won’t cut it anymore. Everyone and their mothers are creating infographics now. It’s hard to imagine a piece of information that hasn’t been visualized in some sort of goofy cartoon format. Audiences are now almost as blind to infographics as they are to the formalized studies that the data originated from. Data must be visualized in real time, interactive formats in 2013. With information changing so quickly, static content is no longer appropriate to create.

Web design will shift to a more app-like style

And will, in turn, accommodate for responsive layouts.

Vertical and collapsible navigation will become more prominent.

With a larger focus on the end user in modern design, choices need to be avaliable. Maybe someone doesn’t want to be able to navigate. Maybe they want their website to look uncluttered. Features such as collapsible navigation will become common place as the end users are given the tools to alter the design experience to their preference.

Minimal color blocked design will be the new trend

Microsoft will (wrongly) get the credit. Color blocking has been a trend within digital and outside this season. We’ve seen color blocking gain momentum in fashion as well. Color blocking is great for breaking up content, categorizing information and creating more visually appealing design.

Technology:

Mobile Payment, not just for Starbucks anymore

Even banks have hopped on this trend with new tools such as Chase Quick Pay and V.me from Visa. Not only will the exchange of money between friends become digital, but tools like Passbook will allows users to pay through their phone.

More home automation and sensor/app driven combinations

The Nest is just one of many tools that will arrive in 2013 and force you to ask “How did I ever live without this?” From security measures to heating your place, your home will be just that much nicer when you walk through the door.

The year of Real-Time

Bidding, consumer engagement, customer service. For better or worse, the internet has allowed for instant gratification and that is what consumers now expect. Digital technology will have to operate in real time or risk the backlash of the angry internet consumer.

One-click checkout will be the norm

Amazon introduced it, the digital world adopted it. One-click checkout has become a minimum expectation for not only Amazon, but also Apple, Google and many other online retailers. More profit for retailers, more goodies shipped to your door!

The rise of Linux

The Linux desktop (via Ubuntu) will finally start getting some recognition due to a perfect storm of Valve throwing it’s full weight behind it (in order to release it’s own Linux powered steam console), canonical working with hardware vendors and game developers, and the arrival of windows 8 driving some users away. It won’t become a major player, but all of a sudden people who wouldn’t have known about Linux will hear about it this year. The niche PC gaming enthusiasts may begin defecting. It will also continue to gain traction in foreign governments and education, but the U.S. won’t look away from its Android and iOS devices long enough to notice. Mostly, as mobile devices become more popular and gaming on Linux becomes more capable, this upcoming year will set the stage for revolution in the PC gaming that could revitalize the industry while simultaneously making Linux a big player for the consumer.

Saas (Software as a service) and Pass (platform as a service) will grow among business

The ease of delivery and constant support will cause “____ as a service” offerings to continue to grow in 2013. Cloud based software is projected to double by 2015. Businesses have so many different options to choose from as well, with established companies in the space such as Oracle and Salesforce being outshined by a myriad of innovative startups.

The 10-foot user interface setup will start to become more commonplace as TV’s get smarter

More than this, the multi-device experiences will become more common and it will be standard for the mobile device will supplement the content on your television. Companies will see this like they saw the world wide web & try to abuse it for marketing.

Misc:

Second screen experience

chatter will continue but the numbers still won’t catch up fast enough. It’s going to take a universally accepted platform for this phenomenon to become common place; hashtags on twitter just won’t cut it

Startups will be fewer and farther between

We predict that investors will wise up and realize that so many of them have no business plan or plans for profitability. Current startups that offer free services will look to monetize.

Television manufacturers create a TV with a built-in motion sensor

After the success of the Microsoft Kinect and Smart TVs in the past few years, it makes sense for television manufacturers to cut out the middle-man (Microsoft’s Xbox 360) and to begin offering motion sensing capabilities directly

Up for Debate:

You’ve heard our two cents (at least), but what do you forsee for 2013? Our office couldn’t decide on these major topics, so let’s hear it.

Instagram

The social network had a fantastic 2012 with the $1 billion acquisition by Facebook and a user base surpassing 100 million. However, a recent Terms of Service chance (effective Jan. 16) gives considerable control over photos to Instagram and has the newly acquired 100 million ready to flock. Will Instagram overcome the negative press and suspicious users or will it fall into the social media graveyard?

Apple

As rumors swirl of the next iPhone and the long-awaited Apple TV, our staff continues to remain undecided on Apple’s future. Some think the enormous stock value and 2013 iDevices will keep the loyal fanboys and girls, while others feel Samsung has made significant advances and Apple’s lack of innovation this year will cause the company to suffer. What does 2013 have in store for Apple?

QR Codes

While we’ve never been fans of the QR code trend, we have seen them everywhere this year: in subway tunnels, on street signs, in magazines. We tend to prefer more enriching experiences (augmented reality anyone?) but meanwhile QR codes sneak their way in as a touchpoint for many campaigns. Will QR codes become more popular or fall short?