Forem: Miguel

Tesella, A Grid Generator

Miguel — Wed, 18 Jun 2025 18:16:19 +0000

Tired of writing CSS Grid blindly? Tesella is a visual editor that generates CSS Grid code automatically.

What it does

Tesella lets you design layouts with a drag-and-drop interface and get production-ready code in multiple formats:

HTML + CSS
JSX for React
Tailwind CSS
Pure CSS Grid

How it works

Configure columns, rows, and spacing
Drag elements on the grid
Resize with visual handles
Copy the generated code

Why it's useful
Instead of this:

css.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.item { grid-column: 1 / 3; }
You design visually and get the exact code you need.
Tech stack
Built with React, TypeScript, and Vite. Modern interface with syntax highlighting.

Try it

Tesella Demo
Github Repository

Monkeytype react clone ⌨️

Miguel — Sat, 07 Sep 2024 16:17:30 +0000

I'm excited to share a project I've been working on—a clone of the popular typing website Monkeytype built with React. I've made the code publicly available for the community, especially for anyone curious about how such a project could be developed using this framework. While I’m not claiming that this is the best way to build it, it's the approach I found effective, and I hope it can be a helpful resource for others. I’d love to share it with all of you and hear your thoughts!

Also, I’d really appreciate it if you could give it a star on GitHub!
Github
Easytype

Feel free to ask if you'd like to adjust anything!

Miracle UI - React component library

Miguel — Sat, 07 Sep 2024 14:07:53 +0000

Hello everyone, I'd like to introduce you to my project Miracle UI, a component library built entirely with CSS. This makes the library super lightweight and easy to use. Many of the components come with a ton of properties so you can customize them in ways you wouldn't imagine. I invite you to check out the npm packages to see for yourself how lightweight each component really is.

That said, I’d like to clarify that I’m a student and I developed this project on my own, so it probably has some bugs and still has many things that need improvement and review. I really appreciate any feedback, as long as it's well-intentioned.

I also hope you enjoy the components and find the library useful.

I’d be grateful if you could give the project a star on GitHub if you like it or find it interesting, so you can stay up to date with future updates.

I'll paste the links bellow:

MiracleUI
Github

Frontend Resources V2! 🚀

Miguel — Sun, 01 Sep 2024 13:49:50 +0000

🚀 Supercharge Your Development with These Resources! 🚀

👋 Hey everyone! 👋

After the great response to my previous post on Frontend Resources, I’ve decided to create an updated version. This time, I’ve included not only all the tools and libraries I shared before but also a bunch of new resources I've discovered since then.

This collection is packed with a wide range of tools that cover everything from building stunning user interfaces to fine-tuning performance and much more. These resources have been invaluable in my own projects, and I’m excited to share them with you. I hope they’ll be just as useful for you as they have been for me!

Feel free to share any additional resources you use or find interesting—I’d love to add them to the list! Let’s dive in!

UI:

Material Tailwind: A robust UI kit combining Material Design and Tailwind CSS
MiracleUI: Components built in pure CSS and customizable
Bentoed: A html/css/tailwind bento catalog
Aceternity UI: Sleek and modern UI components for your next project
NextUI: Craft beautiful interfaces effortlessly with NextUI
ChakraUI: A simple, modular, and accessible component library
Trading view Charts: Power up your data visualization game with lightweight charts from TradingView
AutoAnimate: Easily create stunning animations with AutoAnimate
React-magic-motion: Add a touch of magic to your React components
Keep React: Keep your React components fresh and stylish
Daisy UI: Create delightful interfaces with Daisy UI
ShadCn: Elevate your UI with sleek and elegant components
Clip path: Get creative with shapes using Clippy
Radix: Build powerful and composable UIs with Radix
Layout generator: Design flexible layouts with ease
Utilities: A handy toolkit for gradients, cursors, and more
Image Generator: Instantly spruce up your designs with high-quality images
Buttons: Button up your UIs with style
PrimeReact: Prime components for your React applications
Everything in one page: Explore a curated collection of resources
Beer CSS: A semantic HTML CSS framework based on Material Design 3.

Gradients:

Firecms: Dynamic gradients for your projects
Shadergradient: Create stunning shader gradients effortlessly.
MSHR: A collection of 434 vanilla CSS mesh gradients free for you to use in any of your projects.

SVGs:

Shapes: Beautiful SVG shapes for your designs
SVGs: Discover a vast collection of SVGs
SVG Illustrations: Add life to your projects with illustrations from Undraw
Flags: 250+ open source flag icons to use in your design tool or in your code project

Icons:

Others:

Sliders — Swiper: Swipe through content seamlessly
Toast notifications — Sonner: Toast notifications made easy
Atropos - 3D Elements: Add immersive 3D elements to your projects
Auto Animate (Native Javascript): Effortlessly animate elements with vanilla JavaScript
Vaul (Mobile Slider): Elevate your sliders with Vaul
Videos performance optimizer: Optimize video performance with Lite YouTube Web Component
Calendar: Streamline your scheduling process
Contrast picker: Ensure accessibility with Coolors' contrast checker
Image optimizer: Squoosh your images for better performance
Relative Time: Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
Shots: Create beautiful photos to showcase your projects.
Profile Readme Generator Github: Create a github Profile README
Responsively: App to develop with multiple responsive views simultaneously
Apis

Tailwind:

Animations: Add flair to your UIs with Tailwind CSS Animated
Intersection Observer: Tailwind CSS Intersect for observing intersections
Backgrounds: Spruce up your backgrounds with ease
Bentoed: A html/css/tailwind bento catalog

JavaScript:

Masonry Grid: Create dynamic grid layouts with ease
MiniMasonry: A lightweight alternative for masonry layouts
Gallery PhotoSwipe: Showcase your images elegantly with PhotoSwipe
Gallery LightGallery: LightGallery for stunning image galleries
Tempo: Simplify time-based operations with Tempo
Tippy (Tooltips): Enhance user experience with customizable tooltips
Intersection Observer: A guide to Intersection Observer for efficient scrolling
Infinite Scroll: Implement infinite scrolling effortlessly
Just: A library for common JavaScript utilities
GLTFs into JSX: Convert GLTF files into JSX components
Theme Toggle Effect: Switch between dark and light theme with a beautiful animation.
Code Speed Comparation

React:

Counter: Count up your numbers dynamically
Masonry layout: Build responsive masonry layouts in React
Drag and Drop: Effortlessly implement drag and drop functionality
FilePond: Simplify file uploads with FilePond
Faker: Generate realistic fake data with Faker
Random: Spice up your projects with random words
Charts: Visualize data beautifully with Chart.js
UseSound: Incorporate sound effects into your React apps
ReCharts: Charting library built on React components
Floating UI (Tooltips): Floating UI for interactive tooltips
Tippy (Tooltips): Tippy.js for React applications
Calendar: Another calendar resource for all your scheduling needs
CMDK Console: A console for your React applications
Sliders
Drag To Swap

Animations

Create Test REST APIs in Seconds! 🚀

Miguel — Tue, 04 Jun 2024 02:59:49 +0000

If you're a frontend developer looking to create test REST APIs quickly and easily, look no further! This free tool is a game-changer, allowing you to set up APIs in seconds without any deployments. Here’s what it offers:

GET, POST, PUT, and DELETE Methods: Support for all standard HTTP methods ensures you can create comprehensive API functionalities for your applications.
Random Data for Responses: Generate random data for your API responses, making it perfect for testing various scenarios and edge cases.
HTTPS and CORS Support: Enjoy seamless integration with your projects, thanks to built-in HTTPS and CORS support.
No Deployments Needed: Skip the hassle of deploying servers; this tool works right out of the box.

This resource is an essential addition to any developer's toolkit, simplifying the process of API development and testing. Try it out and experience the ease of creating test REST APIs in seconds!

Here's the link: https://retool.com/api-generator

Best sites to practice your programming logic 💻

Miguel — Sun, 26 May 2024 00:53:51 +0000

Hello everyone! Here are some of the best options (in my opinion) to practice and improve your programming logic:

Codewars: Tackle programming challenges known as "katas" that range from beginner to advanced levels, in various languages.
Adventjs: Participate in daily challenges during the holiday season. It's a great way to stay motivated and improve your skills with JavaScript.
Hackerrank: A wide variety of programming problems and technical interview challenges in multiple languages. Perfect for preparing for job interviews.
Exercism: Offers practical exercises in over 50 programming languages, with the option to receive personalized mentorship.
Edabit: Practice with short and quick challenges, suitable for both beginners and more experienced programmers.
Project euler: Mathematical and programming challenges that will help you improve your logical and algorithmic skills.

I hope you find these platforms useful and enjoy enhancing your programming skills. Happy coding!

Frontend resources! 🚀

Miguel — Sat, 25 May 2024 16:33:01 +0000

🚀 Supercharge Your Development with These Resources! 🚀

👋 Hello everyone! 👋

I'm thrilled to share this collection of resources I've gathered over time, which have been a lifesaver in many of the projects I've worked on. This compilation brings together a variety of tools and libraries spanning from user interface creation to performance optimization and beyond. I hope you can also make the most out of some of these wonderful resources. Let's dive right in!

Feel free to comment with any other resources that you use or find interesting so I can add them to the post!

UI:

Material Tailwind: A robust UI kit combining Material Design and Tailwind CSS
MiracleUI: Components built in pure CSS and customizable
Bentoed: A html/css/tailwind bento catalog
Aceternity UI: Sleek and modern UI components for your next project
NextUI: Craft beautiful interfaces effortlessly with NextUI
ChakraUI: A simple, modular, and accessible component library
Trading view Charts: Power up your data visualization game with lightweight charts from TradingView
AutoAnimate: Easily create stunning animations with AutoAnimate
React-magic-motion: Add a touch of magic to your React components
Keep React: Keep your React components fresh and stylish
Daisy UI: Create delightful interfaces with Daisy UI
ShadCn: Elevate your UI with sleek and elegant components
Clip path: Get creative with shapes using Clippy
Radix: Build powerful and composable UIs with Radix
Layout generator: Design flexible layouts with ease
Utilities: A handy toolkit for gradients, cursors, and more
Image Generator: Instantly spruce up your designs with high-quality images
Buttons: Button up your UIs with style
PrimeReact: Prime components for your React applications
Everything in one page: Explore a curated collection of resources
Beer CSS: A semantic HTML CSS framework based on Material Design 3.

Gradients:

Firecms: Dynamic gradients for your projects
Shadergradient: Create stunning shader gradients effortlessly

SVGs:

Shapes: Beautiful SVG shapes for your designs
SVGs: Discover a vast collection of SVGs
SVG Illustrations: Add life to your projects with illustrations from Undraw

Others:

Sliders — Swiper: Swipe through content seamlessly
Toast notifications — Sonner: Toast notifications made easy
Atropos - 3D Elements: Add immersive 3D elements to your projects
Auto Animate (Native Javascript): Effortlessly animate elements with vanilla JavaScript
Vaul (Mobile Slider): Elevate your sliders with Vaul
Videos performance optimizer: Optimize video performance with Lite YouTube Web Component
Calendar: Streamline your scheduling process
Contrast picker: Ensure accessibility with Coolors' contrast checker
Image optimizer: Squoosh your images for better performance

Tailwind:

Animations: Add flair to your UIs with Tailwind CSS Animated
Intersection Observer: Tailwind CSS Intersect for observing intersections
Backgrounds: Spruce up your backgrounds with ease
Bentoed: A html/css/tailwind bento catalog

JavaScript:

Masonry Grid: Create dynamic grid layouts with ease
MiniMasonry: A lightweight alternative for masonry layouts
Gallery PhotoSwipe: Showcase your images elegantly with PhotoSwipe
Gallery LightGallery: LightGallery for stunning image galleries
Tempo: Simplify time-based operations with Tempo
Tippy (Tooltips): Enhance user experience with customizable tooltips
Intersection Observer: A guide to Intersection Observer for efficient scrolling
Infinite Scroll: Implement infinite scrolling effortlessly
Just: A library for common JavaScript utilities
GLTFs into JSX: Convert GLTF files into JSX components

React:

Counter: Count up your numbers dynamically
Masonry layout: Build responsive masonry layouts in React
Drag and Drop: Effortlessly implement drag and drop functionality
FilePond: Simplify file uploads with FilePond
Faker: Generate realistic fake data with Faker
Random: Spice up your projects with random words
Charts: Visualize data beautifully with Chart.js
UseSound: Incorporate sound effects into your React apps
ReCharts: Charting library built on React components
Floating UI (Tooltips): Floating UI for interactive tooltips
Tippy (Tooltips): Tippy.js for React applications
Calendar: Another calendar resource for all your scheduling needs
CMDK Console: A console for your React applications

Bento catalog web! 🎨

Miguel — Sun, 05 May 2024 03:50:48 +0000

Collection of modern bento-grid components

Welcome to my Bento Catalog! I've designed this resource specifically for developers and designers, providing a unique collection of bento box designs that you can easily incorporate into your projects. Each design is fully coded using HTML, CSS, and the popular Tailwind CSS framework, ensuring easy integration and customization.

Whether you're looking to enhance your website with unique bento box elements or need inspiration for UI components, my catalog offers a selection that you can simply copy and paste into your codebase. I am committed to regularly updating my collection with new styles that follow the latest web design trends.

I hope you find my catalog useful and inspiring. Enjoy crafting beautiful and functional web layouts with these carefully crafted bento designs!

https://bentoed.vercel.app