Metadata
-
Date
-
Tagged
-
Part of series
-
Older post
-
Newer post
Setting up a fresh development environment, part 3
This is part 3, please also check out part 1 and part 2
Useful browser extensions for (web)dev
Most of the time I spend sitting behind a computer is dominated by 2 applications, the code editor and the browser. The browser I use for development is often Chrome (canary), so this list will be entirely filled by chrome-extensions
React Developer Tools
A must-have for anyone coding in React. React Dev Tools allow you to select a component like an HTML-tag. You can view/manipulate it’s props or state.
Redux Developer Tools
What the React Dev Tools are to React, the Redux Dev Tools are to Redux. You will be able to see the store, the actions and even dispatch actions.
Apollo Client Devtools
Continuing in the same direction, the Apollo Client Devtools supplies you with lots of Apollo-GraphQL goodies, including the awesome GraphiQL
aXe
Checking for accessibility issues is made easier by the aXe extension. Tip: use alongside the Chrome Lighthouse accessibility check.
Refined Github
I love Github, that doesn’t mean it can’t be better. Refined Github does that. It adds to and tweaks the default Github-site, making your experience/workflow smoother.
Wappalyzer
Wondering what technology was used to make an awesome site you are on? Wappylyzer attempts to answer that question.
JSON Formatter
Often times the data you are working with is presented in the JSON format.
Without formatting, finding what you are looking for in a large JSON-object feels like looking for a needle in a haystack.
JSON Formatter displays JSON in a very readable way.
It is now much easier to get to MRData.RaceTable.Races[0].QualifyingResults[0] in that giant object the Ergast F1 API gave me to see my boy Danny Ric crushed qualifying in Monaco.
Other setup not directly related to dev
Over the course of 3 posts I told you what I did to setup my dev environment the way I like. I didn’t tell you everything. Here are some programs I use that aren’t directly related to programming.
f.lux
I’m a night owl, f.lux helps me reduce the eyestrain from looking at a monitor at night. F.lux adapts your display to the time of day, warming the colors at night. The yellow color on your screen at night might seem a bit hash at first. Give it a fair shot, it’s fantastic.
ShareX
A great tools for taking screenshots. No matter if you onoly want to capture an area, your whole screen or the entire webpage, ShareX can handle it. You can configure the tool to automatically upload your screenshot to a multitude of online services. It’s also a handy tool to make small video’s/gifs, has an eyedropper-tool, can check MD5/SHA/… hashes, and much more (I think the developer made this for himself, adding features he could use and the users of this piece of software benefit from it!)
KeePass
An excellent open source password manager.
Reddit Enhancement Suite
A browser extension that makes changes and additions the reddit site. I didn’t add it to the browser-extension list because it’s not really webdev related. It can be. Here are some subreddits you can follow: r/webdev, r/reactjs, r/frontend, r/javascript
HWiNFO64
Do you like to keep an eye on your CPU-temperature at all times? I do and HWiNFO can also show me whatever other hardware information I would like to know about this machine.