The CodeKits notebook
Ideas into working code.
Practical tutorials, project walkthroughs and development notes. Explore the code, understand the structure, and build something of your own.
9 articles · Newest first
React
Create an animated offer badge in brand colours
Create a restrained branded offer badge with shared animation timing, stable layout and a static reduced-motion experience.
· 4 min read
React
Build a code preview with a project file tree
Build a small file explorer that shows safe code text, selected filenames and reliable copy feedback without pretending to be an IDE.
· 4 min read
React
Build a client-enquiry dashboard with filters
Turn client enquiries into a useful React work queue with status filters, clear empty states and server-authorized updates.
· 3 min read
React
Fix iPhone form auto-zoom with readable inputs
Build readable iPhone forms by checking computed font size and viewport behaviour, while preserving pinch zoom and accessible text scaling.
· 4 min read
React
Fix a mobile menu that jumps to the top
Keep a mobile menu from jumping the page: save scroll position, restore body styles, and test focus, long menus and React cleanup.
· 4 min read
React
Fix React videos that pause or restart
Diagnose React video interruptions by separating remounts, source changes and playback effects, while respecting a viewer's pause choice.
· 4 min read
React
Build mobile navigation with reachable links
Make long mobile navigation labels usable with wrapping, visible focus and scrollable menus, then test narrow screens and enlarged text.
· 4 min read
React
Show portrait app demos without cropping
Fit a portrait app demo into a responsive dialog with contain sizing, safe-area spacing, native controls and a clear mobile test checklist.
· 4 min read
React
Switch light and dark themes without a flash
Set a saved or system colour theme before first paint, keep browser controls in sync, and avoid hydration and reduced-motion pitfalls.
· 4 min read