42 Tools All Speedy Front-End Developers Use

Every developer has a preferred way to code.

Some use only the basics – a text editor and a browser. Others like to incorporate apps, platforms, and tools to make sure everything gets done.

If you fall in the latter category, you’re probably always on the lookout for the next best tool to aid your projects. After all, who doesn’t love something that can reduce your time and increase your productivity?

That’s why we’ve put together a list of the best development tools for those who want to get things done quickly and efficiently.

Take a look.

Download our free resource to find 36 more unique tools for devs not listed here.

Source Control

github

GitHub – GitHub is probably the most well known platform, but not everyone uses it. But if you’re looking to build a site efficiently (especially a static site) then GitHub is perfect. It includes a source-code browser, in-line editing, wikis, ticketing, and more. The best part is that it’s completely open source (that means free!).

bitbucket

Bitbucket – Bitbucket is another free source code host. It’s a distributed version control system that makes it easy for you to collaborate with your team. Approve code review with pull requests, use flexible deployments models, and take advantage of their private and public repositories.

sourcetree

SourceTree – Whether you’re a newbie developer or you just love using Mac, SourceTree is a free Mac client for Git and Mercurial version control systems. Manage all your repositories, hosted or local, through SourceTree’s simple interface.

Other Options

Versions – Another subversion Mac client

Tower – Another Git client for Mac.

Offscale – A tool for database version management

Development Platforms

heroku

Heroku – Heroku is a popular platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Build, manage, scale, and deploy great apps quickly, without needing to worry about updating or patching.

kinvey

Kinvey – If you’re more interested in mobile app development, Kinvey is a back end as a service (BaaS) provider that makes it easy for developers to set up, use and operate a cloud backend for their mobile apps.

firebase

Firebase – Another BaaS, Firebase is a scalable real-time backend for your website. It’s made up of complementary features that you can mix-and-match to fit your needs.

cloud9

Cloud9 – An online IDE that combines a powerful online code editor with a full Ubuntu workspace in the cloud. Simply pick your configuration and develop your app. No need to spend valuable development time on system setup and maintenance.

appharbor

AppHarbor – Used by thousands of developers for everything from simple blogs to high traffic web applications, AppHarbor is a fully hosted .NET Platform as a Service. This PaaS can deploy and scale any standard .NET application to the cloud.

Other Options

Parse – Another mobile app platform

CloudMine – Another BaaS for mobile and web apps

Koding – Browser-based IDE

dotCloud – Deploy, manage, and scale any web app

StackMob – Powering mobile applications

PHP Fog – Cloud platform for PHP

Backrest – Easy creation of SaaS data backends

Codeanywhere – Online code editor

NeptuneIDE – Full-featured, cloud-based IDE for PHP

Fusegrid – ColdFusion in the cloud

Cloud IDE – Code and deploy in the cloud

ToolsCloud – Development environment in the cloud

Bug Tracking, Feedback, and Monitoring

crashlytics

Crashlytics – This powerful and lightweight crash reporting system for iOS and Android is perfect for mobile app developers who need to work out the kinks in their system before, during, and after launch. Every crash report is analyzed and every bug tracked so that you don’t have to do it.

usersnap

Usersnap – If you’re more of a visual person and you prefer snapshots to track bugs or share potential issues with your team (or clients), then Usersnap is a great option. Organize your web projects and create screenshots of any potential problems.

rollbar

Rollbar – Rollbar collects errors that happen in your application, notifies you, and analyzes them so you can debug and fix them in real time. Works with Ruby, Python, PHP, Node.js, JavaScript, and more. It’s “Full-stack error monitoring for all apps in any language.”

Other Options

New Relic – Web application performance management (APM)

Exceptional – Tracks errors in web apps and reports them in real time

BugSense – Mobile app insights and crash reporting

Bugzilla – Server software to help you manage software development

Bugify – Simple PHP issue tracking for small teams

BugHerd – Tracks bugs and allows you to capture and share feedback

Snowy Evening – Bug and issue tracking with Github integration

APIs

twilio

Twilio – Twilio is a cloud communications platform for building SMS, Voice, and Messaging applications on an API. Embed messaging, voice, and video in your apps with their API, and the best part is that you can get started in as little as five minutes. So, if you’re in a rush, you have help.

cloudeo

Cloudeo – If you’re into geo data, then this is the perfect solution for you. Cloudeo is another SaaS that allows you to rent, evaluate, and stream geo data in all of your applications. It’s a unique option for developers needing to include more complicated APIs like this.

embedly

Embedly – On the simpler side of things, Embedly delivers ultra-fast and easy to use products and tools for richer sites and apps. Convert standard URLs into embedded videos, images, and more to engage your audience through rich media.

mailgun

Mailgun – Mailgun is a surprisingly powerful API that lets you send, receive, and track email effortlessly. Easy SMTP integration and a simple, RESTful API removes the messy details of sending transactional or bulk email. Everything is built API first with a focus on simplicity and compliance to standards.

Other Options

Factual – Structured data APIs

PubNub – Cloud-hosted messaging service for real-time apps

Context.IO – Leverage email data in applications with this API

Semantics3 – APIs for product data

Sent.ly – SMS HTTP API using your own Android phone

Looking for even more tools? Check out our list of 36 more tools for devs.

Final Thoughts

Finding the right app, platform, or tool to help you get through projects isn’t easy. A lot of it depends on preference, working style, and sometimes the power of the tool itself to get the job done.

But one thing’s for sure: If you need help moving a project along, there’s probably a tool for that.

This is great for developers who want to get things done as fast and easy as possible. Or at the very least, it can inspire you to create a SaaS, BaaS, or PaaS of your own to help other struggling developers get the job done.

Best iPhone and Android Apps for Busy Developers

Mobile apps are everywhere, and for good reason.

As of last year, the total number of downloaded mobile apps was a little more than 100 billion, with that number projected to reach as high as 200 billion in 2017.

Statistics also show that up to 89% of mobile users spend their time on apps versus 11% who browse the web. That means that during any given day, the average user will spend over an hour fiddling around with apps. And web developers are no exception.

In fact, there are many helpful apps out there that can help developers do a better job finishing projects, communicating with clients, or sharpening skills.

But why would you use a mobile app if you have a laptop or desktop nearby?

What other great apps are out there? Grab our list of 7 More Apps for Developers with iPads and find out.

3 Reasons to Use Mobile Apps

There are a number of reasons you might want to jump off of your desktop browser and open up the app store on your smartphone:

1. You Work On the Go

Whether you spend a lot of time traveling or you simply like to work from the comfort of your own couch, getting to work from wherever you want is a big convenience that mobile apps provide.

Why spend all the time lugging around your laptop or going into the office to work on your desktop when you can pull out your phone, do some quick HTML edits, and move on with your day?

Mobile apps allow you to update web pages, make quick sketches, code HTML, and upload and share projects from anywhere.

2. You’re Testing Your Mobile Site

More than 80% of all Internet users own a smartphone and use mobile devices to browse the web, so the need for mobile testing is high. But switching back and forth between testing sites on an actual mobile device and making updates to your code can be time consuming.

Why not test your site and then use an app to make live updates? You may not need the feature all of the time, but mobile editing apps can be the perfect solution for a quick fix or to test sites on the fly.

3. You Like to Multitask

No one really likes to work when they’re not in the office, but sometimes project needs come first. The good news is that you can use mobile apps alongside traditional desktop apps to help you in the office and out.

Check your site stats while you’re away to make sure everything’s running smoothly, reference code when you’re testing without opening another browser, or simply make a quick sketch while you’re out to coffee to try when you’re back at work.

Mobile apps have the flexibility to help you multitask to achieve objectives faster than ever, and while some apps are helpful for minor tasks, more robust apps may surprise you.

Best Dev Apps for iOS and Android

With all of that being said, here are the top apps that developers should try out to improve their overall performance and productivity.

JavaScript Reference

JSreference

There are plenty of reference apps on the market, but JavaScript Reference is derived from the W3CSchool’s documentation and includes a clean, easy-to-use interface that will make it effortless to look up the code you need.

Android Find it here.

Google Analytics

GoogleAnalytics

If you’re already working with Google Analytics for your website, you’ll want to download the GA app. It gives you access to many of the details from your GA account in real time, and can keep you up to date on your SEO.

iOS Find it here.

Android Find it here.

WordPress

WordPress

Having quick access to your self-hosted WordPress site can be handy, especially if things have a tendency to go wrong at the last minute. With this app you can manage your site, view stats, moderate comments, create and edit posts and pages, and upload media.

iOS Find it here.

Android Find it here.

WebMaster’s HTML Editor

webmasterhtml

This Android HTML editor makes the perfect addition to your toolbox. It supports HTML, CSS, JavaScript, and PHP. While you can save some money with their free version, those looking for some additional features and function like full previews and code support should spring for the full version.

Android Find it here.

DroidEdit Pro

droideditpro

Another Android app, DroidEdit is a text and source code editor that lets you highlight syntax for several languages, search and replace, open files from a file manager, and more.

Android Find it here.

Espresso HTML

EspressoHTML

For the iPhone user, Espresso HTML is a simple HTML and JavaScript editor to help you test scripts and web pages on the fly. You can save your documents in the app and access them later via iTunes if needed.

iOS Find it here.

AndFTP

andftp

AndFTP is a FTP, FTPS, SCP, SFTP client that comes with both a device and FTP file browser. It allows you to download, upload, synchronize and share features, as well as open local and remote files, rename, delete, update permissions, and more.

Android Find it here.

View Source

ViewSource

View Source is an iOS app that comes with a Safari extension to help you view the source code for any web page. You can enter a URL and immediately see the code, highlight syntax, and copy and paste into any other app or program.

iOS Find it here.

ByWord

Byword1

ByWord is a writing app with Markdown for the iPhone that allows you to sync text documents, add footnotes, tables and references, and export Markdown documents to PDF or HTML.

iOS Find it here.

Harvest

harvest

While not specifically targeted to developers, Harvest is a powerful tracking app that helps you track time, log expenses, and manage and send invoices from anywhere. For developers who spend more time recording things than actually working on projects, this app is a must.

iOS Find it here.

Android Find it here.

Dropbox

Dropbox

The Dropbox mobile app is the same as the desktop app, giving you a safe space to backup, access, and share any files you need at any time. You can also send large files to anyone, even if they don’t have a Dropbox account.

iOS Find it here.

Android Find it here.

Adobe Cloud Apps

adobecloud

For designers and developers alike, Adobe has a suite of mobile apps to help productivity, including Illustrator Draw, Photoshop Sketch, Photoshop Fix, Photoshop Mix, Lightroom, Comp CC, Preview CC, and more.

iOS & Android Find them here.

Final Thoughts

Whether you’re looking to brush up on your coding skills, make a quick project sketch, or you need to make updates to your site on the go, mobile apps are the perfect solution.

Remember that most apps come with a free or cheap version so that you can try it out before you fully commit. So, don’t be afraid to use mobile and tablet apps to aid your process during any project.

Don’t forget to grab our list of iPad apps for developers!

Bridge the Gap Between Tech and Non-Tech

In the software industry, project managers and marketers want to get things done quickly, without the complications of bureaucracy. They want the business to grow, money to pour in and more and more new things to be implemented and revolutionize their company. Some of them want to become rich and famous, well – at least in their well-delimited sphere of marketers and managing staff.

Developers on the other hand want to focus on one task at a time, write amazing code that changes the web and servers, be challenged and tackle some of the most difficult computer science issues and solve them, and especially – not get constantly interrupted and distracted by endless trivial requests. “Programming is best done “in the zone” — a (pleasant) state of mind where your focus on the task is absolute and everything seems easy. This is probably much like “the zone” for musicians and athletes.” says Morgan Johansson who calls himself a “professional software tinkerer”, senior.  

A while ago on Quora someone asked programmers what they thought when hearing the phrase “I just need a tech co-founder.” A lot of rage almost instantly started pouring on from there as more and more techies joined the thread. “The[se non-tech founders] just care about equity,” commented cynically one developer. A couple of comments down, a CEO calls programmers “arrogant”, to which comes the response that non-techies should stop being so defensive, and everybody has ideas, let’s see how we put them into practice or rather, who puts them into practice for us.

Bonus: Learn some quick technical tricks in our free resource on proper QA testing.

Soft Skills Aren’t Lesser Skills

As newer startups have commenced building more diversified teams with an increasing overlap in capabilities, there still remains a sense of mistrust between tech and non-tech, a confusion about how to assess a person’s “soft skills,” attributes that enable them to interact effectively and harmoniously with other people, the widespread assumption that these skills are inferior to “hard skills” – specific, teachable abilities required occupationally.

If programmers are able to understand “soft skills” as competencies, they may be more likely to appreciate their value and the potential of having a non-tech person on their team. Capabilities of this sort may be the ability to make difficult connections, among ideas and concepts that are at least apparently unrelated, an understanding of one’s place in the world, the ability to critically assess how systems work (and fail), an openness to learning, a “mental playfulness” as Bill Watterson calls it that allows one to “wander into new territories” even if unsure of what they may find.

Many in the tech-world undervalue soft skills: this is most evident in the belief that artificial intelligence (extremely capable at hard skills, but not so much at soft skills) will be the solution to all mankind’s problems. Google’s Director of Engineering Damon Horowitz, who studied artificial intelligence with a specialization in natural language processing, said that it was while studying philosophy that he came to realize that no matter how much he improved upon it, the AI system itself had its limitations and the changes would not be incremental. He says his focus then shifted from assuming that machines could resolve all of our problems to looking at how they could “facilitate human problem solving” instead.

One can argue that this expansion of the mind is also connected to the ability to have a broader or “macro” view of things. For instance, Reid Hoffman, founder of LinkedIn, said that through studying philosophy at Oxford, he wanted to “strengthen public intellectual culture.” Caterina Fake, founder of Findery, knew she wanted to create something around the idea of community and the sharing of stories through art. The acknowledgement of different kinds of capabilities is a necessary first step to bridge the trust gap between tech and non-tech.

What Do you Wish Your Boss Knew?

Most likely the director of your company is a non-tech figure. The manager who’s the people’s person / with people’s skills – or so you’d hope at least – and who’s really good at marketing the product and getting it out there, in the eye of the storm. But you, the dev, have your ideas and contributions too, to the management of the business – at least internally. Some of the best contributions a developer could bring to the non-techies’ team and managers to bridge the gap would be:

Empowering the non-techies to do technical work by teaching them or encouraging them to learn tools that are easy for anyone to learn. From how to use Photoshop and Illustrator Essentials down to using tools such as FormKeep to generate forms or bringing minimal edits to the stylesheets, these situations are win-win. Win for the developer which won’t have to come back on editing and re-editing or correcting typos that can be identified and fixed in a second by the non-tech, win for the non-tech in terms of adding hard skills to his trade. It might seem such a tiny thing, a change of size of the typeface, color, or other tweaks that may seem irrelevant and yet save you from having to dig through miles of code, while someone from the non-tech team that has stumbled upon the discovery while doing the QA testing could edit it there and then.

Helping them understand that perceived output is not the same as actual output. A poor developer will write unsustainable code, and then jump around from one bug to the next, spending nights and weekends in the office and impressing their superior’s. A good developer will spend time thinking about the problem (which from an outside perspective can look like daydreaming). They’ll write clean, stable code, clock out at 5pm, and appear lazy in comparison to the first developer. Yet the latter developer is infinitely more valuable to the company than the former. Unfortunately, this can be very difficult to perceive from the outside, especially for those not already tech-oriented. Engaging in discussions with developers about these issues can help to understand what it is developers do all day, and help form a good instinct for evaluating employees.

Problem pattern matching. Getting your boss to learn coding is a big ask, and takes away from more important things they could be doing. Getting your boss to learn how to think like a coder, on the other hand, is beneficial to everyone. Thinking like a coder is more often than not a simple game of matching problems with known solutions, and knowing when to apply which solution. With enough involvement in project details, your boss will eventually come to know the most common solutions.

Assist with the interviewing. This one is really a direct corollary of the contribution right above. Your developers might just be the right figures to help you select new personnel, especially when it comes to positions that can be difficult to understand from the outside. Although developers and designers, for example, can often be at odds with each other, a good developer can identify a designer they’ll get along with, and vice versa. Involving the developers can ensure you’ll have the right questions to ask to figure whether the interviewee is a good fit or not.

Recognize merits. Recognize when non-tech makes efforts to learn about the tech world. A little bit of gratefulness goes a long way, and it’s important to positively reinforce any behavior you want more of. If your manager is learning HTML, or the marketers are learning Photoshop, that helps communication between you and balances the workload. If they have trouble, help them out in a way that lets them learn for next time – don’t just speed through the job while their eyes gloss over.

Bonus: Learn some quick technical tricks in our free resource on proper QA testing.

Learning to Think – An Independent Task

If you are a non-techie, odds are you might have more initiative towards taking tasks that push you out of your zone of comfort. Therefore perhaps the approach of Caterina Fake, oil painter and linguist turned techie entrepreneur, doesn’t seem so alien after all. She wanted to “translate” her training as an artist onto the web, and in the end programming languages, apart from being logical and mathematical are, precisely how their name goes, languages. More than learning to code, the long term goal for non-techies is learning how to think like a coder.

Developing a sense of logic in fact is not only mathematical – a science logics was a part of the human sciences for thousands of years, a branch of philosophy. It teaches and involves the use of precise and formal methods of thinking, such as abstractions, boolean logic, number and set theories so you can solve problems in an air-tight manner. One of the best ways to understand the human mind is to try to replicate it. Topics like AI, machine learning, natural language processing are not just part of computer science but also biology, psychology, philosophy, and mathematics. Damon Horowitz, Director of Engineering at Google, suggests that most of the evil in the world comes not from bad intentions but from “not thinking.”

What developers want most of all – to solve problems – could be the key to solving this gap. Creative problem solving is a skill considered both “hard” and “soft”. As such, it’s a key part of the lives of both tech and non-tech. Understanding that both camps are using the same skills in different ways can help the communication across the gap. The big difference is that while tech uses creative problem solving to solve technical problems, non-tech uses it to solve human problems.

That said, the best programmers are those who use creative problem solving to solve both technical and human problems at the same time. They’ve realized that the software that they’re writing is for people, even if it’s just the back end of a complicated system or a protocol that no one but other developers will ever use. They write documentation because it’s important. They help people use their code. They’re willing to go the extra mile and deal with a bit more complexity to give the people using their software the right solution. This is the point where techies’ and non-techies’ best intentions should converge, in the People First Axiom, because this is the goal that can ultimately bridge the gap.

 

Bridging the Gap Between Tech and Non-Tech – A Marketer’s Perspective

It was 2011 and I had just started working for a web company in its IT sector. My role was one of the less “defined” ones, at the confluence of sales and tech, a bit the middle-man amongst departments that were in tacit conflict. There was always at least one project sold under a misunderstanding or misrepresentation.

When pointing out an impending disaster to the directors (such as a project being undersold, or us being unprepared and understaffed to complete it on time), they would take the sales rep’s side because “he is the one who brings the money in, certainly not the devs.” Yet it was the devs who were turning those projects into concrete realities. It was the devs who should have been consulted for an in depth requirements analysis and a correct time cost evaluation, for sales to evaluate the money cost from there on. The departments, however, avoided communicating with each other whenever they could, assuming the other’s affairs were secondary to their own. They both overestimated their grasp on the other team’s skills and endeavors.

Now try for the sake of discussion to put yourself into a CIO’s shoes. Picture your IT department. What will your first thoughts be? Will you lament the money the department has wasted, or linger on frustration due to poor results, delays and bitter compromises? What measures should you take?

Want to start bridging the gap between you and IT? Take a step towards them with our free crash course in HTML.

Business First, Tech Later – Or Is It?

Corporations teach that IT must be run like a business, with CIOs as business leaders, not technology pundits. Investments into IT should be spurred by business strategy. Nevertheless, at the 360 IT infrastructure event in London in 2010, with the recession causing a shift in IT roles and responsibilities, the general sentiment was that IT is very much a “changing face of business.” Attendees seemed to acknowledge the necessity of developing oneself and one’s staff into well-rounded, “business-savvy and technically-skilled” workers.

The results of an ulterior CA Technologies study from 2012 on over 800 global businesses showed a clear disconnect between IT and their execs as the main reason for missed opportunities for revenue growth and reduced customer engagement and satisfaction. 34 percent of the Business respondents in the survey dubbed their relationship with IT as “combative, distrustful or siloed”, and almost just as many on the IT side agreed.

Perhaps the best solution is for both sales and marketing departments to better their technical knowledge, and for tech teams to improve their administrative and marketing knowledge?

The Middle Ground: An Insight on How To

Belinda Yung-Rubke, director of Field Marketing at Visual Network Systems, is sure the answer sits in finding a common language and setting up common objectives, while Jimmy Augustine of Hewlett Packard urges a forceful bridging of the IT and Business gap. “The two should be one, like peanut butter and jelly. The right hand should know what the left hand is thinking and vice versa.”

Jeff Tash, CEO of Flashmap Systems, Inc and author of the free Architecture Resource Repository Site, recommends a three-step approach to bridging this gap: Consolidate, Standardize, Communicate. Initially, this involves eliminating redundancies, reducing resources, and aiming for reusable products and services instead of one-offs.

Most important is the final step, communication. Marketers and techies can often speak completely different languages. One group talks about B2B, B2C, CPCs, CPMs, DMOs, PPAs, PPCs, ROI, and UGC, and the other talks about HTML, CSS, JS, SQL, XML, JSON, IDEs, and APIs. It’s important to define a common vocabulary, so that no one is nodding along in meetings without any idea of what the discussion is about. Tash recommends to “make certain that both technical and non-technical audiences share a unified knowledge base” to ensure a dialogue of ideas, rather than a monologue.

We often see an expectation for techies to speak the marketer’s language, but not the other way around. In Vish Mulchand’s opinion, “the bosses you have to get the budget from don’t care about the technical side of why you’re pitching for a certain investment; they want to know how it will improve the business and grow revenue, so the tech guys need to know how to communicate this.”

Want to start bridging the gap between you and IT? Take a step towards them with our free crash course in HTML.

It can be difficult for marketers to find motivation to learn tech language, but it can lead to more independent and self-sufficient behavior. In larger organizations, a simple typo fix can take weeks to make its way through bureaucracy. In smaller agencies and startups, you can usually just tap a developer on the shoulder and ask him to fix it. But consider the fact that even a one-minute interruption can require 10–15 minutes of ramp-up to resume working. With a little effort, marketers can learn just enough to be able to make small changes like these, avoiding bureaucracy and keeping developers focused and efficient.

interruptions

It might be wise to take a leaf from the startup world in this regard, where the lines between marketing, product and development become blurred. Instead of treating different aspects of a project as silos, marking territory, and making sure no-one crosses borders, all of these different aspects are treated as offensive weapons to win in the market.