Log in
Meta open-sourced React over a decade ago to help developers build better user experiences. Since then, React has grown into one of the world’s most popular open source projects, powering over 50 million websites and products built by companies such as Microsoft, Shopify, Bloomberg, Discord, Coinbase, the NFL, and many others. With React Native, React has expanded to support platforms beyond the web, including mobile, tablets, desktops, TVs, gaming consoles, and even mixed reality devices.
This incredible growth is thanks to the thousands of educators, companies, and projects that have contributed to the development of React. The community is the heart of React, and we’re proud to play a part in the cycle of open source innovation throughout the ecosystem that benefits everyone. We’re pleased to give a seat at the table to the people and companies that have made React what it is today.
Today, we are excited to announce the next step for React. Several projects within the React ecosystem, including React and React Native, as well as supporting projects such as JSX, will transition to the React Foundation. The React Foundation’s mission is to help the React community and its members. The React Foundation will maintain React’s infrastructure, organize React Conf, and create initiatives to support the React ecosystem. The React Foundation will be part of the Linux Foundation, which has long fostered a vendor-neutral environment for open source projects.
Formalizing Governance
The React Foundation’s governing board will consist of representatives from Amazon, Callstack, Expo, Meta, Microsoft, Software Mansion, and Vercel, with the intention to expand further over time.
There will be a clear separation between the business and technical governance of React. Releases, features, and technical direction will be governed by a new structure driven by the maintainers and contributors of React. This new technical governance structure will be independent of the React Foundation. The React team is actively working on this new technical governance structure and will share more details in a future post on the React blog.
Meta and the React Foundation
Meta is committing to a five-year partnership with the React Foundation, including over $3 million in funding and dedicated engineering support. This investment will ensure React’s smooth transition to independent governance while maintaining the stability and innovation the community expects. Meta will continue to invest in React and use it as our primary tool for building UI on the web and across many of Meta’s apps. Meta will also continue to have a dedicated team of engineers working full-time on React and React Native.
We believe the best of React is yet to come. The React Foundation will unlock new opportunities for collaboration, innovation, and growth that will benefit the entire ecosystem. We’re excited to see what the community will build together under this new model. With strengthened governance, broader industry participation, and continued technical excellence, React is positioned to tackle the next generation of challenges in UI development.
The post Introducing the React Foundation: The New Home for React & React Native appeared first on Engineering at Meta.
When referring to the user’s stuff, which is better out of these:
- “My account” or “Your account”?
- “My orders” or “Your orders”?
- “My cases” or “Your cases”?
It’s a trick question because often you don’t need any prefix and can just use:
- Account
- Orders
- Cases
Amazon is a good example of this in action because it’s obvious that it’s your account and your orders:
But what if your product contains things that belong to you and to others – for example, a case working system that contains your cases and everyone else‘s?
The problem with “my”
You could use “My cases” in a navigation menu like this:
This seems fine on the face of it.
But screens are not only accessed or referred to through a menu.
For example, you might need to sign post users to their cases in an onboarding flow, email notification or help article.
Saying something like “Go to my cases” is awkward and unnatural – if I told you to go to my cases, you’d think I was telling you to go to my cases, not yours.
Similarly, a support agent might tell you to “Go to your cases” over webchat or a phone call. This is confusing if the UI says “My cases”.
These issues just don’t come up when you use “your” – I’ve used this approach in multiple products over the years, and seen exactly zero issues in user research.
So that’s good.
“But what if the user is communicating to us using radio buttons, for example?”
This is easy if we look at an example:
This doesn’t make sense because it sounds like you’re instructing the computer to share their profile, not yours.
But it’s clear if you use “my”:
In summary:
- Use “your” when communicating to the user
- Use “my” when the user is communicating to us
If you’d like to design forms that nail basic details like this, as well as complex problems found in enterprise systems, you might like my course, Form Design Mastery:
This is a collection of classless css themes to use as starting points in web development.
How do I get this theme?
Paste into your website's <head> this snippet.
See this same page in a different classless theme
- HTML only
- awsm.css
- bahunya
- bamboo
- bootstrap
- evenbettermotherfucking
- holiday.css
- kacit
- marx
- meyer
- minicss
- no-class
- pico.css
- sakura
- sakura-vader
- simple.css
- stylize.css
- tacit
- thebestmotherfucking
- tufte
- vanillacss
- w3c-chocolate
- w3c-traditional
- water.css-dark
- water.css-light
- writ
- yorha
Why use classless themes?
- Responsive
- Good browser support
- Beautiful
- Small size (< a few kb) - you don't waste bytes on every widget imaginable
- No learning curve - use HTML as you would normally instead of going to the docs to learn which class does what and having to fight the framework otherwise.
- Original Hacker News Thread
Is it responsive?
Heck yeah! It doesn't include any fancy styles so it's easily mobile responsive. Just add the famous responsive viewport tag and you'll be good to go!
In fact, try resizing this page. Everything flows super nicely as you'll see.
Element demos
This is supposed to be a demo page so we need more elements!
Form elements
Code
Below is some code, you can copy it with Ctrl-C.
Did you know, alert(1) can show an alert in JavaScript!
// This logs a message to the console
console.log('Hello, world!')Other
Here's a horizontal rule and image because I don't know where else to put them.
This is a or a more formal
This is a blockquote
Good old preformatted text, no code at all
|\_/| **************************** (\_/)
/ @ @ \ * "Purrrfectly pleasant" * (='.'=)
( > º < ) * Poppy Prinz * (")_(")
`>>x<<´ * (<a href="mailto:pprinz@example.com">pprinz@example.com</a>) *
/ O \ ****************************
And here's a nicely marked up table!
| Name | Quantity | Price |
|---|---|---|
| Godzilla | 2 | $299.99 |
| Mozilla | 10 | $100,000.00 |
| Quesadilla | 1 | $2.22 |
Typography
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. This is strong, this is normal, this is just bold, and this is emphasized! And heck, here's a link.
"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using theciteattribute, while a text representation of the source can be given using the<cite>cite element."
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
Links with mailto:, tel:, sms: addresses might be styled...
Heading 1
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 2
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 3
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 4
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 5
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Heading 6
A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
