I’m going to let you in on a little secret: the best writers, be it your favorite authors or those that write for Smashing Magazine, don’t do it alone. Often, they work with an editor (or two), who will help them coalesce their words into something more compelling or easier to understand.

Having worked with several editors — and having been a technical editor myself — I’ve really come to appreciate this aspect of the writing process. Refinement is an essential aspect of any creative process. As refactoring code can make a program more logical and efficient, editing a text can allow an underlying idea to be more clearly stated, or make a piece more enjoyable to read.

I’m always on the look out for tools that can help me improve my craft. When I heard about Editorially, a collaborative writing tool designed with Web writers in mind, I immediately signed up. It quickly became an indispensable tool. From blog posts to talk outlines, I was bugging friends to provide feedback on my documents, which Editorially made very easy for them to do.

It had its shortcomings, of course. Two people couldn’t edit a document at the same time, while its focus on Web-based writing curtailed its utility; trying to tech edit a book with multiple chapters pushed the app beyond its natural limits. With the announcement that the service will close at the end of May, I’m left looking for an alternative. Can anything fill the void left by its untimely demise?

What Makes A Good Online Editing Tool?

Before we explore the alternatives, let’s examine what makes for a good Web-based collaborative writing tool.

• Distraction-free
  Writing can be a difficult task, with writers prone to bouts of extended procrastination. In the space of writing this article I’ve cleaned my flat, washed the dishes and ironed clothes I don’t even wear! That is to say, the fewer distractions a writing tool can offer, the better.

• Markdown support
  Markdown is popular with writers precisely because it requires little interaction with a UI, allowing them to focus on their words instead. Any Markdown editor should therefore provide keyboard shortcuts (bold, italic, heading levels, and so on), with the resulting text appropriately rendered; if you’ve wrapped a word in single asterisks to denote emphasis, you’d expect it to be appear italicized. Text also needs to be easy to read. Font face, type size, leading, and measure should be chosen with care.

• Annotation and discussion
  Writing is just half the story, and a true collaborative writing tool should aid the activities that follow: sharing, editing, discussion, and review. Editors, co-authors and other collaborators should be able to highlight or replace passages of text, and annotate these changes if required. When working with multiple contributors, everyone’s remarks should be easy to differentiate. Somewhere to hold a general discussion about the document is useful, too.

• Document handling
  A document can go through several revisions, so versioning is important to ensure earlier thoughts can be reinstated or referred back to later. Writers and editors can be working on many documents at a time, so having a means of organizing files and indicating their status (draft, review, final, and so on) is essential.

• Import and export
  Finally, any tool should fit in with various production workflows. That means lots of import options (email, Dropbox, upload, sanitized copy-and-paste from Word) and plenty of export options (plain text, PDF, HTML, and the rest).

The Contenders

With these requirements in mind, what products are available, and how do they compare? When I heard about the closure of Editorially, I asked on Twitter for some recommendations. Here are some of the suggestions I received:

GitHub

One of the first suggestions was GitHub. While it is by no means designed for writing documents, for many writers on the Web, this is where their content will end up. Any text file can be edited directly within GitHub’s website, although the interface is more attuned to writing code than prose. Being based on Git, versioning comes free, although managing branches and pull requests may be a little convoluted.

GitHub’s editing interface isn’t designed for writing prose. (Large preview)

Prose

If working directly with files in a GitHub repository appeals, you can improve the writing experience by using Prose, a beautifully designed and open-source editor built by Development Seed. Once you’ve authenticated with GitHub, the interface sits on top of your repos, providing an experience more suited to writing. This can be customized to expose any custom fields you have set up on a Jekyll or GitHub Pages install, too. Again, collaboration isn’t really a feature beyond that already provided by GitHub, but for small teams accustomed to that workflow, Prose may be a good fit.

Prose layers an interface designed for writers on existing GitHub repos. (Large preview)

Penflip

Taking the Git analogy a step further, Loren Burton created Penflip, which he describes as a “GitHub for writers“. If you’ve used GitHub, you will be immediately familiar with this tool. Much like GitHub repos, documents (termed projects in Penflip) are viewable publicly by default, but if you wish to make them private, you can pay to do so (prices currently start from $8 a month).

The editing interface uses the same one as open-sourced by Prose. This is a great decision, as Development Seed has created a fantastic editor that provides keyboard shortcuts and fully styled Markdown that is essential in such a tool.

With no means of annotating edits within a document, editors have to resort to surrounding their comments with square brackets. (Large preview)

The editing experience is a little more complicated. Once a document is shared with another Penflip user, they will then have their own copy to which they can make edits. These changes are then submitted back to the master version, which the original author can accept, comment on, or ignore. This enforced Git-like workflow prevents more piecemeal collaboration, however, instead preferring an all-or-nothing affair with regards to editing.

Poetica

OK, let’s move on from Git-based workflows, and try something completely different. Poetica, currently in private beta, has an incredibly innovative (dare I say, skeuomorphic) interface that uses a written proofreading notation that copyeditors will be familiar with.

From a technical standpoint it’s a marvel to look at, but in practice it can be a bit finicky to use. In terms of the features outlined in the introduction, Poetica lacks in many areas. There is no support for Markdown, no place to discuss changes, while heavy edits may overwhelm the text being reviewed (in a few cases, remarks overlapped one another).

Poetica has an incredibly polished and visually delightful interface, yet its utility may be limited to proofreading smaller texts. (Large preview)

Poetica is clearly a very proficient tool, but I suspect its focus is much tighter than the other tools covered in this article. As a proofreading tool it could be really useful, but for longer works and more complex editing, writers may soon find its limits.

Draft

A popular suggestion was Draft, developed by Nathan Kontny. It’s easy to see why, given its uncluttered interface and a slew of features, including a “Hemingway mode”, the ability to send text to a simplification service, and the option to have documents copyedited by “college-educated staff” (15 minutes costs $8).

So much of what makes a good writing experience comes down to the details, though, and I can’t say I enjoyed using Draft. The distraction-free interface comes at the cost of lengthy menus and model windows, with the interface lacking consistency in these areas. You can customize the typeface and font size used within the editor; that said, I never felt the need to alter this in other apps, but I did here.

Draft allows authors to review changes using an interface familiar to programmers — but is it well-suited to editors? (Large preview)

When it comes to editing, changes are reviewed with a diff-like interface that I found truly baffling. Again, we see a tendency towards using programming concepts ill-suited to the free-flowing collaboration seen between writers and editors.

Typewrite

Typewrite aims to be “one of the best writing tools you’ve ever had”. It’s certainly one of the most beautiful, and competitors could learn a lot from Typewrite’s streamlined interface. Its Markdown editor is comparable to that of Prose and Penflip, although I found it to be quite buggy (inaccurate text selection and incorrect undos) but these issues can be easily ironed out. I also found it odd that the document title was missing from the UI, instead hidden behind a menu item. It’s the small things.

Typewrite has a beautifully stripped down interface, although its Markdown editor is a little buggy. (Large preview)

Perhaps Typewrite’s most interesting feature is its support for real-time editing, which allows multiple authors to work on the same text at the same time. This will be familiar to users of Google Docs (only excluded from this article due to its lack of Markdown support), although there is no means of knowing which author is making which changes. This feature also comes at the cost of any true editing features: there is no means of highlighting passages of text and adding remarks, for example.

As it currently stands, this tool is best suited to co-authoring rather than collaboration between an author and an editor or reviewer.

Onword

Also worthy of mention, Onword is a straightforward, stripped down editor created by Dan Eden. It features no collaboration or editing tools, and its Markdown editor is fairly basic. And yet, I find the simplicity of this app compelling. If Dan were to expand its capabilities to provide a workflow for editing documents, I would be a happy man.

Onword provides a very stripped down interface for writing. (Large preview)

And The Winner Is…?

Before I sat down to write this article, I had only briefly glimpsed the homepages of the alternatives people had suggested to me. Each is beautifully designed and full of promise, but you should never judge a book by its cover (pun intended).

Only when examined in detail, do you realize the Herculean task that lies ahead of anyone wishing to write such an app — and for an audience so attuned to the details. Having reviewed the alternatives, I realize how much I took for granted in the design of Editorially, for which the highest praise that can be given is: it stayed out of the way.

In Editorially, we had a product for editors, by editors. In surveying the landscape of its competitors, we see many that provide wonderful, easy to use and distraction-free writing interfaces, but fail to understand the editing process. Mapping programming metaphors like branching and diffs seems like great ideas in abstract, but in practice impede the less structured act of review and refinement.

It’s important to remember that many of these tools are built as side-projects, whereas Editorially benefited from a full-time team working on the product for a year. There is plenty of promise in each of these apps, and with continued development we may see a worthy successor. Until that time, I suspect many will revert to whichever hacks and broken processes they were using previously: word-processors, emails, printouts and scribbled pen marks.

(og, il)

Front page image credits: Torque.

The post After Editorially: The Search For Alternative Collaborative Online Writing Tools appeared first on Smashing Magazine.

(Options beyond a degree are important. Flickr photo by Faruk Ateş)

Most electronic devices use software and most businesses are backed with software, whether on computers or in the cloud. All this requires software and web development. The good news for programmers? There is no sign of computer-related job shortages.

“Software drives Amazon recommendations, the auto-complete suggestions and corrections as you type, banking transactions, the Mars Curiosity rover, and stock trades,” says Jacob Gulotta, a 28-year-old server developer at DoubleDown Interactive in Seattle. “Software is used extensively in research for simulations. You can pick almost any aspect of the modern world that isn’t completely mechanical and there will be a software component that requires a programmer somewhere [who] wrote the code.”

Free trial on Treehouse: Are you interested in learning the skills employers need now? Click here to start a free 14-day trial on Treehouse.

Seemingly every device needs computer software, and companies need websites and apps — and the developer to write it. But does every programmer need a computer science degree?

“I had very little formal education in software, taking three or four introductory classes in college,” Gulotta says. “Most of what I know is from reading books and whatever I can find online as well as from peers, both in discussions and from looking at their code.”

The U.S. Bureau of Labor Statistics projects that jobs in computer science fields will be some of the fastest growing over the next five years. But the BLS also predicted a large gap — as large as 39 percent — between the number of students earning computer science degrees and the number of projected annual computer science-related jobs.

Gulotta says earning a computer science degree can be a wise move, but isn’t necessary and isn’t the route he took. He graduated from the University of Arizona in 2008 with a bachelor of science in engineering management. He says getting hired as a programmer without a computer science degree takes some work. But being a good programmer takes work, too.

“It can be done if you learn on your own and demonstrate to the potential employer sufficient knowledge and ability equivalent to what’s expected of a college graduate, like maintaining a public portfolio of projects,” Gulotta says.

Dmitri Cherniak

It’s those kind of portfolios Beaconreader.com co-founder and CTO Dmitri Cherniak, 25, will be poring through soon.

To date, he has been the primary force in building and problem-solving the code for Beaconreader.com, which debuted seven months ago. But growth has made hiring additional developers a priority. Beaconreader.com is a crowdfunding site he, along with co-founders Adrian Sanders and Daniel Fletcher, created.

“I am what you call a ‘full-stack’ developer, which means I can comfortably work anywhere on the technology stack — design, front-end, back-end, etc,” Cherniak says. “I was originally a back-end engineer but was forced to become sufficient across the whole stack because we didn’t have any money to pay a designer or front-end developer to work with us for a long time.”

He says he is on the hunt for people, like him, who are comfortable tackling several different parts of the site. He will bring in more specialized employees later on.

Cherniak’s search won’t necessarily focus on people with computer science degrees. For him, the only time a computer science degree would be a primary concern in the hiring process is if the candidate was from outside the United States, as work visas can require advanced degrees.

“People without degrees but [who] have good portfolios, good references, and good open source work are definitely in the running,” Cherniak says. “Having a Github profile with code examples is a really great way to show off what you can do. I’ve seen tons of people without CS degrees who are already, or have become, great developers and engineers.”

He says people who are technically savvy and willing to put in the work can learn as much about computer science online as at a university. He says one of the few things a university can do that online learning hasn’t proven well-adapted for is forcing people to work together and complete group assignments.

Universities Are Very Pricey for Little Advantage

University of Wisconsin at Oshkosh computer science major Joe Roskopf, 22, says there are definite pros and cons to diving into a career without a degree. Roskopf says a person without a degree could lack some structure and design standards, but at the same time people will plop down $50,000 or more to learn things at a university that are readily available on the web.

According to U.S. News’ annual college rankings, the University of Wisconsin is among the top school systems for computer science degrees in the United States. Others include Cornell University, the Massachusetts Institute of Technology, and Carnegie Mellon University. Many college programs cost students about $35,000 in debt, according to Fidelity Investments’ Cost-Conscious College Graduates Study. Carnegie Mellon’s program costs as much as $64,000.

Roskopf says because of the emergence of online tools, it’s a skill anyone can develop when they chose. And it’s not just for the hardcore nerds or the ultra-intelligent.

“I think that trend is certainly on the path to changing for the better,” he says. “Let’s say you don’t like your stock camera app on your iPhone/Android phone. It’s certainly not as difficult to go out and make your own camera app as most people would think.”

Gulotta says earning a degree may not make someone a good programmer.

“Programming is a skill and, like any skill, becoming a good programmer takes time and practice, requiring dedication. Expect to put in hours upon hours of work, even with a computer science degree. A degree equips you with a general knowledge of how computers work and a set of tools that can be applied through programming to solve problems. But having a hammer, nails, and a saw doesn’t mean you could build a quality chair,” Gulotta says. “A person can expect to struggle and to be quite bad at the start, but to improve over time, like learning to play an instrument. Never stop learning. Seek out new things. Don’t wait for them to come to you. Experiment on your own.”

Jimmy Alford is a journalist deep in the heart of Texas. You can see his other work at www.txprophotog.com.

The post Do You Really Need a Computer Science Degree? appeared first on Treehouse Blog.

I am in the pre-medical society, Global Medical Brigades, and the club tennis team. This past year I was a campus tour guide, but next year I will be a Learning Assistant for Dr. Gierasch in CHEM 351!

Read his abstract here...

The latest version of WordPress named “Smith” was released yesterday which brings us another round of core changes. This time, the team worked mainly on the back-end editing and admin functions, such as a big TinyMCE (visual editor) update, gallery previews, media playlists, an improved widget UI and live theme previews (only to mention a few). Here’s what you need to know about the major changes in WordPress 3.9.

Improved Widget Interface

While the old widget interface set the standard for drag-and-drop UI when it was introduced, it was time for an overhaul. The developer team took the Widget Customizer plugin and essentially built it into the core.

The biggest changes that come with the new widget interface are live previews, among others:

• Editing existing widgets
• Adding a new widgets
• Widget reordering
• Entirely remove Widgets
• Adding a new widget

(See large preview)

Updated Visual Editor

The visual editor has received a major overhaul (both under the hood and on the UI end), adding a horizontal line button, updated Plupload, and an updated TinyMCE. Small visual changes seem to have been applied to many different button icons.

The new visual editor brings with it gallery previews, meaning no more place holder boxes for galleries! You’ll have a live preview of your gallery, just like you do with images and other media.

TinyMCE has also been updated to version 4.0 for WordPress 3.9. Plupload 2.x has made it’s way in, as well. It handles most of the file upload interfaces in WordPress.

(See large preview)

The updated visual editor also brings drag & drop functionality, allowing you to drag images from your desktop, and drop them right into the post. They’ll be automatically formatted to fit the post.

Here’s a quick preview of how it works:

Live Theme Preview Additions

Live theme preview gives you a way to see how your site would look using a different theme. This has been around for a while and WordPress is finally adding new features to the framework they’ve built.

Apart from the usual customizations options like color, title and whatever else is defined by the theme, you can now add widgets and rearrange them, seeing exactly how they will look once saved. In addition, the header image facility has received an overhaul and now provides even more flexibility.

Easier Theme Installation

The new theme installation interface is a vast improvement over the old. It will be blatantly obvious to anyone who’s ever seen the pre-WordPress 3.9 theme installation screen.

Installing new themes is even easier now, too. The theme installation interface has been totally redone. Some of the most popular themes are displayed immediately in the “Featured” tab, for quick installation.

(See large preview)

There are also tabs for popular themes and latest themes. The feature filter has been moved into it’s own tab, and has been generally cleaned up.

Audio & Video Playlists

Users are now able to create audio and video playlists with WordPress 3.9. They work as a shortcode, just like the image galleries do currently. Uploading audio and video is handled through the usual media uploader, with images and everything else. From there, you have the option to add them to a playlist.

A neat little feature is that WordPress 3.9 will try to automatically fetch album cover artwork using the ID3 tags in your media file.

Key Points For Developers

Plugin and theme developers need to know a few new and important things. Right when upgrading to WordPress 3.9, four new utility functions are mentioned. doing_action() and doing_filter() allow for identifying a hook in progress. The other two functions, has_image_size() and remove_image_size() allow manipulation of custom image sizes.

Various external libraries have been updated, including jQuery, the ever popular JavaScript framework. TinyMCE, which provides the text and visual editing components. Underscore, a utility-belt for functional JavaScript programming. Plupload, which drives most of the upload interfaces in WordPress. Backbone, which uses Underscore as it’s backbone, essentially provides models with key-value bindings and custom events. MediaElement is a well-crafted HTML5 audio and video player. Masonry 3 is a cascading grid layout library.

The database layer has also been improved, making it more fault-resistant and bringing improved compatibility with PHP 5.5 and MySQL 5.6. For example, PHP’s mysqli library is now used when PHP 5.5+ is available. Autosave functionality has been improved, as well.

Your themes can now make use of HTML5 galleries and captions. Adding add_theme_support( 'html5', array( 'gallery', 'caption' ) ); to your theme’s functions.php file will enable HTML5 galleries and captions. Symlinked plugins are a new thing to WordPress 3.9. While it was technically possible in the past, it’s now fully supported:

“One of the cool little features included with 3.9 is the ability to symlink plugin directories. While it has been possible to symlink plugins in the past, functions such as plugins_url() return the wrong URL, which causes breakage in most plugins.”

If you’re a theme or a plugin developer, don’t forget to update your repositories. For some items you may just need to change your “Tested Up To” strings, in other cases (especially if you utilize heavily modified editor or upload configurations) you may need to look at the core changes in more detail.

(Large preview)

So, What Are You Waiting For?

Keep in mind that upgrading your WordPress installation is the number one way to prevent malicious activity and exploits. As always, before any update, please do not forget to back up your database just in case anything goes pear shaped!

WordPress 3.9 is available for download at the usual location, http://wordpress.org/download/.

(dp, il)

The post What You Need To Know About WordPress 3.9 appeared first on Smashing Magazine.

We all know intuitively what makes a website look bad: overused bevel effects, corny clip art, overcrowded layouts. These annoyances are easily corrected by developing with design fundamentals in mind—the same principles used by professional designers and artists alike.

Great websites bring together form and function. In fact, well-designed websites are seen as more credible, according to a Stanford study and are actually easier to use (as studied by researcher Don Norman). So here are five fundamentals to help you keep quality design at the forefront of your practice.

1) Follow the rules…mostly

In design school, they’ll give you a list of principles to abide by that assign rules to beauty—elements like layout, order and symmetry. But as you advance, you’re then told to break the rules a bit to create places for a viewer’s eyes to look by employing elements like variety, tension or contrast.

Here’s an example of a page I did in Edge Reflow CC. Can you spot the different design elements being employed, then played with?

2) Use imagery and icons to communicate when possible

There are some universal icons that people are trained to respond to. The magnifying glass (search), the house (home page) and floppy disk (save) are ingrained into your users already. Take advantage of those visual shortcuts; all those road signs should be immediately recognizable to you.

3) Color as a design element, not as decoration

Color makes all the difference, especially as our screens get better on our phones and tablets. It’s a facet of design that can be a really key part of the story your website wants to tell. Just use color to support content, not decorate a page. And often if you’re using a photo, the colors in the design should be sampled from the photos used so your design has a nice unified feel.

I quite like pulling color examples with color swatches – and the Adobe Kuler Web app is a great way to play with different themes and then import them into your design tools. One of the best rules to go with is to use complimentary colors. Which is basically using warm colors and cool colors together to provide balance.

4) Choose fonts that support content

There are literally thousands of fonts to choose from.

It’s up to you to mix and match – but remember that it’s best practice to use only up to three fonts at a time—a nice headline font, one for the main body of text, then one for any sort of call-out you might need. Often, that means using a sans-serif for the body copy, and for headlines you can get more interesting with either serif or sans-serif.

5) Help from others

All right, you’ve got your basic design elements, with pretty icons and pictures, with a sound color scheme and fun fonts. What’s next?

Getting help from others, of course! And not just random people on the street, but constructive critique from people who really know their stuff, like other designers/developers. This can be instrumental to go from an OK website to one that really pops. If you’ve never used Behance to post a work-in-progess, I recommend giving it a try. The active community will do more than just tell you “to make the logo bigger” – but give you advice that can make the difference between a good website and a great one.

To dive deeper into how to apply design elements to web development, check out my presentation from SXSW:

Online course: How to Build Habit-Forming Technology – only $29!