React Finland is one of my favorite conferences. It was my second time and both times I felt good as a speaker. Talks were great: two days with big breaks to have enough time to talk to your friends. I liked the selection of talks: design systems, animation, architecture. The venue (a building with a tower on a photo above) was also good.
Create a sound document outline: start with h1 and don't skip levels.
Hide content correctly: display: none, visibility: hidden and hidden are hiding content from screen readers, use a combination of CSS properties that hides content only visually or VisuallyHidden component from Reach UI.
Use <button> if you need a button: they are focusable by default and support keyboard events.
Use fragments to avoid invalid HTML: <tr><div><td> → <tr><><td>.
Take care of focus management: can be a problem for modals, put focus inside a modal on open and don’t let it leave the modal.
Make notifications accessible to everyone: use role="alert" or role="status" to make screen readers announce notifications.
Announce page changes: on single page applications screen readers should read the page title on navigation. Check out Reach Router.
Refactoring only temporarily helps with technical debt.
Second system effect: the tendency of small, elegant, and successful systems to be succeeded by over-engineered, bloated systems because of inflated expectations and overconfidence.
“‘Legacy code’” often differs from its suggested alternative by actually working and scaling.” — Bjarne Stroustrup.
The real cost of software is not the initial development, but maintenance over time.
Architecture as enabling constraints: constraints about how we use data and code that help us move faster over time.
Shared dependencies: add them to the design system or copy-paste.
Decoupled code is better than DRY.
Three constraints you can use today for more resilient frontend architecture:
Source code dependencies must point inward: don’t depend on other team’s code.
Be conservative about code reuse: avoid coupling code that diverges over time.
Enforce your boundaries: don’t let people depend on your code (with dependency-cruiser).
