Here are four tools that you probably don't know about, but that can save you hours.
4. Responsively
Responsively replaces the device toolbar in the Chrome dev tools for me. You can preview all target screens in a single window side-by-side.
3. ngrok
I use ngrok for an instant preview of my work. Just one line command and secure URL is created to my localhost server through any NAT or firewall.
Example of usage: ./ngorck http 3000
2. {JSON} Placeholder
When you prototyping an app but don't have a backend yet, you can use a JSON placeholder. Free fake API for testing and prototyping.
Example of usage:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((json) => console.log(json));
Output:
{
id: 1,
title: '...',
body: '...',
userId: 1
}
1. iHateRegex
I don't know anyone who:
- Know regex to 100%.
- Love regex.
And the website name just only confirms it.
iHateRegex is a cheatsheet for regular expressions. If we count the amount of time this cheat sheet saved me, it would be months.
Happy coding,
– Nick
Also, every Monday, I send my "3-2-1" newsletter with 3 hand-picked articles from me, 2 web development guides from others, and 1 Tweet of the week.
Top comments (44)
Thank you for sharing Responsively!
I've been keeping an eye on Polypane for a long time now but didn't like the idea of having a paid subscription just to be able to view multiple viewport sizes on one screen.
I'm very happy to see there is a free alternative out there as well!
Hey, creator of Polypane here. It's hard to compete with free, but Polypane does a whole lot more than just multiple viewports (like it has tons of accessibility features) but even for just multiple viewports it has many features you wont find anywhere else.
Polypane is the only browser that actually lets you edit across different viewports at the same time, instead of having to go one by one by one with the regular devtools in something like Responsively.
Here's a short video of what the Polypane element inspector can do:
Anyone can start a free trial and try it for 14 days, no credit card or whatever!
I am a big fan of Polypane. The features are great but -- just as important to me -- I can tell you I've emailed Kilian several times and always received fast reply directly from Kilian -- no matter if it was an issue I was having or an idea for a feature request. Big fan of the product and gladly pay because of the service.
Wow Drew, thank you so much! I really appreciate that :)
Hey Kilian! I'm aware that Polypane is packed with features. It's just that at the moment, I mainly just need a clear overview of viewports, and Responsively is perfect for that, for now.
However, even after my discovery of Responsively, I'll continue being on the lookout and wait until I feel I need Polypane. :) I believe your browser is absolutely wonderful for devs and I'm eager to use it one day.
Does Polypane have scrollbars on Windows devices? I found that all the browsers which provide you such feature as multiple viewports missing the point that Windows devices should have visible scrollbars which affect the viewport size.
Hey Sergei! Polypane does not differentiate between "devices", rather just viewports. I've found this a more useful abstraction. Device sizes are ever changing, but your content should work in all viewports.
You make a valid point though. Many developers don't know they have scrollbars on their site because they're developed on a Mac and they never care to check. That's why I created an "unneeded scrollbar" simulator, implemented in Polypane but also freely available as a bookmarklet. Find it here: kilianvalkhof.com/2021/css-html/yo...
Hey Kilian, nice to see you here!
no problem 🙏
For regex I like to use Regex101,
I think we forgot sometimes to use Picular, it's simply a search engine, but for colors, type a word and get a nice color pallet that match your word.
Today I found a nice website where you can find some assets about VueJS (tutorials,videos etc..) and UI components.
I love Picular. I enter search terms just to relax and give the logical side of my brain a bit of a rest.
Can I be the first who knows and loves the regular expressions? :) Although I also use online checks for complex expressions to make sure there are no conflicts.
Special thanks for the {JSON} Placeholder. I think that by using this, we can improve our process of creating samples.
I love regex too!
I use them all the time even for replacing things in the editor 😂
i love Regex :)
Hiie,
Really Great, I really love Posts where people list down stuff which are really helpful and helps to explore and see new softwares/projects.
A Small Change to be made
ngrock => ngrok
could be Typo error that you made.
In Both HeadLine & Command
Fixed, thanks
Hi,
Thank you for this article! I used to check my regex with Regex101 but iHateRegex seems to be amazing, I'll give it a try, right timing because I'm struggling with some huge undocumented regex.
Happy coding :)
Awesome list! I'll shamelessly advise you to check out free Stepsize tool which can save you hours of work by helping you track and prioritise technical debt ;)
Very nice tools, I used Json placeholder a lot to mock my API but at some point it was not enought to test cases where the server crash, invalid parameters, etc... So I decided to build my own rest API mocker tool called restapify which works on JSON files structure and handy syntax like you would see in Nextjs. If you enjoy having a mocked API during development I would recommend to check it out 😉
Those are some great websites I didn't even know about. Thank you for sharing them!
no problem 🙌
Great list! ngrok is awesome for sharing local dev environments.
Agreed.
Thanks alot
Thanks for this useful sharing.
Responsively is life saver.
Great article, Nick!
Did you miss a word on the title ?
You think better to say "4 Useful Web Development Tools That Stay Under The Radar" ?
I think you missed the 'Stay' or 'are' word
I am not an English expert, but maybe you are missing a verb, and maybe not
alright, let's add it
thank you!
This is the first time I'm hearing about Responsively. Will try using it instead of Chrome's device toolbar. Thanks! 🙏
JSON Placeholder has helped my development process certainly in the passed! These days I don't really need it anymore, but still, Thanks for sharing!