I know I called this post “My Web Dev Tools”, but to be frank, I wouldn’t call myself a web developer at all. Like I call myself in my website, I would say I’m a “Web Dabbler” – but “My Web Dab Tools” just doesn’t sound as great. Anyway, below are some of the tools I have picked up over the past few years while developing for the web. One thing to note is that I don’t use all of these tools for every project, I tend to mix and match a lot and these are tools that I’ve found to be very helpful in the past.

General

General

  • Google Chrome - My web browser of choice. I love this browser most of all because it is always the most up-to date browser in terms of supporting certain CSS properties and it now supports ECMAScript 6 which is a nice bonus for me! Chrome also has the best developer tools in my opinion and I really love some of the features it has out of the box!
  • OpenVPN - This is essential for me because I hardly go online without being on a VPN. I like knowing that I am at least somewhat anonymous while browsing the internet. With all these issues about internet privacy coming about, I want to take a step to help protect my identity online. I am with nVPN but there are many other VPN service providers that are just as good.
  • Skype - This is my main messaging client apart from Facebook and Twitter. Shoot me a message anytime!
  • FileZilla - My FTP client. I use this along with my FTP extension in my text editor for my FTPing needs.
  • Microsoft Office - My document processor. I find myself using Word and Excel a lot for quick documents and Powerpoint for presentations that I make for projects or school.
  • Stackedit.io - Great in-browser markdown editor! In fact, I am writing this post using stackedit right now!
  • Google Drive / OneDrive / Dropbox - I use Cloud storage for storing my photos and documents. I tend to use OneDrive a lot because it’s built right into Windows!
  • Puush - Screenshots made easy! You can screenshot an area of your screen, have it saved to a chosen location, uploaded online and copied to your clipboard, all with one shortcut!

Design

Design

  • Pen and Paper - As a big techie, you’d think I would use the computer for just about everything, right? Umm, no. For sketching and note-taking, I always go back to the good ol’ pen and paper combo because it’s faster and being able to feel the words you write or the sketches you make engraves it deeper into your brain and gives you more focus on what you’re trying to do. For school, 90% of the time you would see me using a pen and a notebook to take my notes because it helps me remember better.
  • Adobe Photoshop - My favorite designing tool by far. For any of my graphic or web design work, I would always use Photoshop because I am used to the shortcuts and I have made it my home! This is the honestly the only reason I always fall back to using Windows over any Linux distro (Fedora <3).
  • Adobe Illustrator - For any design that needs vectors, I use Illustrator!

Development

Development

  • Brackets - My code editor of choice. I just love the look and feel of this editor compared to other editors. There are tonnes of great quality extensions that I can’t live without but I’ll save that for another post!
  • Node.js - I use Node Package Manager (npm) for most of my development packages and it’s something I’ve come to use a lot lately.
  • Ruby - More recently, I have been using a lot of Ruby gems and many of my latest projects are build off these gems. This site is actually built on a Ruby gem called Jekyll, which you can learn about here.
  • SASS - CSS has always been that one language that I really enjoyed, but frustrated me because some things just didn’t want to cooperate. Once I discovered SASS, the latter disappeared completely. SASS is a CSS preprocessor that allows you to create variables and nest style blocks to keep your styles more structured and organized.
  • jQuery - JavaScript has always been that special language in the web development stack. To make JavaScript much easier to understand and write, I use jQuery. This library is super useful because of the simplified selectors, easy DOM manipulation, and easy event triggering, all of which I use in most of my projects. There’s nothing bad I can say about jQuery and that’s why I always end up using it!
  • Bootstrap - Just learning to code? Try out the bootstrap framework by Twitter to make your life a lot easier! I’ve made a full blown bootstrap site within 15 minutes and it is my go-to UI framework.
  • AngularJS - Built by the guys over at Google, AngularJS is a MV* JavaScript framework to help you structure your web application. AngularJS makes building web applications much faster and easier. There is a small learning curve, but the documentation on their website is very thorough and can help you get started in no time!
  • Cordova - I use this a lot whenever I want to build an app for Android or iOS. Cordova takes my HTML, CSS, and JavaScript, and spits it into a native application (.apk or .ipa).
  • Ionic Framework - Built on Cordova and AngularJS, Ionic is a UI framework to help you make beautiful hybrid applications for mobile devices much faster and easier.
  • Github - I have a huge respect for people who put their projects on Github because it shows they don’t mind if people “steal” from their code, but more importantly, learn from their code. Github is much more than a place to store your code, it is a community. Props to all you people who choose to go the open-source route. You guys seriously deserve a medal!

Gear

Custom Build PC

  • Custom Built PC - Where I do most of my work. It’s packed with…
    • AMD Athlon II X2 220 overclocked to 3.2 GHz
    • Gigabyte WindForce R9 280 with 3GB of VRAM
    • 8 GB of Crucial Ballistix Memory
    • A Micro-ATX Biostar Motherboard
    • 128 GB Samsung 840 EVO SSD
    • 2 storage drives
    • 750 Watt Power Supply
    • Cougar Solution Case

The HackinBox

  • The HackinBox - My custom built hackintosh built in a cardboard box. It’s packed with…
    • Intel Core 2 Duo E6850 overclocked to 3.2 GHz
    • HIS Radeon HD 5450 with 1GB of VRAM
    • 6 GB of Memory
    • An ATX ASUS Motherboard
    • 260 GB Western Digital Scorpio Blue HDD
    • 500 W Power Supply
    • Painted Cardboard Box Case

Custom Build PC

  • Sony Vaio E Series
  • iPhone 3G
  • iPhone 3GS
  • iPhone 4S
  • Samsung Galaxy Tab 3 Lite
  • Nexus 5 (Daily Driver)

Well that about covers it! What do you guys think? Is there something that I’ve missed? What are yours? Let me know in the comments.

Heading out,

Hussain