One of my favorite aspects of Atom is its convenient package manager. Browsing and downloading packages on Atom is a snap, and best of all of the source code is open!

When it comes to plugins, I try to keep it down to a minimum. Each tool added to the belt comes with a learning cost, one that for me is often not justified. But adhering to that tenet too far would have me coding in vanilla Notepad! And let’s be honest… the web is not a minimalist platform!

Here are my personal top 5 web developer plugins for Atom:

MUST HAVE: Atom-Beautify

Code can get unwieldy quick. That’s why the number one package on my list is a beautifier tool. White-space and indentation tend to be the main culprits, but this tool will automatically format all of that (and more) for you!

MUST HAVE: Emmet

Anyone who spends time writing HTML should checkout Emmet. It’s syntax is similar to templating engines like HAML or Jade, except you hit “tab” after writing the tag, and it autocompletes to HTML. Even if you don’t utilize all of Emmets features at first, I think you’ll find spending ten minutes to learn the basics is worth it.

Linter-Jshint

It’s no secret that JavaScript is a… quirky language. Arbitrary in matters of scope, type coercion, semicolon insertion, and common keywords like new. While a linter wont solve all these issues, it will point out a great deal of troublesome/invalid syntax (especially as your projects grow).

Vim-Mode-Plus

Vim purists will hate this one! Pairing (or perhaps inflicting) Vim into Atom took me longer to get used to than any other plugin. However, I prefer to only use the keyboard when on a laptop, but a keyboard and mouse for desktop, and don’t want to have to constantly switch between editors.

PlatformIO-IDE-Terminal

<DosEquisVoice> I don’t often code on Windows, but when I do, I use this built-in terminal for convenience. Stay 1337 my friends.</DosEquisVoice>

These are the top Atom plugins I use on a daily basis. Check them out if you haven’t already!

As a technology professional, you may find yourself in a situation where you have to work with an unfamiliar desktop environment. While most Windows and Mac users tend to use their respective standard DEs, there are about a dozen various popular ones for *nix. It can take several hours to get used to the new arrangement, but you need to be productive right away!

You could modify the desktop environment itself to your liking, however that takes time (and if you’re a UI nitpicker like me, A LOT of time!). Instead we will assign custom keyboard shortcuts to start our applications. How-To Geek has a guide for Windows users here.

Choose a base key (I prefer the Super, or windows key), plus a letter or number to launch the app. So to launch your text editor, you could assign the key combination Super + e. Need a calculator? Super + c. Media player? Super + m. Etc…

This is convenient because you don’t have to go clicking through folders to start the app you want. Even if you aren’t concerned about working on multiple operating systems, this is still the quickest way to run your apps.

Being a minimalist in the tech world ain’t easy,

or even a practical philosophy to cling to in many situations. However, I believe utilitarianism should still be applied where possible.

Obtaining end-user location is a common task for many web applications. One (ostensibly) simple way to do this is with the built-in geolocation API included within all major browsers.

From the MDN: “The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.”

Setting this up is straightforward enough:

As is error handling:

Simple! The only problem is… if the user declines to share their location, there is no way to detect this for Firefox users (it works in other browsers).

Initially I thought I was facing a bug, but apparently this behavior is intentional.

The cross-browser compatible solution I found to overcome this is with JavaScript’s built-in setTimeout() function. Here we’ll assign the coordinates we want to variables, and have setTimeout() check their state to detect whether or not they’ve been assigned a value. If a value is not assigned within 5 seconds, then the coordinates were not obtained.

I Hope this helps!

Have you encountered this issue? How did you overcome it?