Web Development Setup on Windows 10 (Part 2)

Updated reading time

Continuing from Part 1 of this series:

I currently use the following ‘programs’ for daily operations:

  • Chrome
  • Laragon
  • Opera
  • Firefox
  • Sublime Text 3
  • VS Code
  • Microsoft Office
    • Microsoft Word
    • Microsoft Outlook
  • Dropbox
  • Adobe Creative Cloud
    • Adobe Photoshop
    • Adobe Illustrator

These are just a gist of what’s in store.

But it’s the power in each of these that I utilise them to their fullest extent — especially Google Chrome.

As an aside:

Please let me know in the comments what your setups are.

 

I have been going through many other people’s setups already, but I am willing to see what your setup is too.

Web Development Setup on Windows 10 (Part 2)

Chrome

I use Google Chrome’s different Profiles that can be set up. As a web developer, setup would contain the following Chrome extensions:

  • Web Developer
  • Bulk URL Opener
  • News Feed Eradicator for Facebook
  • Wappalyzer
  • What Runs
  • Noisli
  • OneTab
  • FireShot
  • Teamwork Projects
  • Visual Ping
  • Send Anywhere

As well as a few more Chrome extensions used for proofing websites and general usage as Chrome apps:

  • SmoothScroll
  • Lighthouse
  • Page Analytics (by Google)
  • Tag Assistant (by Google)
  • UET Tag Helper (by Bing Ads)
  • Facebook Pixel Helper
  • JSON Formatter

So during lunch for example, I would have a personal one for myself during lunch breaks should I wish to use my own set of websites already logged in. Or even the last visited sites so that I could continue where I left off from yesterday’s lunch!

I do use a password manager ’Dashlane’ going for the upgraded paid version of Dashlane so I could sync between many devices (phone, computer 1, computer 2).

Now that is for my Chrome Work Profile.

On my personal Chrome profile, I use the following extensions:

  • Dashlane Secure Password Manager
  • Evernote Web Clipper
  • Grammarly for Chrome
  • Hide YouTube Comments
  • News Feed Eradicator for Facebook
  • Reddit Enhancement Suite
  • Refind
  • SmoothScroll

You’ll notice that these plugins are used for reading and anti-procrastination, exactly what I need when I’m on my personal Chrome profile.

Since I would either be sitting and rehearsing my craft, learning something new, or watching YouTube videos, or be outside!

 

Web Development Setup on Windows 10 (Part 2)

Chrome Developer Tools

Chrome’s best feature is the developer tools, where they have a near realistic mobile simulator — not just a smaller screen, but a simulator that mobile detectors actually notice!

However, there are times when Chrome still misses out.

And that is when I need to be signed onto multiple Google accounts at once.

To remedy this, I’ve began using multiple brands of browsers (namely Opera and Firefox) also open along with Chrome, so that I can have 3 separate Google accounts logged in at once!

  • Opera – my company google account logged onto Google Drive
  • Firefox – general company google account
  • Chrome – legacy company google account, also where most of the signing in and out would take place on other accounts

Web Development Setup on Windows 10 (Part 2)

Chrome seems SSL friendly

Now that many browsers especially Firefox have started the transition of mentioning http as ‘red insecure’, Chrome seems to still be lax in this. We don’t really see an insecure browser mark, but of course this is surely going to follow Firefox’s agendum on this.

 

Web Development Setup on Windows 10 (Part 2)

Laragon

Think of WAMP but organised and easy to spin up sites of different platforms.

Laragon is a universal development environment (WAMP or Ruby on Rails or MEAN or Golang or Mint, etc.).

I like Laragon for being able to provide this ease of use.

Web Development Setup on Windows 10 (Part 2)

With an install of Laragon, you get a Linux-like environment on Windows, having Apache/Nginx ready to be used and configured with Cmder, a terminal emulator for Windows.

So with Laragon, you can command yourself into the Laragon folder, and run npm install.

It’s completely isolated, so you don’t get messy environment variables on Windows since they’re all referenced from Laragon only!

Think of setting up your Linux webserver, but call it ‘Laragon’. That’s powerful.

I like how it’s open source as well!

 

Web Development Setup on Windows 10 (Part 2)

Opera

Free Simple VPS

I like the use of Opera’s free simple VPS — basically an IP address changer.

I could quickly use this to triple-check if a DNS has propagated in the US, whilst I also check whatsmydns.net if the website’s IP Address has changed across the globe already.

Web Development Setup on Windows 10 (Part 2)

If it’s just been in the United States for example and not yet in the United Kingdom where I am based, then I’ll just hit up Opera’s ‘Private’ mode and enable the VPN and set the country to the United States, and visit the website thereafter.

Multiple Google accounts

Other than that I also find Opera as a great way to split between Google accounts since at the time writing this post I work for an agency and we deal with multiple clients (and Google accounts).

I’ll have to be switching between different Search Console accounts and different Analytics accounts (since Google Analytics only limits you to 100 analytics accounts per Google account, and yes we’ve reached more than 100 here).

As I use Opera for my individual work Google account, I also keep my Google Drive open here for Docs, Sheets, etc.

 

Web Development Setup on Windows 10 (Part 2)

Firefox

Same thing goes with Firefox. I’ll open it up for a 3rd Google account. So Chrome’s for most of the work, Opera’s my individual work Google account, and Firefox is the corporate Google account, where permissions are held and owned.

Web Development Setup on Windows 10 (Part 2)

I’m not entirely a big fan of Firefox as I once was when Chrome was über slow when it first came out. Firefox was really quick at the beginning, but it looks like Chrome must’ve caught up. Yes, they’re both fast browsers, but I still prefer Chrome’s slim-line and sharp-edged interface rather than Firefox’s more rounded border-radius look. Still a big fan of Firefox’s Japanese tattoo skin though!

 

Web Development Setup on Windows 10 (Part 2)

Sublime Text 3

Yes, Sublime Text 3.

But let me tell you that I also use Atom on my Mac, simply because it is better. But on Windows I’d rather use Sublime Text 3 for simplicity’s sake.

Yes, it does still have its quirks, but I just simply need Emmet and syntax highlighting type the code I need to get the job done.

Related:  How to be Genius like Nikola Tesla

I haven’t worked on ambitious projects requiring git project collaboration yet, but if so I will have to fire up Atom since it has a more active package development community.

Sublime Text 3 is really quick to start up though!

And that has helped me considerably on my old 2014 business Windows PC.

Not the most powerful at that time since it was only a standard business one built to open Microsoft Office and a browser, but I’ve been doing junior position web development for about 2 years and it’s about time I get a proper one now that I’ve seemed to have used its threshold power daily through these programs in the article.

 

Web Development Setup on Windows 10 (Part 2)

VS Code

Also known as Visual Studio Code, VS Code has now replaced Sublime Text 3 as the go-to web developer’s text editor in 2018.

It’s basically as fast as Sublime Text 3, but with more enhanced debugging capabilities and a built-in terminal window. Think of the speed of Sublime Text 3, but with all the plugins you still love.

It is now gaining more traction than the Atom text editor which is built by GitHub. And more attention now that Microsoft has bought GitHub earlier in 2018. And recently VS Code got the similar real-time Live Share (Live Collaboration) feature that Atom had.

I currently have the following Extensions on my VSCode setup:

  • Atom Keymap
  • Auto Close Tag
  • Auto Rename Tag
  • Beautify
  • Material Icon Theme
  • Material Theme
  • One Dark Pro
  • Project Manager
  • Rainbow Brackets
  • TODO Highlight
  • VS Live Share

There are many good testimonials from other web developers speaking about VS Code’s pros and cons.

But then again VS Code is free, open-source, and works across different platforms. Give it a try on your spare time and see how it goes!

PS, you can follow VS Code on Twitter using the rare username called @code!

 

Web Development Setup on Windows 10 (Part 2)
Web Development Setup on Windows 10 (Part 2)

Microsoft Office

Microsoft Word

It seems to be a great collaboration tool, since it’s what many of our clients already use.

Might as well know info on a program that a client uses rather than push the pedal to entice them to collaborate using our chosen software.

Of course, this still depends on the client, but for getting on course quickly we’ll use Microsoft’s collaboration features.

It’s not that bad really. You can still complete work but it’s not the most organised if I should say.

Typing is not a problem on any word processor anyway. But if you’re going to be using Word, then it would be a good idea to get the entire Office package too. So I also work with Outlook

Microsoft Outlook

I like the use of threads similar to Gmail’s interface.

My tip is to use the ‘reply-all’ feature. That way you don’t get caught in trouble with appearing as though you deliberately un-cc’d people in the thread.

I am open to other email software for Windows. Please let me know in the comments below if you have a good one you use for Windows. On Mac I’d use Airmail, but it’s currently only for Mac at the moment!

 

Web Development Setup on Windows 10 (Part 2)

Dropbox

My personal favourite since it is still more than alive! Dropbox used to be a startup and is now central to many business operations.

I’ve heard that it’s not good to rely on just one backup storage, in that there must be at least 3 backup storages for every backed-up file to ensure resilience.

The big 3 of storage are good: Dropbox, Google Drive, and Microsoft Onedrive. Security is an issue since Dropbox did go on the news for insecurity, but its learned from its mistakes and built a Dropbox for Business too.

With that being said I’d say Dropbox is still a top contender in the affordable cloud storage community. OneDrive is in fact amazing though as you get 15GB free with a copy of Windows. But I’d rather use this to sync my PC’s files.

 

Web Development Setup on Windows 10 (Part 2)

Adobe Creative Cloud (Adobe CC)

Adobe Photoshop

A mainstream in professional image manipulation software, I use Photoshop almost daily even though I am a web developer

Well, I realised that it is used for measuring the margins and padding and line spacing among others in web designs, whilst I develop them. Really a helpful tool!

And I occasionally get the ‘can you resize this image for me’ from the team. I actually enjoy doing it, since it does keep my Photoshop skills sharp and neat. Like here’s a quick article about properly handling an image (the most obvious object in Photoshop, but often mishandled).

I understand that Photoshop can be quite expensive, but if you’re going to be professional, might as well use it? There are already great alternatives like the open-source GIMP, and the web-app Pixlr editor.

Over-all with the amount of content and tutorials out there for Photoshop (also caused by the massive amount of torrents that Adobe has gotten for its programs early on) I would stick to Photoshop. It’s really a household name too!

Adobe Illustrator

The final program but what seems to be the future of web development is Adobe Illustrator.

I use it primarily for dealing with SVG, since it’s more than capable as an SVG editor. I have had a few web design mockups given to me through Illustrator e.g. through an .eps file, but that’s not a problem since Illustrator has its own measurements too.

Tip: Just make sure that whenever you make measurements in any program, that the DPI is set to 72, so that points (pt) and pixels (px) are equal. Anyway, 72dpi is optimal for the web!

Closing remarks

Windows 10 is well-run by over 88% of Windows users (maybe the others are Windows XP from intranet banking firms?), as depicted by this realtime stats site.

I’d say it’s also a good time to be on Windows and get to know its ins and outs as a Web developer, as Microsoft is pushing support back for web developers who in fact power the web.

Might as well get along with 88% of the population and build custom PCs as the PC master race, right? 🏆