DEV Community

loading...
Cover image for 4 Useful Web Development Tools That Stay Under The Radar

4 Useful Web Development Tools That Stay Under The Radar

nickbulljs profile image Nick Bull Originally published at blog.nickbulljs.com ・Updated on ・2 min read

Here are four tools that you probably don't know about, but that can save you hours.

4. Responsively

-1.png

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

Screenshot 2021-03-24 at 10.26.14.png

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

Screenshot 2021-03-24 at 10.30.03.png

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));
Enter fullscreen mode Exit fullscreen mode

Output:

{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}
Enter fullscreen mode Exit fullscreen mode

1. iHateRegex

Screenshot 2021-03-24 at 10.39.53.png

I don't know anyone who:

  1. Know regex to 100%.
  2. 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.

Try to join 2700+ web developers here 💫

Discussion (42)

pic
Editor guide
Collapse
naseki profile image
Naseki

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!

Collapse
kilianvalkhof profile image
Kilian Valkhof

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!

Collapse
drew_mc profile image
Drew McConville

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.

Thread Thread
kilianvalkhof profile image
Kilian Valkhof

Wow Drew, thank you so much! I really appreciate that :)

Collapse
naseki profile image
Naseki

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.

Collapse
nickbulljs profile image
Nick Bull Author

Hey Kilian, nice to see you here!

Collapse
nickbulljs profile image
Nick Bull Author

no problem 🙏

Collapse
l4znet profile image
Charly Escalona • Edited

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.

Collapse
toverbay profile image
Tim Overbay

I love Picular. I enter search terms just to relax and give the logical side of my brain a bit of a rest.

Collapse
xr0master profile image
Sergey Khomushin

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.

Collapse
zanej profile image
Zanej

I love regex too!
I use them all the time even for replacing things in the editor 😂

Collapse
king11 profile image
Lakshya Singh

i love Regex :)

Collapse
asharry97 profile image
Ashish R Bhandari

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

Collapse
nickbulljs profile image
Nick Bull Author

Fixed, thanks

Collapse
alexomeyer profile image
Alex Omeyer • Edited

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 ;)

Collapse
mx profile image
Maxime Moreau

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 :)

Collapse
mathankb06 profile image
Mathankb06

Web applications will help you accelerate and improve decision-making, optimize internal business processes, raise operational efficiency, boost revenues and gain a competitive advantage over competitors. We at Hakuna Matata Solutions as an experienced web application development company, have been helping companies achieve their full potential.

Collapse
johannchopin profile image
johannchopin • Edited

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 😉

Collapse
davidils profile image
David Ils

Those are some great websites I didn't even know about. Thank you for sharing them!

Collapse
nickbulljs profile image
Nick Bull Author

no problem 🙌

Collapse
garpunkal profile image
Gareth Wright

Great list! ngrok is awesome for sharing local dev environments.

Collapse
ben profile image
Ben Halpern

Agreed.

Collapse
prince98215927 profile image
Prince

Thanks alot

Collapse
marif0025 profile image
Muhammad Arif

Thanks for this useful sharing.

Responsively is life saver.

Collapse
mcsee profile image
Maxi Contieri

Great article, Nick!

Did you miss a word on the title ?

Collapse
nickbulljs profile image
Nick Bull Author

You think better to say "4 Useful Web Development Tools That Stay Under The Radar" ?

Collapse
mcsee profile image
Maxi Contieri

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

Thread Thread
nickbulljs profile image
Nick Bull Author

alright, let's add it

thank you!

Collapse
riyanagueco profile image
Riri

This is the first time I'm hearing about Responsively. Will try using it instead of Chrome's device toolbar. Thanks! 🙏

Collapse
elianvancutsem profile image
Elian Van Cutsem

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!

Collapse
arvindsridharan profile image
arvindsridharan

Very nice share.

Collapse
glenntippett profile image
Glenn Tippett

Some good resources here. I’ll have to check out the JSON placeholder

Collapse
somanathgoudar profile image
Collapse
somanathgoudar profile image
Somanath Goudar

Thank you for sharing 💙

Collapse
nickbulljs profile image
Nick Bull Author

thank you!

Collapse
thanhlm profile image
Thanh Minh

I write a tool to interact with Firebase Firestore
docs.refiapp.workers.dev/

I have some pain point while using Firestore UI on web so I think many of you can face the same issue like me.

Collapse
tobott_33 profile image
tobby

time savers = life savers

Really appreciate this!

Collapse
peterwitham profile image
Peter Witham

Super useful for someone like me that hates RegEx :) Thank you!

Collapse
eavnitech profile image
eavnitech

Thanks for sharing 🔥

Collapse
karthik2265 profile image
Karthik suryadevara

Thanks for sharing

Collapse
svdoever profile image
Serge van den Oever

I prefer localtunnel over ngrok, because you can specify a domain, e.g. mydomain.loca.lt. I use it a lot from code where I get back my external URL and act on it