Daily dose of frontend news around react ecosystem that will make you learn today’s modern frontend stack a little more everyday.
- Tweets121
- Following28
- Followers7
- Likes133
ALT Screenshot of the website
ALT function Note({id}) { // This fetches a note asynchronously const note = use(fetchNote(id)); return ( <div> <h1>{note.title}</h1> <section>{note.body}</section> </div> ); }
ALT // Avoid making a property optional to support two separate scenarios. // Doing so redunces type safety. type User = { // Making id optional since unsaved users don't have an id yet. 👎 id?: number; name: string; email: string; } // Instead, declare separate types. Then each scenario is fully type safe. 👍 type User = { id: number; name: string; email: string; } // Separate type for unsaved users. // Deriving from the User type via Omit to keep types clean and lean. type UnsavedUser = Omit<User, "id">;
ALT Screenshot of the Playwright releases page with the following text: Locators With these new APIs, inspired by Testing Library, writing locators is a joy: * page.getByText(text, options) to locate by text content. * page.getByRole(role, options) to locate by ARIA role, ARIA attributes and accessible name. * page.getByLabel(label, options) to locate a form control by associated label's text. * page.getByPlaceholder(placeholder, options) to locate an input by placeholder. * page.getByAltText(altText, options) to locate an element, usually image, by its text alternative. * page.getByTitle(title, options) to locate an element by its title. await page.getByLabel('User Name').fill('John'); await page.getByLabel('Password').fill('secret-password'); await page.getByRole('button', { name: 'Sign in' }).click(); await expect(page.getByText('Welcome, John!')).toBeVisible();
