ric ⚛️
@ric-m12.bsky.social
Building products for the web 🛠💻 currently at @playtomic
I share thoughts and learnings on software development, product design, and UX/UI
I share thoughts and learnings on software development, product design, and UX/UI
I made a thing ✨
I called it FrameCount — a little app that lets me track what I watch and see how much time I’ve spent doing it.
It’s probably overkill, but it made me happy to build it.
Would love to hear your thoughts if you check it out 🙏
buff.ly/vqLHaep
I called it FrameCount — a little app that lets me track what I watch and see how much time I’ve spent doing it.
It’s probably overkill, but it made me happy to build it.
Would love to hear your thoughts if you check it out 🙏
buff.ly/vqLHaep
April 15, 2025 at 9:15 AM
I made a thing ✨
I called it FrameCount — a little app that lets me track what I watch and see how much time I’ve spent doing it.
It’s probably overkill, but it made me happy to build it.
Would love to hear your thoughts if you check it out 🙏
buff.ly/vqLHaep
I called it FrameCount — a little app that lets me track what I watch and see how much time I’ve spent doing it.
It’s probably overkill, but it made me happy to build it.
Would love to hear your thoughts if you check it out 🙏
buff.ly/vqLHaep
Been building a little side project these past weeks.
It tracks the movies I watch, and shows me stuff like:
→ total time spent and movies watched
→ favorite genres
→ other cool stats I didn’t know I wanted
It's built for me, but I will share tomorrow to get some feedback 🎬
It tracks the movies I watch, and shows me stuff like:
→ total time spent and movies watched
→ favorite genres
→ other cool stats I didn’t know I wanted
It's built for me, but I will share tomorrow to get some feedback 🎬
April 14, 2025 at 9:02 AM
Been building a little side project these past weeks.
It tracks the movies I watch, and shows me stuff like:
→ total time spent and movies watched
→ favorite genres
→ other cool stats I didn’t know I wanted
It's built for me, but I will share tomorrow to get some feedback 🎬
It tracks the movies I watch, and shows me stuff like:
→ total time spent and movies watched
→ favorite genres
→ other cool stats I didn’t know I wanted
It's built for me, but I will share tomorrow to get some feedback 🎬
One of the things I love checking in the app I'm building for tracking movies:
👉 Distribution of the movies I've watched by release year (I'm very into the 2000's)
👉 Total full days of my life spent watching shit
It’s soooo satisfying
I'll share it next week in case someone wanna take a 👀✨
👉 Distribution of the movies I've watched by release year (I'm very into the 2000's)
👉 Total full days of my life spent watching shit
It’s soooo satisfying
I'll share it next week in case someone wanna take a 👀✨
April 11, 2025 at 10:48 AM
One of the things I love checking in the app I'm building for tracking movies:
👉 Distribution of the movies I've watched by release year (I'm very into the 2000's)
👉 Total full days of my life spent watching shit
It’s soooo satisfying
I'll share it next week in case someone wanna take a 👀✨
👉 Distribution of the movies I've watched by release year (I'm very into the 2000's)
👉 Total full days of my life spent watching shit
It’s soooo satisfying
I'll share it next week in case someone wanna take a 👀✨
Been playing with some of this stuff:
- Next.js 15 + App Router
- React 19
- Prisma
It's a bit of an overkill for a personal movie tracker, but - I learned a lot building it. I'll share it soon just in case someone wants to throw some feedback in! 🍿
- Next.js 15 + App Router
- React 19
- Prisma
It's a bit of an overkill for a personal movie tracker, but - I learned a lot building it. I'll share it soon just in case someone wants to throw some feedback in! 🍿
April 8, 2025 at 6:57 PM
Been playing with some of this stuff:
- Next.js 15 + App Router
- React 19
- Prisma
It's a bit of an overkill for a personal movie tracker, but - I learned a lot building it. I'll share it soon just in case someone wants to throw some feedback in! 🍿
- Next.js 15 + App Router
- React 19
- Prisma
It's a bit of an overkill for a personal movie tracker, but - I learned a lot building it. I'll share it soon just in case someone wants to throw some feedback in! 🍿
Amazon ha empezado a añadir IA en las páginas de los productos. El resumen de las reseñas de los usuarios me parece super útil
December 26, 2024 at 10:44 AM
Amazon ha empezado a añadir IA en las páginas de los productos. El resumen de las reseñas de los usuarios me parece super útil
Realistic Pokemon cards with CSS
Codepen: https://codepen.io/msriki12/pen/yyBNMEr
#css #html #pokemon #javascript
Codepen: https://codepen.io/msriki12/pen/yyBNMEr
#css #html #pokemon #javascript
December 13, 2024 at 9:32 AM
Realistic Pokemon cards with CSS
Codepen: https://codepen.io/msriki12/pen/yyBNMEr
#css #html #pokemon #javascript
Codepen: https://codepen.io/msriki12/pen/yyBNMEr
#css #html #pokemon #javascript
Recently, I’ve been experimenting with CSS to achieve a retro CRT effect. Combined it with a fun audio clip for extra nostalgia 🎮
Check it out and play with the code here:
👉 https://codepen.io/msriki12/pen/wBwMzjq
What would you build with this?
#css #webdev #frontend
Check it out and play with the code here:
👉 https://codepen.io/msriki12/pen/wBwMzjq
What would you build with this?
#css #webdev #frontend
December 12, 2024 at 10:03 AM
Recently, I’ve been experimenting with CSS to achieve a retro CRT effect. Combined it with a fun audio clip for extra nostalgia 🎮
Check it out and play with the code here:
👉 https://codepen.io/msriki12/pen/wBwMzjq
What would you build with this?
#css #webdev #frontend
Check it out and play with the code here:
👉 https://codepen.io/msriki12/pen/wBwMzjq
What would you build with this?
#css #webdev #frontend
3.4: Server Components adjustments
React 19 enforces stricter rules for Server Components:
🎯 Props must be serializable (only strings, numbers, or JSON-like objects—no functions or DOM nodes)
🎯 Async rendering works seamlessly with Suspense, but you must handle errors
React 19 enforces stricter rules for Server Components:
🎯 Props must be serializable (only strings, numbers, or JSON-like objects—no functions or DOM nodes)
🎯 Async rendering works seamlessly with Suspense, but you must handle errors
December 10, 2024 at 8:54 AM
3.4: Server Components adjustments
React 19 enforces stricter rules for Server Components:
🎯 Props must be serializable (only strings, numbers, or JSON-like objects—no functions or DOM nodes)
🎯 Async rendering works seamlessly with Suspense, but you must handle errors
React 19 enforces stricter rules for Server Components:
🎯 Props must be serializable (only strings, numbers, or JSON-like objects—no functions or DOM nodes)
🎯 Async rendering works seamlessly with Suspense, but you must handle errors
3.2: ref improvements
React 19 allows ref to be passed as a prop directly 🔝. Migrate your components to handle ref correctly.
💡 If you’re using forwardRef, validate that it aligns with this new behavior:
React 19 allows ref to be passed as a prop directly 🔝. Migrate your components to handle ref correctly.
💡 If you’re using forwardRef, validate that it aligns with this new behavior:
December 10, 2024 at 8:54 AM
3.2: ref improvements
React 19 allows ref to be passed as a prop directly 🔝. Migrate your components to handle ref correctly.
💡 If you’re using forwardRef, validate that it aligns with this new behavior:
React 19 allows ref to be passed as a prop directly 🔝. Migrate your components to handle ref correctly.
💡 If you’re using forwardRef, validate that it aligns with this new behavior:
Step 2: Install React 19
Install the new version of React and run the codemods.
Codemods are scripts that run on your code and update deprecated APIs automatically for you. If the project is big, run them one by one instead of in bulk, to easily solve any potential issues
Install the new version of React and run the codemods.
Codemods are scripts that run on your code and update deprecated APIs automatically for you. If the project is big, run them one by one instead of in bulk, to easily solve any potential issues
December 10, 2024 at 8:54 AM
Step 2: Install React 19
Install the new version of React and run the codemods.
Codemods are scripts that run on your code and update deprecated APIs automatically for you. If the project is big, run them one by one instead of in bulk, to easily solve any potential issues
Install the new version of React and run the codemods.
Codemods are scripts that run on your code and update deprecated APIs automatically for you. If the project is big, run them one by one instead of in bulk, to easily solve any potential issues
React 19 is now stable, and with this new version, the funniest moments of the year arrive: The Migration! 🎉🚀
Let me walk you through the key steps for migrating from React 18 to React 19 🧵
#react #react19 #javascript
Let me walk you through the key steps for migrating from React 18 to React 19 🧵
#react #react19 #javascript
December 10, 2024 at 8:54 AM
React 19 is now stable, and with this new version, the funniest moments of the year arrive: The Migration! 🎉🚀
Let me walk you through the key steps for migrating from React 18 to React 19 🧵
#react #react19 #javascript
Let me walk you through the key steps for migrating from React 18 to React 19 🧵
#react #react19 #javascript
🌀 3D Transformations
With Tailwind 4, you can now define 3D transforms like rotateX, rotateY, and rotateZ
I'm especially excited about this one 👀
With Tailwind 4, you can now define 3D transforms like rotateX, rotateY, and rotateZ
I'm especially excited about this one 👀
December 4, 2024 at 9:51 AM
🌀 3D Transformations
With Tailwind 4, you can now define 3D transforms like rotateX, rotateY, and rotateZ
I'm especially excited about this one 👀
With Tailwind 4, you can now define 3D transforms like rotateX, rotateY, and rotateZ
I'm especially excited about this one 👀
🎨 CSS-First Configuration
Tailwind configuration is now directly in your CSS files, instead of using a tailwind.config.js
This is HUGE for 2 main reasons:
1️⃣ Keep configuration close to where styles are defined
2️⃣ Use context-aware configuration for individual files
Tailwind configuration is now directly in your CSS files, instead of using a tailwind.config.js
This is HUGE for 2 main reasons:
1️⃣ Keep configuration close to where styles are defined
2️⃣ Use context-aware configuration for individual files
December 4, 2024 at 9:51 AM
🎨 CSS-First Configuration
Tailwind configuration is now directly in your CSS files, instead of using a tailwind.config.js
This is HUGE for 2 main reasons:
1️⃣ Keep configuration close to where styles are defined
2️⃣ Use context-aware configuration for individual files
Tailwind configuration is now directly in your CSS files, instead of using a tailwind.config.js
This is HUGE for 2 main reasons:
1️⃣ Keep configuration close to where styles are defined
2️⃣ Use context-aware configuration for individual files
What’s new in Tailwind 4?
🚀 Performance Improvements
👉 Faster builds using multi-core processing
👉 Smaller package size for faster installations
👉 Even more efficient removal of unused CSS, reducing production bundle sizes significantly
⬆️ === much faster websites overall
🚀 Performance Improvements
👉 Faster builds using multi-core processing
👉 Smaller package size for faster installations
👉 Even more efficient removal of unused CSS, reducing production bundle sizes significantly
⬆️ === much faster websites overall
December 4, 2024 at 9:51 AM
What’s new in Tailwind 4?
🚀 Performance Improvements
👉 Faster builds using multi-core processing
👉 Smaller package size for faster installations
👉 Even more efficient removal of unused CSS, reducing production bundle sizes significantly
⬆️ === much faster websites overall
🚀 Performance Improvements
👉 Faster builds using multi-core processing
👉 Smaller package size for faster installations
👉 Even more efficient removal of unused CSS, reducing production bundle sizes significantly
⬆️ === much faster websites overall
I'm a big fan of #TailwindCSS, and after checking the v4 Beta, I bet Tailwind will become the top 1 way of writing CSS for most indie devs
Here's a brief summary of what I think are the game-changing features of TW4 🧵👇
Here's a brief summary of what I think are the game-changing features of TW4 🧵👇
December 4, 2024 at 9:51 AM
I'm a big fan of #TailwindCSS, and after checking the v4 Beta, I bet Tailwind will become the top 1 way of writing CSS for most indie devs
Here's a brief summary of what I think are the game-changing features of TW4 🧵👇
Here's a brief summary of what I think are the game-changing features of TW4 🧵👇
Un año más estaré participando en el #AdventOfCode de @midu.dev 🎄
Nunca lo termino, pero siempre me lo paso genial resolviendo los ejercicios que me da tiempo sin presión
Os dejo el enlace por si os apetece participar, nos vemos en el leaderboard 🫡
https://adventjs.dev/es
Nunca lo termino, pero siempre me lo paso genial resolviendo los ejercicios que me da tiempo sin presión
Os dejo el enlace por si os apetece participar, nos vemos en el leaderboard 🫡
https://adventjs.dev/es
December 3, 2024 at 9:11 AM
Un año más estaré participando en el #AdventOfCode de @midu.dev 🎄
Nunca lo termino, pero siempre me lo paso genial resolviendo los ejercicios que me da tiempo sin presión
Os dejo el enlace por si os apetece participar, nos vemos en el leaderboard 🫡
https://adventjs.dev/es
Nunca lo termino, pero siempre me lo paso genial resolviendo los ejercicios que me da tiempo sin presión
Os dejo el enlace por si os apetece participar, nos vemos en el leaderboard 🫡
https://adventjs.dev/es
In case you don’t want to install extra tools to clean up or just prefer the "delete everything" version, here’s another way I used to manage node_modules bloat
This approach is more aggressive (and a bit scary the first time). Also, no UI to guide you through the process 🫠
This approach is more aggressive (and a bit scary the first time). Also, no UI to guide you through the process 🫠
November 30, 2024 at 11:26 PM
In case you don’t want to install extra tools to clean up or just prefer the "delete everything" version, here’s another way I used to manage node_modules bloat
This approach is more aggressive (and a bit scary the first time). Also, no UI to guide you through the process 🫠
This approach is more aggressive (and a bit scary the first time). Also, no UI to guide you through the process 🫠
My PC was starting to slow down, and after checking, I realized I was running out of space 🫠
I found a lot of it was taken by node_modules folders from old projects I hadn’t touched in years. Here's a super useful way for easily deleting them, no installation required! 🤯
I found a lot of it was taken by node_modules folders from old projects I hadn’t touched in years. Here's a super useful way for easily deleting them, no installation required! 🤯
November 30, 2024 at 11:26 PM
My PC was starting to slow down, and after checking, I realized I was running out of space 🫠
I found a lot of it was taken by node_modules folders from old projects I hadn’t touched in years. Here's a super useful way for easily deleting them, no installation required! 🤯
I found a lot of it was taken by node_modules folders from old projects I hadn’t touched in years. Here's a super useful way for easily deleting them, no installation required! 🤯
Setting up a system to test feature flags locally within Next.js using env variables, but values kept returning undefined 😅 Turns out NextJS replaces env values at build time
Solution: Access the env variable directly, or map it into a runtime object if you need flexibility:
Solution: Access the env variable directly, or map it into a runtime object if you need flexibility:
![Code snippet explaining dynamic access to environment variables in Next.js:
1. Dynamic access using a computed key (process.env[variable]) ❌ Doesn't work because Next.js resolves env variables at build time.
2. Direct access (process.env.NEXT_PUBLIC_ENABLE_FEATURE_X) ✅ Works!
3. Runtime solution using a configuration object to handle dynamic keys (config[key]) ✅ Works dynamically at runtime, with added type safety.](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:muriy625yqha2cdspogm4dr7/bafkreicsnuf7lc3kts7xi6diyp67ls43q4sbddtydkjoynyy7rli2jurqq@jpeg)
November 30, 2024 at 9:48 AM
Setting up a system to test feature flags locally within Next.js using env variables, but values kept returning undefined 😅 Turns out NextJS replaces env values at build time
Solution: Access the env variable directly, or map it into a runtime object if you need flexibility:
Solution: Access the env variable directly, or map it into a runtime object if you need flexibility:
7/ Final advice to a common pitfall: Don’t mutate props!
Props are read-only. If you need to modify them, lift the state up to the parent and pass down updated props instead 🏗️
Props are read-only. If you need to modify them, lift the state up to the parent and pass down updated props instead 🏗️
November 29, 2024 at 9:52 AM
7/ Final advice to a common pitfall: Don’t mutate props!
Props are read-only. If you need to modify them, lift the state up to the parent and pass down updated props instead 🏗️
Props are read-only. If you need to modify them, lift the state up to the parent and pass down updated props instead 🏗️