https://github.com/synvox/remix-meetup-september-2023

https://github.com/synvox/remix-meetup-september-2023

Last synced: 26 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/synvox/remix-meetup-september-2023
• Owner: Synvox
• Created: 2023-09-07T22:24:27.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-14T23:19:01.000Z (over 1 year ago)
• Last Synced: 2024-10-16T01:12:27.918Z (2 months ago)
• Language: TypeScript
• Size: 186 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# September 2023 Remix Meetup

## Demo Points

1. Routes

- Show the 4 `_app` routes

- Show the pathless route

- Show how `` works

- Show how `` works with relative paths

2. Forms

- Show the message form with and without JavaScript enabled

- Show the new thread form with and without JavaScript enabled

- Show how buttons can have names and values

- Show how useFetcher works with forms vs ``

3. Actions

- Show how you can use CTEs to update multiple tables without a transaction

- Show how you can create getters that look at `DataFunctionArgs`

4. useState and useEffect

- Show that a relatively complex app doesn't need much client side state

5. Live updates using EventSource

- Show how resource routes can be used to create a live feed

- Show how you can use revalidator to validate data on the client

6. Mobile friendly

- Show how the app works on mobile

- Show how you can use scroll snapping to create panels and named anchors to navigate to them

  - Show how this also helps with accessibility

7. shouldRevalidate

- Show how you can force a layout route to revalidate if you're doing something weird for a good reason (like updating a read record)

8. FTS Search

- Show how you can use FTS to search for messages with highlighting

9. Sticky list headers

- Show how you can use `position: sticky` to create sticky list headers

- Show how you can group items to make the list header push away when scrolling

10. Theming

- Show how you can use CSS variables to theme an app

- Show how the new rgb function can be used with css variables to create shades

11. ClassNames and Variants

- Show how you can build a component library with ClassNames and Variants