DEV Community

Cover image for 4 amazing web tools for prototyping.
Maciej Trzciński 🌱🇵🇱
Maciej Trzciński 🌱🇵🇱

Posted on

4 amazing web tools for prototyping.

Today I'm going to show you 4 amazing tools to save you time when you prototyping.

1. Placeholder.com

Placeholder.com

This is amazing placeholder tool for images. You can generate what size you want, color, format and text content🤳🏼.

Example:

Placeholder.com example

If you visit this URL https://via.placeholder.com/728x90.png/0000FF/FFFFFF?text=Hello,+How+are+you?, you receive exactly the same image.

Please go to the Placeholder.com and look at the documentation.


2. iHateRegex

iHateRegex

There are two types of people, who are familiar with Regex and who aren't.

99% of programmers aren't familiar in 100%, for me this page is really helpful on daily programming.


3. {JSON} Placeholder

{JSON} Placeholder

This a great tool when you don't have API, and you want to test some part of code, or you are just learning and you don't want to write your own backend.

Example:


fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

Enter fullscreen mode Exit fullscreen mode

Output:


{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Enter fullscreen mode Exit fullscreen mode

4. ngrok

ngrok

Another great tool is ngrok, where using one command you can preview your work.

Example of usage:

ngrok http 80
Enter fullscreen mode Exit fullscreen mode

Cover photo by Nick Fewings on Unsplash

Top comments (0)