My Personal Development Environment

by Praveen Kumar Purushothaman

Many of my students and my fellow developers have been asking the same question for about an infinite number of times now. So, I thought of making this thing public and, this helps me in migrating if I am buying a new computer or something. Also, this would serve as a guide to people and sometimes myself to guide how someone could become like me. 😁

Contents

  1. Basic Development Environment
  2. Windows Specific
  3. Few Honourable Mentions

Basic Development Environment

After buying a fresh MacBook Pro and customising it, what I do is install all the software that is required for my development works. The main list of software I install include the following steps:

  1. Google Chrome: What's a Web Developer without Google Chrome browser? The first thing I do with Safari is to get Google Chrome and install the latest version. Not only that. Once I run it first time, I make sure to check the "Warn Before Quitting" option. I cannot afford to lose all my Incognito tabs just for pressing a ⌘ + Q!



  2. Install required Google Chrome Extensions:

    There are so many things out there, which needs a small kick start. I would happily add those extensions to help me with my life.
    1. AdblockPlus!
    2. Adblock for YouTube
    3. TamperMonkey
    4. Downloader for Instagram™ (+ Upload photo)
    5. Flash Video Downloader
    6. Google View Image
    7. Open Graph Preview
    8. TabCopy
  3. Zoom: I use this for all my personal and professional communications, whether talking with office colleagues, clients, or even my dad, this is my saviour. This is the leader in modern enterprise video communications, with an easy, reliable cloud platform for video and audio conferencing, chat, and webinars across mobile, desktop, and room systems. This also allows me to share screens and remotely access computers.
  4. Git: Almost all my projects use Git as a version control system as it is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance.

    1. Set the default editor to Vim using this guide.
    2. Add the Git Shortcuts that I generally use.
  5. iTerm 2 (macOS Specific) is a replacement for Terminal and the successor to iTerm. It works on Macs with macOS 10.10 or newer. It brings the terminal into the modern age with features you never knew you always wanted.

    1. OhMyZ.sh is an open source, community-driven framework for managing your ZSH configuration. It comes bundled with a ton of helpful functions, helpers, plugins, themes, and a few things that make you shout... “Oh My ZSH!”

      See the good things what Oh My ZSH provides you.
  6. Sublime Text 2: I do understand why not Sublime Text 3. I have a kind of love towards the old version 2 and I would like to stay with it. I would need my army with SublimeText 2 to make myself more productive:

    1. Will Bond Package Control helps me managing all the packages for SublimeText 2.
    2. Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
    3. Emmet CSS Snippets is a stripped down version of Emmet and has main specialisation over CSS expansions.
    4. EmmetOneLine - There are some issues with this package, if you are using Ctrl + Tab key to move. Please use it with caution.
  7. VirtualBox: Whats there a developer if there's no dedicated virtual server machine for sandboxed development activities?
  8. Vagrant: I love this little broker tool that helps me configure my Virtual Machines with the intended development environment and also scale the configuration on other similar machines and devices used by my co-workers, clients, and mentees. It's a kind of automation tool.
  9. Scotch Box is the perfect and dead simple LAMP/LEMP stack for local development. I am a proud supporter of Scotch Box, providing some nice enhancements on Virtual Hosts to the Pro version. I strongly recommend everyone going for the Pro version.

    1. Modify the hosts file
    2. Install the Pro version
  10. Adminer is a stripped down, cuter version of the famous beast, phpMyAdmin. Replace phpMyAdmin with Adminer and you will get a tidier user interface, better support for MySQL features, higher performance and more security. See detailed comparison.
  11. Meld is a visual diff and merge tool targeted at developers. I am more inclined to use Meld than BeyondCompare as this is more stable than that. It helps you compare files, directories, and version controlled projects. It provides two-way and three-way comparison of both files and directories, and has support for many popular version control systems.
  12. Node.JS is a platform which allows us to run JavaScript on a computer / server. Allows you to create, read, update, and delete files on the server side. Establishes a connection with a Database and perform operations on it. Almost all my projects need Node.JS directly or indirectly to work. The best example would be this blog engine, Ghost. It's written on Node.JS.
  13. Fanny (macOS Specific) is a free Notification Center Widget and Menu Bar application to monitor your Macs fans. Allows me to know the speed of my fans and heat generated by the CPU, so that I can make sure I keep my apps to a minimum and get the maximum performance.
  14. Segoe UI Fonts is a UserScript for changing the default fonts of most popular websites like Facebook, Gmail, Google, Stack Overflow, Twitter, etc. to use Segoe UI as the default base font and Consolas as the monospaced font in the pages. This is more of my personal preference towards using these fonts.
  15. Typora will give you a seamless experience as both a reader and a writer. It removes the preview window, mode switcher, syntax symbols of markdown source code, and all other unnecessary distractions. Replace them with a real live preview feature to help you concentrate the content itself. This is one of the best editors I use for writing my blog posts and also Stack Overflow answers.

    • Here’s my Typora theme in Gist, which you can make use of, if you wish.
  16. Visual Studio Code is the go-to editor for some complex languages like React using JSX or TypeScript and I finally agreed with Wes Bos that VS Code is better for development of React JS. Obviously, with VS Code, you should be having the right extensions to support your React JS development, but comparing with Sublime Text 2, VS Code is still in its infancy. Get these extensions and here's my dotfile:

    1. Prettier - Code formatter helps you to format your JavaScript / TypeScript / CSS using Prettier.
    2. Cobalt2 Theme Official is the theme used by Wes Bos, which comes with a nice user experience and a lot of awesome features. I am using a modified version of Cobalt2 that's a crossover between Monokai and Cobalt2.
    3. GitLens - Git supercharged supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
    4. Git History helps you to view git log, file history, compare branches or commits inside VS Code.
    5. ESLint integrates ESLint into VS Code. If you are new to ESLint check the documentation.
    6. ES7 React/Redux/GraphQL/React-Native snippets provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
    7. Todo Tree quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
    8. vscode-icons is more of a cosmetic thing, which brings icons to the Visual Studio Code editor.

Windows Specific

I do own a Windows machine and try to make it as better as my MacBook Pro. The list below contains few software, I love to have in Windows.

  1. 7-Zip is a file archiver with a high compression ratio. It is free software with open source. The most of the code is under the GNU LGPL license. Some parts of the code are under the BSD 3-clause License. Also there is unRAR license restriction for some parts of the code. You can use 7-Zip on any computer, including a computer in a commercial organization. You don't need to register or pay for 7-Zip.
  2. Win X Corners allows you to assign events to trigger on your main monitor corners, it activates when your mouse cursor hovers them, i.e. when you move your mouse cursor to your screen edges.
  3. OnTopReplica: This simple utility application shows a blank always-on-top window by default. Users can pick any other window of the system to have an always up-to-date clone of the target window shown always-on-top. Very useful for monitoring background processes, wrangling with complex multi-window games or tools, watching Youtube videos while working, and so on.
  4. WinSCP is a popular SFTP client and FTP client for Microsoft Windows! Copy file between a local computer and remote servers using FTP, FTPS, SCP, SFTP, WebDAV or S3 file transfer protocols. I haven't seen any other software that's as stable as this one.
  5. Paint.NET is an image and photo editing software for PCs that run Windows. It features an intuitive and innovative user interface with support for layers, unlimited undo, special effects, and a wide variety of useful and powerful tools. An active and growing online community provides friendly help, tutorials, and plugins.

Few Honourable Mentions

The web applications that are really helpful are never mentioned most of the time. I would like to mention a few tools that help me a lot during my development activity.

  1. RichText2MarkDown is a nifty app where you can paste or drag and drop rich content from a web-page or a text editor in the rich text box (no HTML tags should be visible), then the app will do the magic and convert the given rich text content to Markdown. Eeks! App's down due to heavy load on server. 😞
  2. ConvertCase allows you to simply enter your text and choose the case you want to convert it to.
  3. Text Mechanic provides simple, single task, browser based, text manipulation tools.
  4. SassMeister is a playground for Sass, Compass, and LibSass. Add some Sass and SassMeister will show you the rendered CSS. SassMeister supports both Sass and SCSS syntaxes, all output styles, and an ever-expanding list of Sass libraries.
  5. Diffy is a Node.js application and a tool for sharing diff output online.
  6. Write Email, currently private, helps me to compose beautiful emails using Markdown syntax and send it via GMail or Outlook or any other Rich Text Editors. You may have a quick look of it working here.

I believe I have covered almost all the development tools I use for my development environment. Let me know if there is anything that I would love to try and you have a better suggestion. I am all in for your comments.