Sign in

Flavien (56kode)

@56kode.bsky.social
48 followers 146 following 93 posts

Frontend developer specializing in all things #React, #TS, and #JS My posts : www.56kode.com

PostsRepliesMedia
Flavien (56kode) @56kode.bsky.social · 31/08/2026
My blog had no identity. I rebuilt it with Claude Design and Claude Code. 🎨 Audits and fixes included, it took me less than a day. What do you think of the new design? www.56kode.com/posts/redesi... #claude #claudecode #claudedesign #ai
56kode.com
The story of a redesign with Claude Design and Claude Code | 56kode
How I redesigned 56kode with Claude Design and Claude Code: finding an identity, the design tokens, moving from mockup to code, and the 22 audit findings that followed.
110
Reposted by Flavien (56kode)
Frédéric Bouchery @bouchery.fr · 18/08/2026
Vous avez supprimé la revue de code ? Vous avez peut-être raison ... f2r.github.io/fr/supprimer...
f2r.github.io
Ceux qui ont supprimé la revue de code ont raison.
Des développeurs sont arrivés sur ma MR avec une IA qui faisait la revue à leur place. Ceux qui ont carrément supprimé la revue sont presque plus honnêtes, parce qu'ils ont vu qu'elle avait perdu la c...
144
Flavien (56kode) @56kode.bsky.social · 06/03/2026
New post 📢: how I used Claude Code to build a Chrome extension and an n8n workflow that automates my AI tech watch sharing. The whole thing in about 30 minutes. www.56kode.com/posts/ai-pow...
56kode.com
AI-powered development: Chrome extension and n8n automation with Claude Code | 56kode - AI & Frontend Development Blog
A Chrome extension + n8n automation pipeline built with Claude Code in 30 minutes to automate my AI tech watch sharing.
100
Flavien (56kode) @56kode.bsky.social · 04/03/2026
🔥 Just discovered rtk-ai.app, a game-changer for Claude Code users! It filters shell output noise before it reaches your AI: ✅ Fewer tokens = lower cost ✅ Longer sessions, no context reset needed ✅ More focused agent, less distraction Thanks to Florian Bruniaux
000
Flavien (56kode) @56kode.bsky.social · 10/02/2026
Why I migrated from #Cursor to #ClaudeCode (and why you should too). ⚡️ I stopped typing code and started supervising agents in the terminal. The productivity gain is real. 🤖 Read my full honest feedback here: 👉 www.56kode.com/posts/moving... #ai #agent #opus
56kode.com
Why we’re moving from Cursor to Claude Code (and why you should too) | 56kode - Web Development Blog on React & TypeScript
Discover why I switched from Cursor to Claude Code. A Lead Frontend Developer’s honest feedback on the limitations of AI IDEs and the power of CLI coding agents in 2026.
111
Flavien (56kode) @56kode.bsky.social · 21/01/2026
Stop cleaning dead code manually! 🛑 Discover a safe workflow combining Knip to find unused exports and an AI agent to verify and remove them without breaking production. 🤖 👉 56kode.com/posts/clean-... #TypeScript #ts #ai #cursor #claudecode
56kode.com
Efficiently cleaning a TypeScript project: Knip + AI agent workflow | 56kode - Web Development Blog on React & TypeScript
Learn how to safely clean dead code in TypeScript projects using Knip and an AI Agent. A step-by-step workflow to automate cleanup without breaking production
010
Flavien (56kode) @56kode.bsky.social · 14/01/2026
Last week I asked #Gemini for a summary but forgot the URL. It gave me a summary anyway. Apparently, prompt engineering is obsolete; we’re moving straight to telepathic engineering. Or just pure hallucinations. 😅🔮#AI
000
Flavien (56kode) @56kode.bsky.social · 18/12/2025
Forget “Reasoning Avg” and “Coding Avg”. My only #AI benchmark: insults per day. #Gemini 3 Pro & Claude #Opus? So good I sometimes go 24h without calling them names. That’s basically AGI in my house.
010
Reposted by Flavien (56kode)
Justin Fagnani @justinfagnani.com · 25/06/2025
After a new wave of discussion about CustomEvent vs Event subclasses, I wrote a new blog post on the topic: TL;DR: Subclass Event instead of using CustomEvent 😎 justinfagnani.com/2025/06/25/s...
justinfagnani.com
Stop Using CustomEvent
15910
Flavien (56kode) @56kode.bsky.social · 26/11/2025
Our Vitest tests took 22s to start. Now? 4 seconds. 🚀 How Gemini 3 Pro identified "God Modules" killing our performance and automated the fix—saving us 15 min per CI run. 👉 www.56kode.com/posts/how-ge... #Vitest #CI #react #reactjs
56kode.com
How Gemini 3 Pro cut our pipeline time in half | 56kode - Web Development Blog on React & TypeScript
We cut our test pipeline time from 22s to 4s per file using Gemini 3 Pro. Learn how AI identified "God Modules" killing our Vitest performance and automated the architectural refactoring that saved us...
020
Flavien (56kode) @56kode.bsky.social · 23/09/2025
🚀 Debug web apps directly from #Cursor #IDE with Browser-Tools #MCP! ⚡ 🔹 Console logs analysis 🔹 Network requests inspection 🔹 AI-powered debugging 👉 www.56kode.com/posts/connec... #CursorIDE #AI #debug #chrome
56kode.com
Connect Cursor to Your Browser with Browser-Tools MCP | 56kode - Web Development Blog on React & TypeScript
Learn how to integrate Browser-Tools MCP with Cursor IDE to debug web applications directly from your code editor using AI assistance
000
Flavien (56kode) @56kode.bsky.social · 10/09/2025
Back from vacation ✈️ and straight into action! I let AI handle a full dependency migration on my Astro blog: React 19, Astro 5 Content Layer, Tailwind… all automated ⚡ Curious how it went? 👉 www.56kode.com/posts/automa... #Astro #AI #cursor #cursorAI
56kode.com
Automated Astro dependencies update with Cursor and Claude | 56kode - Web Development Blog on React & TypeScript
Complete migration from Astro 4 to Astro 5 with Content Layer automated by Claude 4 Sonnet. Detailed experience report on breaking changes, new rendering API, and migration of all dependencies like Re...
210
Flavien (56kode) @56kode.bsky.social · 17/07/2025
Lost in your codebase? 🤯 Cursor's screenshot search feature is a game-changer! Just paste a UI screenshot and it finds the corresponding file for you. Saves so much time! #Cursor
010
Flavien (56kode) @56kode.bsky.social · 10/07/2025
AI agent stuck? 😫 Pro tip: Just open a new chat and restart! Often fixes the bug and gets things running smoothly again. #AI
030
Flavien (56kode) @56kode.bsky.social · 11/06/2025
🚀 Tech Watch #15 is live! 👉 Compound Components in #React 👉 useSyncExternalStore demystified 👉 #AI & the future of dev jobs 👉 #TypeScript in the AI era 👉 Migrating from #ESLint to #BiomeJS 🔗 open.substack.com/pub/56kode/p...
open.substack.com
Tech watch #15
A curated selection of articles for React frontend developers, focusing on architecture, performance, and best practices
030
Flavien (56kode) @56kode.bsky.social · 05/06/2025
Skip the IDE-to-browser shuffle! 🔄 Make Cursor talk to Jira with MCP 🎯 Get tickets, check specs, even auto-build test plans without leaving your editor. 👉 www.56kode.com/posts/integr... #Jira #CursorAI
56kode.com
Integrating Jira into Cursor with the Model Context Protocol | 56kode - Web Development Blog on React & TypeScript
Step-by-step guide to connect Jira to Cursor through the Model Context Protocol and streamline your workflow
020
Reposted by Flavien (56kode)
thiery-michel.bsky.social @thiery-michel.bsky.social · 02/06/2025
marmelab.com/blog/2025/05...
marmelab.com
SolidJS for React Developers
SolidJS has been around for a few years now. As a React developer, I wanted to give it a try. While it resembles React in many ways, it also introduces some key differences.
001
Flavien (56kode) @56kode.bsky.social · 20/05/2025
🚀 New article: Level Up #React - Mastering Context API 🔍 Learn how React's Context API really works under the hood, what’s new in React 19, and when to use it vs Zustand or Redux. 📉 Avoid unnecessary re-renders with proven optimization tips. 📖 Read → www.56kode.com/posts/level-...
56kode.com
Level Up React: Mastering Context API | 56kode - Web Development Blog on React & TypeScript
Explore the internal mechanisms of React's Context API, its optimizations in React 19, and how to use it effectively for global state management. Comparison with Zustand and Redux, advanced optimizati...
000
Flavien (56kode) @56kode.bsky.social · 14/05/2025
🧪 What if your tests... were being tested too? A high code coverage doesn’t mean your app is bug-free. It just means your code was executed by tests — not that it was really verified. Let me show you something better: mutation testing 👇 #testing #jest #vitest #js #ts
110
Flavien (56kode) @56kode.bsky.social · 14/05/2025
AI tools like ChatGPT or Claude write way better code with #TypeScript 🤖🧠 Your types give the AI context 👇 Well-typed code = better suggestions, safer refactors, fewer bugs. TypeScript isn’t a nice-to-have. It’s your AI co-pilot’s map 🗺️ #ts #ai #cursor #windsurf
000
Flavien (56kode) @56kode.bsky.social · 07/05/2025
🚀 Tech Watch #14 is live! 👉 Open-Closed Principle in React 👉 Pattern Matching in TanStack Query 👉 Faster Lazy Loading in React Router 👉 useEffect: Child vs Parent 👉 Cursor Rules for AI Dev in TS 👉 The Hidden Cost of AI Coding 🔗 open.substack.com/pub/56kode/p...
010
Flavien (56kode) @56kode.bsky.social · 28/04/2025
There's nothing better than full remote work.
000
Flavien (56kode) @56kode.bsky.social · 24/04/2025
Want better answers from #AI? 🤔 First, ask what info it’s missing to help you better. ✍️ Then, ask it to rewrite your prompt for clarity. You don’t need to be perfect — just collaborate smart 🤖✨ #chatpgt #claudeai #claude #gemini #deepseek
000
Flavien (56kode) @56kode.bsky.social · 17/04/2025
🚀 Tech Watch #13 is live! 👉 Master useReducer 👉 React.memo demystified 👉 React Reconciliation 👉 Tailwind's apply feature 👉 Toast in Server Components 🔗 56kode.substack.com/p/tech-watch...
56kode.substack.com
Tech watch #13
A curated selection of articles for React frontend developers, focusing on architecture, performance, and best practices
000
Flavien (56kode) @56kode.bsky.social · 15/04/2025
📢 Stop managing complex state with multiple useState hooks! Learn how to master useReducer for structured state management in React 🧩 🔹 Centralize business logic 🔹 Create explicit actions 🔹 Improve testability 👉 www.56kode.com/posts/level-... #React
56kode.com
Level Up React: Mastering useReducer for structured state management | 56kode - Web Development Blog on React & TypeScript
Complete guide to React's useReducer hook - from basic concepts to advanced implementation. Learn how to structure complex state logic, manage interdependent state, and create maintainable React appli...
000
Flavien (56kode) @56kode.bsky.social · 10/04/2025
Your React.memo component keeps re-rendering? Check the children. JSX passed inline is recreated every render → breaks memo. ✅ Solution: memoize children with useMemo, or don’t memoize at all if it’s not worth it. Code ⬇️
000
Flavien (56kode) @56kode.bsky.social · 03/04/2025
🚀 Tech Watch #12 is live! Must-read for frontend devs: 👉 Real-world uses of TypeScript utility types 👉 Next.js auth with Server Components 👉 Vite vs Turbopack speed test 👉 React View Transitions API 👉 And more... 🔗 Read here: 56kode.substack.com/p/tech-watch...
56kode.substack.com
Tech watch #12
A curated selection of articles for React frontend developers, focusing on architecture, performance, and best practices
000
Reposted by Flavien (56kode)
Jérémy DECOOL @jdecool.bsky.social · 02/04/2025
Why I stopped using AI code editors: lucianonooijen.com/blog/why-i-stopp…
001
Flavien (56kode) @56kode.bsky.social · 28/03/2025
🔢 Want to improve your TypeScript skills? Learn how to refine number typing with literal types, branded types, and more! 🛠️🚀 👉 dev.to/56_kode/adva... #TypeScript #TS
dev.to
Advanced number typing in TypeScript
Introduction TypeScript significantly enhances number typing beyond the basic number type....
010
Flavien (56kode) @56kode.bsky.social · 24/03/2025
🚀 Tech Watch #11 is out! Essential reads for frontend devs: 👉 Storing state in the URL in React 👉 Beyond React.memo for better performance 👉 LLMs for web devs 👉 Web Components guide 👉 SSR deep dive for React 👉And more... open.substack.com/pub/56kode/p...
open.substack.com
Tech watch #11
A curated selection of articles for React frontend developers, focusing on architecture, performance, and best practices
000
Flavien (56kode) @56kode.bsky.social · 18/03/2025
New Level Up #React article! 🔄 Stop fighting with useEffect! Master this powerful hook to build truly performant apps. 🧩 Learn execution cycles, avoid infinite loops, and discover when NOT to use effects with practical examples. 👉 www.56kode.com/posts/level-... #reactjs #hooks
56kode.com
Level Up React: Mastering useEffect for performant React applications | 56kode - Web Development Blog on React & TypeScript
Learn how to master React's useEffect hook with practical examples. Discover internal mechanisms, avoid common pitfalls, and build performant applications with proper synchronization techniques.
010
Flavien (56kode) @56kode.bsky.social · 12/03/2025
🔍 Tech Watch #10 is out! Curated frontend insights: 👉 Why unknown > any in #TypeScript 👉 TanStack Form v1 release 👉 Signals in #React: pros & cons 👉 #Cursor AI productivity tips 👉 React Wrapper Pattern 👉 Zod for API validation 👉 TypeScript Map Pattern Read more: open.substack.com/pub/56kode/p...
open.substack.com
Tech watch #10
A curated selection of articles for React frontend developers, focusing on architecture, performance, and best practices
030
Flavien (56kode) @56kode.bsky.social · 07/03/2025
💡 TypeScript Tip: Prefer unknown over any for safer, more maintainable code! 🚀 🔹 any bypasses type safety, leading to runtime errors. 🔹 unknown forces type checks, reducing bugs. Learn why and when to use them: 👉 dev.to/56_kode/clea... #TypeScript #CleanCode
dev.to
Clean code: Why prefer unknown over any in TypeScript
TypeScript offers two main types for handling values whose type is not known in advance: any and...
020
Flavien (56kode) @56kode.bsky.social · 04/03/2025
New Level Up #React article! Master state management with useState - from basics to performance optimization. Learn functional updates, lazy initialization, and avoid common pitfalls with practical examples www.56kode.com/posts/level-... #reactjs #hooks
56kode.com
Level Up React: Deep dive into state and useState | 56kode
Complete guide to React's useState hook - from basics to advanced techniques. Learn state management, avoid common pitfalls, and optimize performance with practical examples for React developers.
000
Flavien (56kode) @56kode.bsky.social · 03/03/2025
🔍 Tech Watch #9 is out! Curated frontend insights: 👉Functional programming in React 👉React 19 new features (use hook & cache) 👉Permission systems & design patterns 👉Why Redux might be unnecessary 👉React performance guide Read more: open.substack.com/pub/56kode/p...
open.substack.com
Tech watch 9
A curated selection of articles for React frontend developers, focusing on architecture, performance, and best practices
020
Flavien (56kode) @56kode.bsky.social · 28/02/2025
🎯 100% test coverage... but 0% value! Perfectly covered code ✅ Results never verified ❌ Look at this image: a test that executes all code without testing anything. Coverage measures execution, not quality. What are you actually measuring in your team? #testing #js #vitest #jest
010
Flavien (56kode) @56kode.bsky.social · 24/02/2025
🚀New Level Up #React article! Master functional programming in React with practical examples. Learn how first-class functions, purity, immutability, currying and composition create more predictable and maintainable apps www.56kode.com/posts/level-... #reactjs
56kode.com
Level Up React: Functional programming in React | 56kode
Learn how functional programming principles power React development. This practical guide explores first-class functions, pure functions, immutability, currying and composition with clear examples. Di...
010
Flavien (56kode) @56kode.bsky.social · 21/02/2025
🔍 Tech Watch #8 is out! Curated frontend insights: 👉React hooks & patterns 👉ESLint CSS support 👉TypeScript type safety 👉Browser extensions 👉Clean JavaScript conditionals Read more: open.substack.com/pub/56kode/p... #react #js #ts #typescript #javascript
open.substack.com
Tech watch 8
A curated selection of articles for React frontend developers, focusing on architecture, performance, and best practices
000
Flavien (56kode) @56kode.bsky.social · 14/02/2025
🚫 Stop writing complex conditions in JavaScript! Name them properly, make them reusable, and your code will thank you later. Cleaner code is just a function away. ✨ #cleancode #js #javascript
010
Flavien (56kode) @56kode.bsky.social · 10/02/2025
📚 New Tech Watch is out! Dive into: - React & React DOM architecture deep dive - React Server Components insights - Browser main thread performance - JavaScript Temporal API preview - Clean code practices in React Read more 👇 open.substack.com/pub/56kode/p... #react #js
open.substack.com
Tech Watch 7
A curated selection of articles for React frontend developers, focusing on architecture, performance, and best practices
010
Reposted by Flavien (56kode)
Paris TypeScript @typescript.paris · 31/01/2025
🇬🇧 Hello TypeScripters 👋 Meet @lcas.dev, speaker at Paris TS la Conf’! 🎤 Luca is a developer and open-source enthusiast who loves #Rust, #TypeScript, and fast websites. He works at @deno.land, contributing to #Deno, Deno Deploy, JSR, and Fresh.
Luca Casonato at Paris TS la Conf'
1183
Flavien (56kode) @56kode.bsky.social · 31/01/2025
🚫 The danger of modifying native prototypes in #javascript Don't pollute the global scope! Create pure functions instead: - prevents conflicts - better performance - easier debugging Full article: dev.to/56_kode/avoi... #cleancode
010
Reposted by Flavien (56kode)
Ndeye Fatou Diop @ndeyefatoudiop.bsky.social · 30/01/2025
JavaScript Tip 💡 Use 𝚂𝚝𝚛𝚒𝚗𝚐.𝚙𝚛𝚘𝚝𝚘𝚝𝚢𝚙𝚎.𝚙𝚊𝚍𝚂𝚝𝚊𝚛𝚝() and 𝚙𝚊𝚍𝙴𝚗𝚍() to add padding for formatting output.
console.log('1'.padStart(2, '0')); 
// => "01"
console.log('FrontendJoy'.padEnd(13, '!')); 
// => "FrontendJoy!!"
021
Reposted by Flavien (56kode)
Seb ⚛️ ThisWeekInReact.com @sebastienlorber.com · 29/01/2025
This Week In React 219 ⚛️ - CRA deprecated - Next.js experimental flags - Remix - Tremor dashboards - SaaS Starter - Local-First - JSDom - 2n8 📱 - Windows/MacOS - Debugging - Shopify - Polygen - Reanimated - Audio API - SwiftUI - BottomTabs Read online / subscrb: thisweekinreact.com/newsletter/219
1618
Reposted by Flavien (56kode)
Ben McCann @benmccann.com · 26/01/2025
Typescript 5.8 is shipping a flag to disable enums! www.totaltypescript.com/erasable-syn...
totaltypescript.com
TypeScript 5.8 Ships --erasableSyntaxOnly To Disable Enums
TypeScript 5.8's new erasableSyntaxOnly flag enforces pure type annotations by disabling enums, namespaces, and parameter properties.
3739
Flavien (56kode) @56kode.bsky.social · 20/01/2025
🚀New Level Up #React article! Understand why React is split into two packages. Clear explanation of how react and react-dom work together to make your apps work on any platform 🎯 www.56kode.com/posts/level-... #reactjs
56kode.com
Level up React: React and React DOM architecture | 56kode
Discover why React is split into two packages. Learn how react and react-dom work together, their specific roles, and the benefits of this architecture. A clear explanation with practical examples.
000
Flavien (56kode) @56kode.bsky.social · 17/01/2025
🧹 Clean Code Tip: Avoid Mutations! Never modify your data directly - always create new copies. Mutations can lead to unpredictable bugs and make your code harder to debug. Learn more about handling immutable data properly: dev.to/56_kode/clea... #js #cleancode #javascript
000
Reposted by Flavien (56kode)
Seb ⚛️ ThisWeekInReact.com @sebastienlorber.com · 15/01/2025
This Week In React 217 ⚛️ - View Transitions - Server Components - Next.js - SWR - Nextra - React + Rails - React Router - Compiler 📱 - EAS Hosting - Shopify feedback - Skia - Gesture Handler - OTP - Radon Read and subscribe 👇 thisweekinreact.com/newsletter/217
0438
Reposted by Flavien (56kode)
valkoivo.bsky.social @valkoivo.bsky.social · 14/01/2025
Next-Generation Buttons: Implementing the Command Pattern through Web Components medium.com/koicom/next-...
medium.com
Next-Generation Buttons: Implementing the Command Pattern through Web Components
In this article, I will propose a solution on how to adapt buttons using Web Components and the Command pattern, opening new possibilities.
011
Flavien (56kode) @56kode.bsky.social · 13/01/2025
🚀New Level Up #React article! Dive into React Elements, the core building blocks of React. Learn their structure, how JSX becomes Elements, and understand the reconciliation process in depth. www.56kode.com/posts/level-... #reactjs
56kode.com
Level Up React : Deep Dive into React Elements | 56kode
Learn how React Elements work under the hood. Understand their structure, creation process, and the reconciliation mechanism. A comprehensive guide for React developers
010