React Finland 2019
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.
MobX — The Journey by Michel Weststrate
- If you can’t sell the library, sell the problem.
- “MobX […] tries to enable you to go home early each day.”
- Always keep learning: stay slightly out of your comfort zone.
- Open source good parts: learning, happy users, core contributors, beautiful conferences, awesome people, video tutorials, workshops, book, getting a raise, seeing others succeed.
- Open source bad parts: making your library work with all other libraries, no holidays, now you have two jobs.
- When filing issues, remember: you are asking for free help on something you are being paid for.
- Guard your heart and live a balanced life.
Append-only development with React: An intro to Behavioral programming by Luca Matteis
- “Programming language are practically irrelevant in making products.”
- Code maintenance is the root of the problem.
- Make changes without having to read and maintain the code.
- Newly added code can change how old code is executed.
Mind-Reading with Adaptive and Intelligent UIs in React by David Khourshid
- Adapt to people, not just devices.
- Microsoft Clippy is the first adaptive UI.
- A/B tests are ineffective.
- Collect stats on state changes and optimize flows.
A Common Design Language. Let Designers and Developers talk to each other by Andrey Okonetchnikov
- Design: typography, color and spacing.
- Developers talk in code.
- Designers talk in UI primitives.
- Design tools talk in shapes, like arrow and triangles.
- Common language: UI primitives.
- component-driven.io: component-driven design & development for the modern web.
A practical guide to building your design system infrastructure by Varya Stepanova
- Design system is shared practices, tools, processes and community.
- Living style guides: React Styleguidist, Storybook.
- Visual regression tests.
- Uses Styleguidist to document plain HTML components.
- Reactify HTML:
- Design system site: single source of truth.
- Automate everything.
- Welcome contributions: edit on GitHub button, list of contributors.
- Blogging with WordPress as a backend and Gatsby.
12 8 Tips for More Accessible React Apps by Manuel Matuzovic
- Create a sound document outline: start with
h1and don’t skip levels.
- Hide content correctly:
hiddenare hiding content from screen readers, use a combination of CSS properties that hides content only visually or VisuallyHidden component from Reach UI.
<button>if you need a button: they are focusable by default and support keyboard events.
- Use fragments to avoid invalid HTML:
- 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="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.
- Test your React code automatically: use React-Axe and eslint-plugin-jsx-a11y.
Delightful UI animations by understanding the brain by Bruno Lourenço
Animation —an illusion of movement.
- React Morph: morphing UI transitions.
- Creates a clone of an element and uses FLIP technique to do the morphing animation.
Custom CSS is the path to inconsistent UI by Artem Sapegin
- We use custom styles mostly for typography, whitespace and layout.
- This leads to inconsistent UI because CSS is too expressive.
- Design tokens are the first step to achieve UI consistency.
- But not all combinations of design tokens are good: you may create unreadable text for example.
- UI primitives (primitive components) is the solution.
- Text and Heading components to render all text in an application.
- Box, Flex and Grid (Stack) components to define whitespace and layouts.
- Use styled-system to create such components: works with any CSS in JS library.
Creating layouts that last by Artem Zakharchenko
- Spacing is important to build maintainable layout.
- Defining margins and padding directly on components isn’t the most maintainable way.
- Atomic layout is a library to create declarative layouts with CSS Grid.
- Define layout areas as a string template.
- Responsive props.
- Render areas using a render prop.
Scalable (Design) Systems with TypeScript by Tejas Kumar
- TypeScript is a good choice for design systems: enforces contracts, confidence to make changes, allows you to scale.
- Uses React Styleguidist and TypeScript for their design system.
- Hacked Styleguidist to use TypeScript and Monaco editor in component examples.
Building resilient frontend architecture by Monica Lent
- 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).
“Intuitive” Tooling by Carolyn Stransky
- Hard to learn things: TypeScript, Redux, GraphQL, Gatsby, Flexbox.
- “We mistake familiarity for
simplicity” —Jim Fisher.
- Spiral of silence.
- Empathy matters more in education.
- Start an internal mentorship program.
- Ban words like “easy” from your vocabulary.
- Just because you understand something doesn’t mean that someone else will too.