home

/

writing
watchQuery to save the day

watchQuery to save the day

27 May 24

In this blog post, the author delves into the implementation of Apollo GraphQL's `watchQuery()` to overcome skeleton loading across route navigation in a device management portal. They compare the currently implemented `useQuery()` method, which lacks caching and incurs loading delays, with the experimental `watchQuery()` approach that subscribes to cached data for faster interaction. The post outlines the pros and cons of `watchQuery()` implementation, discusses challenges like managing dependencies in `useEffect()`, and shares insights on stabilizing data sorting to reduce layout shifts in the user interface.

next.js app server improvements

next.js app server improvements

15 May 24

This post discusses significant improvements made to the Trinity website by changing how data fetching for blog posts and filtering of the data based on tags is done. Previously, data fetching was done inside a React Server Component (rsc) using URL slugs, which was slow. Now, data fetching is done in page.tsx, and data is passed as props, resulting in improvements. The changes involve calling getStoryData() once in page.tsx and using cached server data for subsequent calls, minimizing data fetching. Additional optimizations include prefetching and prioritizing certain links and images, reducing load time by roughly 75%. More investigation is needed, as Lighthouse scores do not reflect the improvements.

notion as a blog post provider

notion as a blog post provider

21 Mar 24

Notion is used as a blog post creator/provider, leveraging react-notion-x for seamless integration with NextJS, offering real-time updates, auth handling, and efficient data storage in Supabase for optimal SEO with server-rendered metadata.

revamping our mobile experience

revamping our mobile experience

15 Feb 23

Revamping mobile app experience by optimizing screen space, reducing redundancy, following design principles like spacing consistency and visual hierarchy. Key changes: streamlined header, consolidated property info, expandable cards for actions, bottom navigation with icons, and better information architecture overall for improved usability.

device management unit interaction page redesign

device management unit interaction page redesign

31 Oct 22

Redesigning the device management unit interaction page to optimize information architecture and visual hierarchy. Key changes: card/chip layout with heading text, icons, and descriptions to convey state quickly. Modular design for future expansions. Careful consideration of spacing, colors, editing UX. Ultimately, moving important info to the right for easy scanning, and separating main components side-by-side for reduced cognitive load following natural reading patterns. User testing validating initial design decisions after implementation.