Today I Learned

Short notes on full stack related topics.

Zustand Persistierung mit LocalStorage

#zustand
#state-management

Zustand kann den Zustand automatisch im localStorage speichern und wiederherstellen:

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(persist((set) => ({
  theme: 'light',
  toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}), {
  name: 'app-theme', // Key für LocalStorage
}));
JavaScript
UTF-8

Official Docs

Trigger.dev for Background Jobs

#trigger.dev
#jobs

Trigger.dev ermöglicht die einfache Erstellung und Verwaltung von Hintergrundjobs in JavaScript/TypeScript.

import { job } from '@trigger.dev/sdk';

job('Send Welcome Email', async (payload) => {
  await sendEmail(payload.email, 'Welcome to our platform!');
});
JavaScript
UTF-8

Official Docs

Trigger.dev Scheduled Jobs

#trigger.dev
#cron

Erstelle geplante Aufgaben mit Trigger.dev und einer CRON-ähnlichen Syntax:

import { job } from '@trigger.dev/sdk';

job('Daily Report', { schedule: '0 9 * * *' }, async () => {
  console.log('Sending daily report...');
});
JavaScript
UTF-8

Official Docs

Tailwind CSS Group Variants

#tailwindcss
#css

Tailwind’s group utility helps style nested elements conditionally based on the parent state.

<div class="group">
  <button class="bg-blue-500 group-hover:bg-blue-700">Hover Me</button>
</div>
HTML
UTF-8

This makes hover and focus styling straightforward.

Official Docs

Tailwind CSS !important modifier

#tailwindcss
#css

Make any utility important by adding a ! character to the beginning:

<p class="!font-medium font-bold">
  This will be medium even though bold comes later in the CSS.
</p>
HTML
UTF-8

Official Docs