Notes on Tech

1. Next.js, Prisma, and Supabase

Set up Environment Variables

Remember to configure both DIRECT_URL and DATABASE_URL for proper database connections.

2. Web Development Tips

Event Listeners

Avoid document-wide listeners:

Example: Setting a wrong expectation to collapse a side drawer could lead to performance issues.

onMouseDown vs. onClick:

onMouseDown is triggered earlier than onClick.

If you attempt to stop event propagation from onMouseDown to onClick, it will fail.

State Management

Avoid unnecessary setState:

If a default value suffices, don't use setState unnecessarily.

CSS Techniques

Use pointer-events-none:

This allows clicks to pass through high z-index elements to interact with elements underneath.

Router Behavior

router.push does not ensure updated states:

Use window.location.href to hard reload a page and ensure the latest data is retrieved.

Component Design

Stateful components:

A component should manage state if:

  • It is the top parent of a URL path.
  • It needs to generate a table.

3. Debugging Tips

  • Bug fixes for false values: If a component cannot accept false and yields errors, separate that component into its own file and export it.
  • Empty arrays are not false: Use array.length === 0 to check if an array is empty.
  • Accessing Axios response data: Use response.data to extract response data.
  • Compare times correctly: Use getTime() before comparing two time objects.

4. Tailwind CSS

Dynamic Tailwind Classes

Classes like w-[${variable}px] are not picked up in production builds.

Use the style attribute for dynamic styling.

5. React Tips

  • Prevent Infinite Loops: Avoid using setState inside useEffect without a dependency array to prevent infinite loops.
  • React Table Functions: Functions defined in column definitions cannot access the current state, which can lead to unexpected behaviors.
  • Handling Overlapping Events: Replace onClick with onMouseDown for interactions where onBlur and onClick overlap (e.g., clicking on a list item while leaving another element).

6. Time Management

Dealing with timezones
  • Creating a DateTime object using new Date("...") adjusts to UTC.
  • getDate and similar methods return the local timezone value.
  • Remember, servers don't inherently know a user's timezone.

7. Useful Libraries

React Libraries:

  • react-beautiful-dnd: Drag-and-drop functionality.
  • cookie-next: Cookie management.
  • react-copy-to-clipboard: Copy-paste functionality.
  • react-icons: Icon library.
  • react-timeago: Display time in "ago" format.
  • next-auth: Authentication.
  • bcrypt: Encryption.
  • prisma: ORM.

For Map-Based Apps:

  • leaflet.js: Canvas, polygon, latitude, longitude.
  • react-google-autocomplete: Place suggestions with built-in debouncing.

Detecting Outside Clicks:

Use the DOM contains method to check if a click event occurs within a container.

8. Miscellaneous Tips

  • Handling State and Events Together: Be mindful of overlapping event behaviors like onBlur triggering before onClick.
  • Debugging React Table: Ensure state-dependent functions in column definitions are correctly designed to avoid confusion.