There are so many ways to make web development more efficient, and I found some amazing resources that will help you save time⌛
Table of Contents
- Lorem Ipsum and Lorem Picsum
- Squoosh
- JSON Formatter
- Supabase
- Tailwind
- Ant Design
- Material-UI
- auth0
- cerbos
- Refine
1. Lorem Ipsum and Lorem Picsum
Lorem Ipsum is defined as a block of imitation writing.
If you need dummy photos for your content, Lorem Picsum is the place for you.
2. Squoosh
Squoosh compressing your images will almost unnoticeable quality loss, and you can edit their size or how much is lost making it a must if optimizing the image for web use.
3. JSON Formatter
JSON Formatter and JSON Validator help to format and validate your JSON text. It also provides a tree view that helps to navigate your formatted JSON data.
We create our dummy content. Now, How do we store them? Let's keep reading 👇
4. Supabase
Create a backend with Supabase in less than 2 minutes. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage.
Now it's time to show our amazing content on the website 🎉
5. Tailwind
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
It's fast, flexible, and reliable — with zero-runtime.
6. Ant Design
Ant Design is a design system for enterprise-level products. Create an efficient and enjoyable work experience.
7. Material UI
Material UI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.
8. auth0
The Auth0 identity platform provides a secure, streamlined way to manage your users with ease.
9. Cerbos
Cerbos provides complete authorization for your product while enabling collaborative management of permissions.
Before the last item
In fact, I've included most of the resources we'll need when building a website. There may be my shortcomings, things I forgot, or there may be better ones, you can specify them in the comments, I would be very happy, I can write a follow-up article with them 😇
But apart from all these, there is one last item that I want to talk to you about. You wrote a title saying it will make our life easier, but you may say how adding all these to a project will make our life easier. At this point, we come across "refine" 💪
10. refine
refine is a React-based framework for rapid building of internal tools. It's is a a collection of helper hooks, components and providers. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.
refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards.
If you're looking for a framework that will let your data- intensive application run at top speeds with extreme customizability, then look no further than refine. This React based headless system has been designed specifically for speed - allowing users to bring their own UI and update it via refine's powerful interface!
Key features
🔥 Headless : So you can bring your own UI and fuel it with Refine for top speed development.
⚙️ Zero-configuration : One-line setup with superplate. It takes less than a minute to start a project.
📦 Out-of-the-box : Routing, networking, authentication, state management, i18n and UI.
🔌 Backend Agnostic : Connects to any custom backend. Built-in support for REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Appwrite, Firebase and Altogic.
📝 Native Typescript Core : You can always opt out for plain JavaScript.
🐜 Enterprise UI : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)
📝 Boilerplate-free Code : Keeps your codebase clean and readable.
👩💻 🧑💻 Thank you very much for reading and taking the time, I hope my article was helpful.
See you in the next articles. 🙋♂️
Latest comments (11)
superb.. I am already using jsonformatter.org
here is I use codebeautify.org/jsonviewer
Very valuable article
Wonderful post
If you're going to mention something you made (refine), at least make it clear that it's yours. This is dirty marketing.
Great list I use a few of these already.
Very helpful content, Aydin! Thank you for the nice work!
Savvina Drougouti
IT Recruiter & Project Manager
👉 Follow and connect with me on LinkedIn for future open remote positions and quality content.
So this is basically an advertisement for Refine.
Guess that's the new marketing strategy. Have your team throw together lists of nearly random semi-related items with only vaguely accurate descriptions and then inject your own product in the list to get exposure.
Shame to see this is the direction dev.to is going.
gracias esta muy bueno
thank you 🥳
Thx for this. I'm sure it will come in handy for me.