diff --git a/README.md b/README.md
index 671678a..dc741e8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# locale-hu-HU
-This repo contains the Hungarian language files for the State of JS/CSS/etc. surveys, which serve as a base to translate all the other languages. You can view a list of [all the locales repos here](https://github.com/StateOfJS/?q=locale-&type=&language=&sort=).
+This repo contains the Hungarian language files for the State of JS/CSS/HTML/etc. surveys, which serve as a base to translate all the other languages. You can view a list of [all the locales repos here](https://github.com/orgs/Devographics/repositories?q=locale-&type=all&language=&sort=name).
## How To Help
@@ -14,13 +14,13 @@ I will then give you maintainer rights over a repo containing all the translatio
You can either browse the survey-taking app, survey results site, etc. and find untranslated strings this way, or else use our API to get extra data such as the completion percentage for a locale or a list of all the untranslated strings:
-- https://graphiql.stateofjs.com/
+- https://graphiql.devographics.com/
Here is a sample query:
```graphql
query GetLocaleData {
- locale(localeId: "ru-RU") {
+ locale(localeId: ru_RU) {
completion
totalCount
translatedCount
@@ -32,9 +32,11 @@ query GetLocaleData {
#### 3. Getting Credit
-Every translator will be credited on any site that makes use of the translations, starting with the survey-taking app. While this will eventually be automated via the GitHub API, for now you can add your name here:
+Every translator will be credited on any site that makes use of the translations, starting with the survey-taking app. In order to receive credit, add your GitHub username to the `translators` array in each locale's `config.yml` file.
-- https://github.com/StateOfJS/Monorepo/blob/main/api/src/data/locales.yml
+Here is an example for the `de-DE` locale:
+
+- https://github.com/Devographics/locale-de-DE/blob/main/config.yml#L3
#### 4. Pushing Your Changes Live
@@ -72,7 +74,7 @@ These strings appear in both.
## Joining Translation Teams
-It's recommended you join the [translation team](https://github.com/orgs/StateOfJS/teams/translators/teams) for the language you want to translate.
+It's recommended you join the [translation team](https://github.com/orgs/Devographics/teams/translators/teams) for the language you want to translate.
## Local Development
diff --git a/accounts.yml b/accounts.yml
index 6764571..53f0bb0 100644
--- a/accounts.yml
+++ b/accounts.yml
@@ -77,3 +77,9 @@ translations:
Amennyiben kérdésed van adataid kezelésével kapcsolatban, esetleg adataid
rendszerünkből való törlését szeretnéd kérni,
kérünk lépj kapcsolatba.
+
+ - key: accounts.token_verified
+ t: Token verification successful, redirecting…
+
+ - key: accounts.your_surveys
+ t: Your Surveys
diff --git a/common.yml b/common.yml
index cc067d8..1f07758 100644
--- a/common.yml
+++ b/common.yml
@@ -34,6 +34,8 @@ translations:
Új munkamenet indításához, vagy korábbi munkamenet folytatásához térj vissza a felmérés kezdőlapjára.
- key: general.take_survey
t: A {name} {year} felmérés kitöltése
+ - key: options.na
+ t: 🚫 None
# surveys
- key: general.open_surveys
@@ -52,8 +54,16 @@ translations:
t: Felmérés kezdése »
- key: general.continue_survey
t: Felmérés folytatása »
+ - key: general.completion
+ t: "{completion}% completed"
+ - key: general.started_on
+ t: Started on {createdAt}
+ - key: general.last_modified_on
+ t: Last modified on {updatedAt}
- key: general.review_survey
t: Felmérés ellenőrzése »
+ - key: general.review_answers
+ t: Review Answers »
- key: general.preview_survey
t: Felmérés előnézete »
- key: general.finish_survey
@@ -64,6 +74,8 @@ translations:
t: Előző rész
- key: general.survey_closed
t: Ez a felmérés lezárult.
+ - key: general.survey_closed_on
+ t: This survey closed on {endedAt}.
- key: general.survey_results
t: Felmérési eredmények megtekintése »
- key: general.surveys_available_languages
@@ -78,10 +90,16 @@ translations:
t: Ebben az évben újonnan hozzáadva
- key: general.new
t: Új
+ - key: general.devographics_banner
+ t: Devographics is the new name of the collective running the State of JavaScript, CSS, and GraphQL surveys.
# credits
- key: credits.thanks
t: Külön köszönet
+ - key: credits.contributors
+ t: Contributors
+ - key: credits.contributors.description
+ t: Special thanks to the following people for helping us design the survey.
- key: credits.accessibility
t: Akadálymentesítési tanácsadó
- key: credits.survey_design
@@ -98,6 +116,8 @@ translations:
t: Kód refaktorálás
- key: credits.data_processing
t: Adatfeldolgozás
+ - key: credits.back_end_development
+ t: Back-End Developement
# support
- key: general.support_from
@@ -108,6 +128,8 @@ translations:
t: Adatvédelmi szabályzat
- key: general.leave_issue
t: Kérdésed van? Hibát találtál? Lépj velünk kapcsolatba.
+ - key: general.leave_issue2
+ aliasFor: homepage.leave_issue
- key: general.emoji_icons
t: Emotikonok az Icons8-ról.
@@ -139,15 +161,35 @@ translations:
A felmérés megosztásával nagyban segítheted munkánkat. Minden kitöltés segít abban,
hogy reprezentatívabb képet kapjunk:
+ - key: general.thanks1
+ t: >
+ Thanks for filling out the survey! Your data is saved.
+ - key: general.thanks2
+ t: >
+ Help us get the word out by sharing this survey! Every bit counts, and it'll help make our data even
+ more representative.
- key: thanks.learn_more_about
t: "Néhány funkció, melyről lehet, hogy többet szeretnél tudni:"
- key: thanks.knowledge_score
t: Tudáspontszám (Knowledge Score)
- - key: thanks.score_explanation
+ - key: thanks.features_score
+ t: Features Score
+ - key: thanks.quiz_score
+ t: Quiz Score
+ - key: thanks.score_statistics
t: >
A felmérésben említett {total} funkciókból {known} az amiről hallottál,
ez azt jelenti, hogy az összes kitöltők közül a felső {knowledgeRankingFromTop}%-ban vagy.
+ - key: thanks.score_statistics_noranking
+ t: >
+ Of the {total} features mentioned in the survey,
+ - key: thanks.points
+ t: >
+ pts.
+ - key: thanks.score_awareness_explanation
+ t: >
+ For fairness, this percentage is calculated over only the {awareness_total} features you could express you knew
- key: thanks.share_on_twitter
t: Megosztás Twitteren
- key: thanks.share_score_message
@@ -166,8 +208,14 @@ translations:
t: Opció kiválasztása
- key: forms.clear_field
t: Kérdés törlése
-
- # partners
+ - key: forms.more_options
+ t: Show more…
+ - key: forms.less_options
+ t: Show less
+
+ # partners & sponsors
+ - key: sponsors.with_support_from
+ t: With Special Support From
- key: sponsors.our_partners
t: Partnereink
- key: sponsors.become_partner
@@ -186,6 +234,17 @@ translations:
t: Nyomd le az option/alt billentyűt, a fordító mód bekapcsolásához.
- key: general.charts_nivo
t: Diagramjainkat Nivo-val készítettük.
+ - key: general.made_by_devographics
+ t: Made by Devographics
+ - key: general.view_code_example
+ t: View Code Example
+ - key: general.feature_code_example
+ t: "**{featureName}** Code Example"
+ - key: general.code_example
+ t: Code Example
+ - key: general.language_code
+ t: |
+ {language} Code
###########################################################################
# Nav
@@ -224,14 +283,32 @@ translations:
t: További eszközök
- key: sections.other_tools.description
t: Válaszd ki azokat az eszközöket, technológiákat, melyeket rendszeresen használsz.
+ - key: section.tools_others.title
+ aliasFor: section.other_tools.title
+ - key: section.tools_others.description
+ aliasFor: section.other_tools.description
- key: sections.report.title
t: Trend jelentés
+ - key: sections.usage.title
+ t: Usage
+
+ - key: sections.finish.title
+ t: Finish Survey
+
+ - key: sections.finish.description
+ t: Finish the survey
###########################################################################
# Options
###########################################################################
+ # other answer
+ - key: options.other
+ t: Other…
+ - key: options.other.placeholder
+ t: Other items not mentioned above, comma-separated
+
# features
- key: options.features.never_heard
t: 🤷 Nem hallottam még róla/Nem vagyok benne biztos, hogy ez mi
@@ -239,6 +316,29 @@ translations:
t: ✅ Ismerem, de még nem használtam
- key: options.features.used
t: 👍 Már használtam
+ # features v2
+ - key: options.features2.never_heard
+ t: Never heard of it/Not sure what it is
+ - key: options.features2.interested
+ t: |
+ Heard of it » Interested
+ - key: options.features2.not_interested
+ t: |
+ Heard of it » Not interested
+ - key: options.features2.used_positive
+ t: |
+ Used it » Positive experience
+ - key: options.features2.used_negative
+ t: |
+ Used it » Negative experience
+
+ # features (short)
+ - key: options.features.never_heard.short
+ t: 🤷 Never heard of it
+ - key: options.features.heard.short
+ t: 👀 Heard of it
+ - key: options.features.used.short
+ t: 🤓 Used it
# features (no emoji)
- key: options.features.never_heard.label
@@ -248,13 +348,13 @@ translations:
- key: options.features.used.label
t: Már használtam
- # features (short versions)
- - key: options.features.never_heard.short
- t: Nem hallottam még róla
- - key: options.features.heard.short
- t: Tudok róla
- - key: options.features.used.short
- t: Már használtam
+ # features (no emoji, short versions)
+ - key: options.features.never_heard.label.short
+ t: Never heard of it
+ - key: options.features.heard.label.short
+ t: Heard of it
+ - key: options.features.used.label.short
+ t: Used it
# patterns
- key: options.patterns.use_never
@@ -405,6 +505,8 @@ translations:
t: ">20 év"
# company size
+ - key: options.company_size.na
+ t: 🚫 Not Applicable
- key: options.company_size.range_1
t: Egy alkalmazott
- key: options.company_size.range_1_5
@@ -423,6 +525,8 @@ translations:
t: Több, mint 1000 alkalmazott
# company size (short versions)
+ - key: options.company_size.na.short
+ t: N/A
- key: options.company_size.range_1.short
t: 1
- key: options.company_size.range_1_5.short
@@ -441,6 +545,8 @@ translations:
t: ">1000"
# salary
+ - key: options.yearly_salary.na
+ t: 🚫 Not Applicable
- key: options.yearly_salary.range_work_for_free
t: Ingyen dolgozom
- key: options.yearly_salary.range_0_10
@@ -457,6 +563,8 @@ translations:
t: Több, mint $200k
# salary (short versions)
+ - key: options.yearly_salary.na.short
+ t: N/A
- key: options.yearly_salary.range_work_for_free.short
t: $0
- key: options.yearly_salary.range_0_10.short
@@ -595,6 +703,19 @@ translations:
- key: options.race_ethnicity.not_listed
t: Nincs felsorolva
+ - key: options.race_ethnicity.european
+ t: European
+ - key: options.race_ethnicity.indian
+ t: Indian
+ - key: options.race_ethnicity.human
+ t: Human
+ - key: options.race_ethnicity.slav
+ t: Slav
+ - key: options.race_ethnicity.north_african
+ t: North African
+ - key: options.race_ethnicity.jewish
+ t: Jewish
+
# Race & Ethnicity (short)
- key: options.race_ethnicity.white_european.short
@@ -621,6 +742,8 @@ translations:
t: Nincs felsorolva
# Disability Status
+ - key: options.disability_status.na
+ t: 🚫 None
- key: options.disability_status.visual_impairments
t: >
Látási nehézségek (mint a vakság, színvakság, stb.)
@@ -707,6 +830,8 @@ translations:
t: Konzultáció és szolgáltatások
- key: options.industry_sector.travel
t: Utazás
+ - key: options.industry_sector.tourism
+ t: Tourism
- key: options.industry_sector.insurance
t: Biztosítás
- key: options.industry_sector.logistics
@@ -732,6 +857,39 @@ translations:
- key: options.industry_sector.manufacturing
t: Gyártás
+ - key: options.industry_sector.tech_it
+ t: Tech & IT
+ - key: options.industry_sector.human_resources
+ t: Human Resources
+ - key: options.industry_sector.sports
+ t: Sports
+ - key: options.industry_sector.gaming
+ t: Gaming
+ - key: options.industry_sector.research
+ t: Research
+ - key: options.industry_sector.law
+ t: Law
+ - key: options.industry_sector.non_profit
+ t: Non-Profit
+ - key: options.industry_sector.art
+ t: Art
+ - key: options.industry_sector.crypto
+ t: Crypto
+ - key: options.industry_sector.aerospace
+ t: Aerospace
+ - key: options.industry_sector.web3
+ t: Web3
+ - key: options.industry_sector.iot
+ t: IOT
+ - key: options.industry_sector.gambling
+ t: Gambling
+ - key: options.industry_sector.blockchain
+ t: Blockchain
+ - key: options.industry_sector.design
+ t: Design
+ - key: options.industry_sector.unemployed
+ t: Unemployed
+
# tool evaluation
- key: options.tool_evaluation.learning_curve_documentation
t: Dokumentáció
@@ -787,6 +945,8 @@ translations:
t: ARIA HTML attribútumok
# learning methods
+ - key: options.first_steps.na
+ t: 🚫 None
- key: options.first_steps.books
t: Könyvek
- key: options.first_steps.videos
@@ -808,6 +968,65 @@ translations:
- key: options.first_steps.mentoring
t: Mentorálás
+ - key: options.first_steps.documentation
+ t: Documentation
+ - key: options.first_steps.blogs
+ t: Blogs
+ - key: options.first_steps.view_source
+ t: View Source
+ - key: options.first_steps.trial_and_error
+ t: Trial & Error
+ - key: options.first_steps.forums
+ t: Forums
+ - key: options.first_steps.newsletters
+ t: Newsletters
+ - key: options.first_steps.events
+ t: Events
+
+ # learning methods
+
+ - key: resources.learning_methods
+ t: Learning Methods
+
+ - key: options.learning_methods.na
+ aliasFor: options.first_steps.na
+ - key: options.learning_methods.books
+ aliasFor: options.first_steps.books
+ - key: options.learning_methods.videos
+ aliasFor: options.first_steps.videos
+ - key: options.learning_methods.school
+ aliasFor: options.first_steps.school
+ - key: options.learning_methods.courses_free
+ aliasFor: options.first_steps.courses_free
+ - key: options.learning_methods.courses_paid
+ aliasFor: options.first_steps.courses_paid
+ - key: options.learning_methods.podcasts
+ aliasFor: options.first_steps.podcasts
+ - key: options.learning_methods.bootcamp
+ aliasFor: options.first_steps.bootcamp
+ - key: options.learning_methods.on_the_job
+ aliasFor: options.first_steps.on_the_job
+ - key: options.learning_methods.self_directed
+ aliasFor: options.first_steps.self_directed
+ - key: options.learning_methods.mentoring
+ aliasFor: options.first_steps.mentoring
+ - key: options.learning_methods.documentation
+ aliasFor: options.first_steps.documentation
+ - key: options.learning_methods.blogs
+ aliasFor: options.first_steps.blogs
+ - key: options.learning_methods.view_source
+ aliasFor: options.first_steps.view_source
+ - key: options.learning_methods.documentation
+ aliasFor: options.first_steps.documentation
+ - key: options.learning_methods.trial_and_error
+ aliasFor: options.first_steps.trial_and_error
+ - key: options.learning_methods.forums
+ aliasFor: options.first_steps.forums
+ - key: options.learning_methods.newsletters
+ aliasFor: options.first_steps.newsletters
+ - key: options.learning_methods.events
+ aliasFor: options.first_steps.events
+
# degree
- key: options.higher_education_degree.no_degree
t: Nem
@@ -824,6 +1043,22 @@ translations:
- key: options.higher_education_degree.yes_unrelated.short
t: Igen, másik területen
+ # employment_status
+ - key: options.employment_status.full_time
+ t: Full-time
+ - key: options.employment_status.student
+ t: Student
+ - key: options.employment_status.self_employed
+ t: Self-employed
+ - key: options.employment_status.contractor
+ t: Contractor
+ - key: options.employment_status.part_time
+ t: Part-time
+ - key: options.employment_status.between_jobs
+ t: Between jobs
+ - key: options.employment_status.retired
+ t: Retired
+
# bracket
- key: options.bracket.round1
t: Az 1. kör nyertesei
@@ -834,6 +1069,107 @@ translations:
- key: options.bracket.combined
t: Összesítés
+ # email_temporary (receive updates?)
+ - key: options.receive_notifications.yes
+ t: Yes, email me when the survey results are published
+
+ # usage type
+
+ - key: usage.usage_type
+ t: Usage Type
+
+ - key: options.usage_type.professionally
+ t: Professionally
+ - key: options.usage_type.student
+ t: As a student
+ - key: options.usage_type.hobby
+ t: As a hobby
+
+ - key: options.percentage_segments.range_0_10
+ t: 0-10%
+ - key: options.percentage_segments.range_11_20
+ t: 11-20%
+ - key: options.percentage_segments.range_21_30
+ t: 21-30%
+ - key: options.percentage_segments.range_31_40
+ t: 31-40%
+ - key: options.percentage_segments.range_41_50
+ t: 41-50%
+ - key: options.percentage_segments.range_51_60
+ t: 51-60%
+ - key: options.percentage_segments.range_61_70
+ t: 61-70%
+ - key: options.percentage_segments.range_71_80
+ t: 71-80%
+ - key: options.percentage_segments.range_81_90
+ t: 81-90%
+ - key: options.percentage_segments.range_91_100
+ t: 91-100%
+
+ - key: options.completion_stats.range_0_10
+ aliasFor: options.percentage_segments.range_0_10
+ - key: options.completion_stats.range_11_20
+ aliasFor: options.percentage_segments.range_11_20
+ - key: options.completion_stats.range_21_30
+ aliasFor: options.percentage_segments.range_21_30
+ - key: options.completion_stats.range_31_40
+ aliasFor: options.percentage_segments.range_31_40
+ - key: options.completion_stats.range_41_50
+ aliasFor: options.percentage_segments.range_41_50
+ - key: options.completion_stats.range_51_60
+ aliasFor: options.percentage_segments.range_51_60
+ - key: options.completion_stats.range_61_70
+ aliasFor: options.percentage_segments.range_61_70
+ - key: options.completion_stats.range_71_80
+ aliasFor: options.percentage_segments.range_71_80
+ - key: options.completion_stats.range_81_90
+ aliasFor: options.percentage_segments.range_81_90
+ - key: options.completion_stats.range_91_100
+ aliasFor: options.percentage_segments.range_91_100
+
+ - key: options.knowledge_score.range_0_10
+ aliasFor: options.percentage_segments.range_0_10
+ - key: options.knowledge_score.range_11_20
+ aliasFor: options.percentage_segments.range_11_20
+ - key: options.knowledge_score.range_21_30
+ aliasFor: options.percentage_segments.range_21_30
+ - key: options.knowledge_score.range_31_40
+ aliasFor: options.percentage_segments.range_31_40
+ - key: options.knowledge_score.range_41_50
+ aliasFor: options.percentage_segments.range_41_50
+ - key: options.knowledge_score.range_51_60
+ aliasFor: options.percentage_segments.range_51_60
+ - key: options.knowledge_score.range_61_70
+ aliasFor: options.percentage_segments.range_61_70
+ - key: options.knowledge_score.range_71_80
+ aliasFor: options.percentage_segments.range_71_80
+ - key: options.knowledge_score.range_81_90
+ aliasFor: options.percentage_segments.range_81_90
+ - key: options.knowledge_score.range_91_100
+ aliasFor: options.percentage_segments.range_91_100
+
+ # source
+ - key: options.source.angular_community
+ t: Angular Community
+ - key: options.source.work
+ t: Workplace
+ - key: options.source.word_of_mouth
+ t: Word of Mouth
+ - key: options.source.podcast
+ t: Podcasts
+ - key: options.source.other_online_sources
+ t: Other Online Sources
+ - key: options.source.blog
+ t: Blogs
+ # - key: options.source.
+ # t:
+ # - key: options.source.
+ # t:
+ # - key: options.source.
+ # t:
+ # - key: options.source.
+ # t:
+
###########################################################################
# Tools
###########################################################################
@@ -924,6 +1260,14 @@ translations:
Habár a diverzitással foglalkozó adatok érzékenyek lehetnek, mi úgy gondoljuk, hogy
fontos, hogy összegyűjtsük ezeket az adatokat, hogy lássuk (és tudjunk rajta javítani),
hogy mennyire befogadó és reprezentatív ez a felmérés.
+ - key: user_info.race_ethnicity.not_allowed
+ t: >
+ In order to comply with local policies, the collection of race or ethnicity data has
+ been disabled for your country or region.
+ - key: user_info.race_ethnicity.others
+ t: Other Races or Ethnicities
+ - key: user_info.race_ethnicity_freeform
+ aliasFor: user_info.race_ethnicity.others
# disability status
- key: user_info.disability_status
@@ -936,12 +1280,20 @@ translations:
# disability status (other)
- key: user_info.disability_status.others
t: Egyéb fogyatékosságok
+ - key: user_info.disability_status_freeform
+ aliasFor: user_info.disability_status.others
# other info
- key: user_info.how_did_user_find_out_about_the_survey
t: Honnan találtad meg ezt a felmérést?
- key: user_info.email
t: A felhasználói email
+ - key: user_info.email.description
+ t: >
+ You have filled out the survey anonymously. If you'd like, you can optionally enter your email to be able to access your data later on, and be notified when the survey results are published.
+ - key: user_info.email.note
+ t: >
+ We do not store any personal data, so after you fill in your email address we will use it to generate a unique anonymized identifier and then delete the address itself from our records.
- key: user_info.country
t: Az országod és a régiód
- key: user_info.country.description
@@ -971,6 +1323,17 @@ translations:
- key: user_info.industry_sector.others.description
t: Egyéb iparágak, amikben dolgozol, és nincsenek fentebb felsorolva.
+ - key: usage.industry_sector
+ aliasFor: user_info.industry_sector
+ - key: usage.industry_sector.description
+ aliasFor: user_info.industry_sector.description
+ - key: usage.industry_sector.others
+ aliasFor: user_info.industry_sector.others
+ - key: usage.industry_sector_freeform
+ aliasFor: user_info.industry_sector.others
+ - key: usage.industry_sector.others.description
+ aliasFor: user_info.industry_sector.description
+
# degree
- key: user_info.higher_education_degree
t: Magasabb végzettség
@@ -999,56 +1362,39 @@ translations:
- key: tools_others.text_editors.others.description
t: Egyéb válasz (szabad formátum).
- - key: tools_others.utilities
- t: Segédeszközök
- - key: tools_others.utilities.description
- t: Milyen segédeszközöket használsz rendszeresen?
- - key: tools_others.utilities.others
- t: Más segédeszközök
- - key: tools_others.utilities.others.description
- t: Más segédeszközök (szabad formátum).
-
- - key: tools_others.browsers
- t: Böngészők
- - key: tools_others.browsers.description
- t: Milyen böngészőket használsz rendszeresen a fejlesztés kezdetén?
- - key: tools_others.browsers.others
- t: Egyéb böngészők
- - key: tools_others.browsers.others.description
- t: Egyéb válasz (szabad formátum).
-
- - key: tools_others.build_tools
- t: Fordítási eszközök
- - key: tools_others.build_tools.description
- t: Milyen fordítási eszközöket használsz rendszeresen?
- - key: tools_others.build_tools.others
- t: Egyéb fordítási eszközök
- - key: tools_others.build_tools.others.description
- t: Egyéb válasz (szabad formátum).
+ # employment status
+ - key: user_info.employment_status
+ t: Employment Status
+ - key: user_info.employment_status.description
+ t: What's your employment status?
+
+ # completion
+ - key: user_info.completion_stats
+ t: Survey Completion
+ - key: user_info.completion_stats.description
+ t: Which proportion of the survey did respondents fill out?
+
+ # email_temporary (receive updates?)
+ - key: user_info.receive_notifications
+ t: Do you want to be notified when the survey results are released?
+ - key: user_info.receive_notifications.note
+ t: >
+ We don't store any private data, so after your email address is sent to our
+ mailing list provider it will be deleted from our own records.
- - key: tools_others.non_js_languages
- t: Nem JavaScript nyelvek
- - key: tools_others.non_js_languages.description
- t: Milyen egyéb programozói nyelveket használsz?
- - key: tools_others.non_js_languages.others
- t: Egyéb nyelvek
- - key: tools_others.non_js_languages.others.description
- t: Egyéb válasz (szabad formátum).
+ # how can we improve the survey?
+ - key: user_info.how_can_we_improve
+ t: How could we improve this survey?
- - key: tools_others.javascript_flavors
- t: A JavaScript variációi
- - key: tools_others.javascript_flavors.description
- t: Nyelvek, amik JavaScript-be fordulnak
- - key: tools_others.javascript_flavors.others
- t: Egyéb JavaScript variációk
- - key: tools_others.javascript_flavors.others.description
- t: Egyéb válasz (szabad formátum).
+ ###########################################################################
+ # Usage
+ ###########################################################################
###########################################################################
# Resources
###########################################################################
- # learning method
+ # first steps
- key: resources.first_steps
t: Kezdeti tanulási módszerek
- key: resources.first_steps.description
@@ -1067,6 +1413,8 @@ translations:
t: Egyéb blogok & magazinok
- key: resources.blogs_news_magazines.others.description
t: Egyéb válasz (szabad formátum).
+ - key: options.blogs_news_magazines.na
+ t: 🚫 None
# sites & courses
- key: resources.sites_courses
@@ -1077,6 +1425,8 @@ translations:
t: Egyéb weboldalak & kurzusok
- key: resources.sites_courses.others.description
t: Egyéb válasz (szabad formátum).
+ - key: options.sites_courses.na
+ t: 🚫 None
# podcasts
- key: resources.podcasts
@@ -1087,6 +1437,8 @@ translations:
t: Egyéb podcastok
- key: resources.podcasts.others.description
t: Egyéb válasz (szabad formátum).
+ - key: options.podcasts.na
+ t: 🚫 None
# people
- key: resources.people
@@ -1103,3 +1455,84 @@ translations:
t: >
Emberek akiket olvasol, követsz, vagy csak ki szeretnél emelni a munkájuk miatt
(szabad formátum, vesszővel elválasztott nevek).
+ - key: options.people.na
+ t: 🚫 None
+
+ # other surveys
+ - key: resources.other_surveys
+ t: Other Surveys
+ - key: resources.other_surveys.description
+ t: Which other developer surveys do you participate in?
+ - key: resources.other_surveys.others
+ t: Additional surveys not mentioned above
+ - key: options.other_surveys.na
+ t: 🚫 None
+ # TODO: temporary fix, this should not be needed in the first place
+ - key: user_info.other_surveys.question
+ t: Which other developer surveys do you participate in?
+
+ - key: user_info.other_surveys
+ aliasFor: resources.other_surveys
+ - key: user_info.other_surveys.question
+ aliasFor: resources.other_surveys.description
+
+ # video creators
+ - key: resources.video_creators
+ t: Video Creators
+ - key: resources.video_creators.description
+ t: Creators you follow on video-centric platforms such as YouTube, Twitch, TikTok, etc.
+ - key: resources.video_creators.others
+ t: Other Video Creators
+ - key: options.video_creators.na
+ t: 🚫 None
+
+ ###########################################################################
+ # Follow-Up Questions
+ ###########################################################################
+
+ - key: followups.button
+ t: Tell us more…
+
+ - key: followups.description
+ t: |
+ Optionally, you can tell us more about why you picked this answer:
+
+ - key: followups.description.short
+ t: |
+ Tell us more:
+
+ - key: followups.placeholder
+ t: Other reason…
+
+ - key: followups.want_to_learn_more
+ t: I want to learn more
+ - key: followups.not_interested
+ t: I'm not interested
+ - key: followups.insufficient_browser_support
+ t: Insufficient browser support
+ - key: followups.not_needed
+ t: I haven't needed it
+ - key: followups.hard_to_use
+ t: It was hard to use
+ - key: followups.positive_experience
+ t: I had a positive experience
+ - key: followups.not_powerful
+ t: It wasn't powerful enough
+
+ - key: followups.sentiment_interested
+ t: Interested
+ - key: followups.sentiment_not_interested
+ t: Not interested
+ - key: followups.sentiment_positive_experience
+ t: Want to use again
+ - key: followups.sentiment_negative_experience
+ t: Negative experience
+
+ # - key: followups.
+ # t:
+ # - key: followups.
+ # t:
+ # - key: followups.
+ # t:
+ # - key: followups.
+ # t:
diff --git a/config.yml b/config.yml
index 7c71a45..5dfd059 100644
--- a/config.yml
+++ b/config.yml
@@ -1,3 +1,3 @@
id: hu-HU
-label: Hrvatski
+label: Hungarian
translators: ["punkah", "b3nk3"]
diff --git a/countries.yml b/countries.yml
new file mode 100644
index 0000000..941cc80
--- /dev/null
+++ b/countries.yml
@@ -0,0 +1,864 @@
+# this list includes only the top ~50 countries in the world ranked by population,
+# we can add more countries if they appear in the survey. See full list below
+locale: en-US
+translations:
+ - key: options.country.AFG
+ t: Afghanistan
+ - key: options.country.DZA
+ t: Algeria
+ - key: options.country.ARG
+ t: Argentina
+ - key: options.country.AUS
+ t: Australia
+ - key: options.country.AUT
+ t: Austria
+ - key: options.country.BGD
+ t: Bangladesh
+ - key: options.country.BEL
+ t: Belgium
+ - key: options.country.BLR
+ t: Belarus
+ - key: options.country.BRA
+ t: Brazil
+ - key: options.country.CAN
+ t: Canada
+ - key: options.country.CHE
+ t: Switzerland
+ - key: options.country.CHL
+ t: Chile
+ - key: options.country.CHN
+ t: China
+ - key: options.country.COD
+ t: DR Congo
+ - key: options.country.COL
+ t: Colombia
+ - key: options.country.CIV
+ t: Côte d'Ivoire
+ - key: options.country.CZE
+ t: Czechia
+ - key: options.country.DNK
+ t: Denmark
+ - key: options.country.EGY
+ t: Egypt
+ - key: options.country.ETH
+ t: Ethiopia
+ - key: options.country.FRA
+ t: France
+ - key: options.country.DEU
+ t: Germany
+ - key: options.country.GHA
+ t: Ghana
+ - key: options.country.GBR
+ t: United Kingdom
+ - key: options.country.IND
+ t: India
+ - key: options.country.IDN
+ t: Indonesia
+ - key: options.country.IRN
+ t: Iran
+ - key: options.country.IRQ
+ t: Iraq
+ - key: options.country.ITA
+ t: Italy
+ - key: options.country.ISR
+ t: Israel
+ - key: options.country.JPN
+ t: Japan
+ - key: options.country.KEN
+ t: Kenya
+ - key: options.country.KOR
+ t: South Korea
+ - key: options.country.MEX
+ t: Mexico
+ - key: options.country.MMR
+ t: Myanmar
+ - key: options.country.NOR
+ t: Norway
+ - key: options.country.NLD
+ t: Netherlands
+ - key: options.country.NGA
+ t: Nigeria
+ - key: options.country.NZL
+ t: New Zealand
+ - key: options.country.POL
+ t: Poland
+ - key: options.country.PAK
+ t: Pakistan
+ - key: options.country.PHL
+ t: Philippines
+ - key: options.country.RUS
+ t: Russia
+ - key: options.country.SAU
+ t: Saudi Arabia
+ - key: options.country.SGP
+ t: Singapore
+ - key: options.country.ZAF
+ t: South Africa
+ - key: options.country.ESP
+ t: Spain
+ - key: options.country.SWE
+ t: Sweden
+ - key: options.country.TZA
+ t: Tanzania
+ - key: options.country.THA
+ t: Thailand
+ - key: options.country.TUR
+ t: Turkey
+ - key: options.country.UGA
+ t: Uganda
+ - key: options.country.UKR
+ t: Ukraine
+ - key: options.country.USA
+ t: United States of America
+ - key: options.country.VNM
+ t: Vietnam
+# from https://github.com/lukes/ISO-3166-Countries-with-Regional-Codes/blob/master/slim-3/slim-3.json
+
+# - name: Afghanistan
+# alpha-3: AFG
+# country-code: '004'
+# - name: Åland Islands
+# alpha-3: ALA
+# country-code: '248'
+# - name: Albania
+# alpha-3: ALB
+# country-code: '008'
+# - name: Algeria
+# alpha-3: DZA
+# country-code: '012'
+# - name: American Samoa
+# alpha-3: ASM
+# country-code: '016'
+# - name: Andorra
+# alpha-3: AND
+# country-code: '020'
+# - name: Angola
+# alpha-3: AGO
+# country-code: '024'
+# - name: Anguilla
+# alpha-3: AIA
+# country-code: '660'
+# - name: Antarctica
+# alpha-3: ATA
+# country-code: '010'
+# - name: Antigua and Barbuda
+# alpha-3: ATG
+# country-code: '028'
+# - name: Argentina
+# alpha-3: ARG
+# country-code: '032'
+# - name: Armenia
+# alpha-3: ARM
+# country-code: '051'
+# - name: Aruba
+# alpha-3: ABW
+# country-code: '533'
+# - name: Australia
+# alpha-3: AUS
+# country-code: '036'
+# - name: Austria
+# alpha-3: AUT
+# country-code: '040'
+# - name: Azerbaijan
+# alpha-3: AZE
+# country-code: '031'
+# - name: Bahamas
+# alpha-3: BHS
+# country-code: '044'
+# - name: Bahrain
+# alpha-3: BHR
+# country-code: '048'
+# - name: Bangladesh
+# alpha-3: BGD
+# country-code: '050'
+# - name: Barbados
+# alpha-3: BRB
+# country-code: '052'
+# - name: Belarus
+# alpha-3: BLR
+# country-code: '112'
+# - name: Belgium
+# alpha-3: BEL
+# country-code: '056'
+# - name: Belize
+# alpha-3: BLZ
+# country-code: '084'
+# - name: Benin
+# alpha-3: BEN
+# country-code: '204'
+# - name: Bermuda
+# alpha-3: BMU
+# country-code: '060'
+# - name: Bhutan
+# alpha-3: BTN
+# country-code: '064'
+# - name: Bolivia (Plurinational State of)
+# alpha-3: BOL
+# country-code: '068'
+# - name: Bonaire, Sint Eustatius and Saba
+# alpha-3: BES
+# country-code: '535'
+# - name: Bosnia and Herzegovina
+# alpha-3: BIH
+# country-code: '070'
+# - name: Botswana
+# alpha-3: BWA
+# country-code: '072'
+# - name: Bouvet Island
+# alpha-3: BVT
+# country-code: '074'
+# - name: Brazil
+# alpha-3: BRA
+# country-code: '076'
+# - name: British Indian Ocean Territory
+# alpha-3: IOT
+# country-code: '086'
+# - name: Brunei Darussalam
+# alpha-3: BRN
+# country-code: '096'
+# - name: Bulgaria
+# alpha-3: BGR
+# country-code: '100'
+# - name: Burkina Faso
+# alpha-3: BFA
+# country-code: '854'
+# - name: Burundi
+# alpha-3: BDI
+# country-code: '108'
+# - name: Cabo Verde
+# alpha-3: CPV
+# country-code: '132'
+# - name: Cambodia
+# alpha-3: KHM
+# country-code: '116'
+# - name: Cameroon
+# alpha-3: CMR
+# country-code: '120'
+# - name: Canada
+# alpha-3: CAN
+# country-code: '124'
+# - name: Cayman Islands
+# alpha-3: CYM
+# country-code: '136'
+# - name: Central African Republic
+# alpha-3: CAF
+# country-code: '140'
+# - name: Chad
+# alpha-3: TCD
+# country-code: '148'
+# - name: Chile
+# alpha-3: CHL
+# country-code: '152'
+# - name: China
+# alpha-3: CHN
+# country-code: '156'
+# - name: Christmas Island
+# alpha-3: CXR
+# country-code: '162'
+# - name: Cocos (Keeling) Islands
+# alpha-3: CCK
+# country-code: '166'
+# - name: Colombia
+# alpha-3: COL
+# country-code: '170'
+# - name: Comoros
+# alpha-3: COM
+# country-code: '174'
+# - name: Congo
+# alpha-3: COG
+# country-code: '178'
+# - name: Congo, Democratic Republic of the
+# alpha-3: COD
+# country-code: '180'
+# - name: Cook Islands
+# alpha-3: COK
+# country-code: '184'
+# - name: Costa Rica
+# alpha-3: CRI
+# country-code: '188'
+# - name: Côte d'Ivoire
+# alpha-3: CIV
+# country-code: '384'
+# - name: Croatia
+# alpha-3: HRV
+# country-code: '191'
+# - name: Cuba
+# alpha-3: CUB
+# country-code: '192'
+# - name: Curaçao
+# alpha-3: CUW
+# country-code: '531'
+# - name: Cyprus
+# alpha-3: CYP
+# country-code: '196'
+# - name: Czechia
+# alpha-3: CZE
+# country-code: '203'
+# - name: Denmark
+# alpha-3: DNK
+# country-code: '208'
+# - name: Djibouti
+# alpha-3: DJI
+# country-code: '262'
+# - name: Dominica
+# alpha-3: DMA
+# country-code: '212'
+# - name: Dominican Republic
+# alpha-3: DOM
+# country-code: '214'
+# - name: Ecuador
+# alpha-3: ECU
+# country-code: '218'
+# - name: Egypt
+# alpha-3: EGY
+# country-code: '818'
+# - name: El Salvador
+# alpha-3: SLV
+# country-code: '222'
+# - name: Equatorial Guinea
+# alpha-3: GNQ
+# country-code: '226'
+# - name: Eritrea
+# alpha-3: ERI
+# country-code: '232'
+# - name: Estonia
+# alpha-3: EST
+# country-code: '233'
+# - name: Eswatini
+# alpha-3: SWZ
+# country-code: '748'
+# - name: Ethiopia
+# alpha-3: ETH
+# country-code: '231'
+# - name: Falkland Islands (Malvinas)
+# alpha-3: FLK
+# country-code: '238'
+# - name: Faroe Islands
+# alpha-3: FRO
+# country-code: '234'
+# - name: Fiji
+# alpha-3: FJI
+# country-code: '242'
+# - name: Finland
+# alpha-3: FIN
+# country-code: '246'
+# - name: France
+# alpha-3: FRA
+# country-code: '250'
+# - name: French Guiana
+# alpha-3: GUF
+# country-code: '254'
+# - name: French Polynesia
+# alpha-3: PYF
+# country-code: '258'
+# - name: French Southern Territories
+# alpha-3: ATF
+# country-code: '260'
+# - name: Gabon
+# alpha-3: GAB
+# country-code: '266'
+# - name: Gambia
+# alpha-3: GMB
+# country-code: '270'
+# - name: Georgia
+# alpha-3: GEO
+# country-code: '268'
+# - name: Germany
+# alpha-3: DEU
+# country-code: '276'
+# - name: Ghana
+# alpha-3: GHA
+# country-code: '288'
+# - name: Gibraltar
+# alpha-3: GIB
+# country-code: '292'
+# - name: Greece
+# alpha-3: GRC
+# country-code: '300'
+# - name: Greenland
+# alpha-3: GRL
+# country-code: '304'
+# - name: Grenada
+# alpha-3: GRD
+# country-code: '308'
+# - name: Guadeloupe
+# alpha-3: GLP
+# country-code: '312'
+# - name: Guam
+# alpha-3: GUM
+# country-code: '316'
+# - name: Guatemala
+# alpha-3: GTM
+# country-code: '320'
+# - name: Guernsey
+# alpha-3: GGY
+# country-code: '831'
+# - name: Guinea
+# alpha-3: GIN
+# country-code: '324'
+# - name: Guinea-Bissau
+# alpha-3: GNB
+# country-code: '624'
+# - name: Guyana
+# alpha-3: GUY
+# country-code: '328'
+# - name: Haiti
+# alpha-3: HTI
+# country-code: '332'
+# - name: Heard Island and McDonald Islands
+# alpha-3: HMD
+# country-code: '334'
+# - name: Holy See
+# alpha-3: VAT
+# country-code: '336'
+# - name: Honduras
+# alpha-3: HND
+# country-code: '340'
+# - name: Hong Kong
+# alpha-3: HKG
+# country-code: '344'
+# - name: Hungary
+# alpha-3: HUN
+# country-code: '348'
+# - name: Iceland
+# alpha-3: ISL
+# country-code: '352'
+# - name: India
+# alpha-3: IND
+# country-code: '356'
+# - name: Indonesia
+# alpha-3: IDN
+# country-code: '360'
+# - name: Iran (Islamic Republic of)
+# alpha-3: IRN
+# country-code: '364'
+# - name: Iraq
+# alpha-3: IRQ
+# country-code: '368'
+# - name: Ireland
+# alpha-3: IRL
+# country-code: '372'
+# - name: Isle of Man
+# alpha-3: IMN
+# country-code: '833'
+# - name: Israel
+# alpha-3: ISR
+# country-code: '376'
+# - name: Italy
+# alpha-3: ITA
+# country-code: '380'
+# - name: Jamaica
+# alpha-3: JAM
+# country-code: '388'
+# - name: Japan
+# alpha-3: JPN
+# country-code: '392'
+# - name: Jersey
+# alpha-3: JEY
+# country-code: '832'
+# - name: Jordan
+# alpha-3: JOR
+# country-code: '400'
+# - name: Kazakhstan
+# alpha-3: KAZ
+# country-code: '398'
+# - name: Kenya
+# alpha-3: KEN
+# country-code: '404'
+# - name: Kiribati
+# alpha-3: KIR
+# country-code: '296'
+# - name: Korea (Democratic People's Republic of)
+# alpha-3: PRK
+# country-code: '408'
+# - name: Korea, Republic of
+# alpha-3: KOR
+# country-code: '410'
+# - name: Kuwait
+# alpha-3: KWT
+# country-code: '414'
+# - name: Kyrgyzstan
+# alpha-3: KGZ
+# country-code: '417'
+# - name: Lao People's Democratic Republic
+# alpha-3: LAO
+# country-code: '418'
+# - name: Latvia
+# alpha-3: LVA
+# country-code: '428'
+# - name: Lebanon
+# alpha-3: LBN
+# country-code: '422'
+# - name: Lesotho
+# alpha-3: LSO
+# country-code: '426'
+# - name: Liberia
+# alpha-3: LBR
+# country-code: '430'
+# - name: Libya
+# alpha-3: LBY
+# country-code: '434'
+# - name: Liechtenstein
+# alpha-3: LIE
+# country-code: '438'
+# - name: Lithuania
+# alpha-3: LTU
+# country-code: '440'
+# - name: Luxembourg
+# alpha-3: LUX
+# country-code: '442'
+# - name: Macao
+# alpha-3: MAC
+# country-code: '446'
+# - name: Madagascar
+# alpha-3: MDG
+# country-code: '450'
+# - name: Malawi
+# alpha-3: MWI
+# country-code: '454'
+# - name: Malaysia
+# alpha-3: MYS
+# country-code: '458'
+# - name: Maldives
+# alpha-3: MDV
+# country-code: '462'
+# - name: Mali
+# alpha-3: MLI
+# country-code: '466'
+# - name: Malta
+# alpha-3: MLT
+# country-code: '470'
+# - name: Marshall Islands
+# alpha-3: MHL
+# country-code: '584'
+# - name: Martinique
+# alpha-3: MTQ
+# country-code: '474'
+# - name: Mauritania
+# alpha-3: MRT
+# country-code: '478'
+# - name: Mauritius
+# alpha-3: MUS
+# country-code: '480'
+# - name: Mayotte
+# alpha-3: MYT
+# country-code: '175'
+# - name: Mexico
+# alpha-3: MEX
+# country-code: '484'
+# - name: Micronesia (Federated States of)
+# alpha-3: FSM
+# country-code: '583'
+# - name: Moldova, Republic of
+# alpha-3: MDA
+# country-code: '498'
+# - name: Monaco
+# alpha-3: MCO
+# country-code: '492'
+# - name: Mongolia
+# alpha-3: MNG
+# country-code: '496'
+# - name: Montenegro
+# alpha-3: MNE
+# country-code: '499'
+# - name: Montserrat
+# alpha-3: MSR
+# country-code: '500'
+# - name: Morocco
+# alpha-3: MAR
+# country-code: '504'
+# - name: Mozambique
+# alpha-3: MOZ
+# country-code: '508'
+# - name: Myanmar
+# alpha-3: MMR
+# country-code: '104'
+# - name: Namibia
+# alpha-3: NAM
+# country-code: '516'
+# - name: Nauru
+# alpha-3: NRU
+# country-code: '520'
+# - name: Nepal
+# alpha-3: NPL
+# country-code: '524'
+# - name: Netherlands
+# alpha-3: NLD
+# country-code: '528'
+# - name: New Caledonia
+# alpha-3: NCL
+# country-code: '540'
+# - name: New Zealand
+# alpha-3: NZL
+# country-code: '554'
+# - name: Nicaragua
+# alpha-3: NIC
+# country-code: '558'
+# - name: Niger
+# alpha-3: NER
+# country-code: '562'
+# - name: Nigeria
+# alpha-3: NGA
+# country-code: '566'
+# - name: Niue
+# alpha-3: NIU
+# country-code: '570'
+# - name: Norfolk Island
+# alpha-3: NFK
+# country-code: '574'
+# - name: North Macedonia
+# alpha-3: MKD
+# country-code: '807'
+# - name: Northern Mariana Islands
+# alpha-3: MNP
+# country-code: '580'
+# - name: Norway
+# alpha-3: NOR
+# country-code: '578'
+# - name: Oman
+# alpha-3: OMN
+# country-code: '512'
+# - name: Pakistan
+# alpha-3: PAK
+# country-code: '586'
+# - name: Palau
+# alpha-3: PLW
+# country-code: '585'
+# - name: Palestine, State of
+# alpha-3: PSE
+# country-code: '275'
+# - name: Panama
+# alpha-3: PAN
+# country-code: '591'
+# - name: Papua New Guinea
+# alpha-3: PNG
+# country-code: '598'
+# - name: Paraguay
+# alpha-3: PRY
+# country-code: '600'
+# - name: Peru
+# alpha-3: PER
+# country-code: '604'
+# - name: Philippines
+# alpha-3: PHL
+# country-code: '608'
+# - name: Pitcairn
+# alpha-3: PCN
+# country-code: '612'
+# - name: Poland
+# alpha-3: POL
+# country-code: '616'
+# - name: Portugal
+# alpha-3: PRT
+# country-code: '620'
+# - name: Puerto Rico
+# alpha-3: PRI
+# country-code: '630'
+# - name: Qatar
+# alpha-3: QAT
+# country-code: '634'
+# - name: Réunion
+# alpha-3: REU
+# country-code: '638'
+# - name: Romania
+# alpha-3: ROU
+# country-code: '642'
+# - name: Russian Federation
+# alpha-3: RUS
+# country-code: '643'
+# - name: Rwanda
+# alpha-3: RWA
+# country-code: '646'
+# - name: Saint Barthélemy
+# alpha-3: BLM
+# country-code: '652'
+# - name: Saint Helena, Ascension and Tristan da Cunha
+# alpha-3: SHN
+# country-code: '654'
+# - name: Saint Kitts and Nevis
+# alpha-3: KNA
+# country-code: '659'
+# - name: Saint Lucia
+# alpha-3: LCA
+# country-code: '662'
+# - name: Saint Martin (French part)
+# alpha-3: MAF
+# country-code: '663'
+# - name: Saint Pierre and Miquelon
+# alpha-3: SPM
+# country-code: '666'
+# - name: Saint Vincent and the Grenadines
+# alpha-3: VCT
+# country-code: '670'
+# - name: Samoa
+# alpha-3: WSM
+# country-code: '882'
+# - name: San Marino
+# alpha-3: SMR
+# country-code: '674'
+# - name: Sao Tome and Principe
+# alpha-3: STP
+# country-code: '678'
+# - name: Saudi Arabia
+# alpha-3: SAU
+# country-code: '682'
+# - name: Senegal
+# alpha-3: SEN
+# country-code: '686'
+# - name: Serbia
+# alpha-3: SRB
+# country-code: '688'
+# - name: Seychelles
+# alpha-3: SYC
+# country-code: '690'
+# - name: Sierra Leone
+# alpha-3: SLE
+# country-code: '694'
+# - name: Singapore
+# alpha-3: SGP
+# country-code: '702'
+# - name: Sint Maarten (Dutch part)
+# alpha-3: SXM
+# country-code: '534'
+# - name: Slovakia
+# alpha-3: SVK
+# country-code: '703'
+# - name: Slovenia
+# alpha-3: SVN
+# country-code: '705'
+# - name: Solomon Islands
+# alpha-3: SLB
+# country-code: '090'
+# - name: Somalia
+# alpha-3: SOM
+# country-code: '706'
+# - name: South Africa
+# alpha-3: ZAF
+# country-code: '710'
+# - name: South Georgia and the South Sandwich Islands
+# alpha-3: SGS
+# country-code: '239'
+# - name: South Sudan
+# alpha-3: SSD
+# country-code: '728'
+# - name: Spain
+# alpha-3: ESP
+# country-code: '724'
+# - name: Sri Lanka
+# alpha-3: LKA
+# country-code: '144'
+# - name: Sudan
+# alpha-3: SDN
+# country-code: '729'
+# - name: Suriname
+# alpha-3: SUR
+# country-code: '740'
+# - name: Svalbard and Jan Mayen
+# alpha-3: SJM
+# country-code: '744'
+# - name: Sweden
+# alpha-3: SWE
+# country-code: '752'
+# - name: Switzerland
+# alpha-3: CHE
+# country-code: '756'
+# - name: Syrian Arab Republic
+# alpha-3: SYR
+# country-code: '760'
+# - name: Taiwan
+# alpha-3: TWN
+# country-code: '158'
+# - name: Tajikistan
+# alpha-3: TJK
+# country-code: '762'
+# - name: Tanzania, United Republic of
+# alpha-3: TZA
+# country-code: '834'
+# - name: Thailand
+# alpha-3: THA
+# country-code: '764'
+# - name: Timor-Leste
+# alpha-3: TLS
+# country-code: '626'
+# - name: Togo
+# alpha-3: TGO
+# country-code: '768'
+# - name: Tokelau
+# alpha-3: TKL
+# country-code: '772'
+# - name: Tonga
+# alpha-3: TON
+# country-code: '776'
+# - name: Trinidad and Tobago
+# alpha-3: TTO
+# country-code: '780'
+# - name: Tunisia
+# alpha-3: TUN
+# country-code: '788'
+# - name: Turkey
+# alpha-3: TUR
+# country-code: '792'
+# - name: Turkmenistan
+# alpha-3: TKM
+# country-code: '795'
+# - name: Turks and Caicos Islands
+# alpha-3: TCA
+# country-code: '796'
+# - name: Tuvalu
+# alpha-3: TUV
+# country-code: '798'
+# - name: Uganda
+# alpha-3: UGA
+# country-code: '800'
+# - name: Ukraine
+# alpha-3: UKR
+# country-code: '804'
+# - name: United Arab Emirates
+# alpha-3: ARE
+# country-code: '784'
+# - name: United Kingdom
+# alpha-3: GBR
+# country-code: '826'
+# - name: United States of America
+# alpha-3: USA
+# country-code: '840'
+# - name: United States Minor Outlying Islands
+# alpha-3: UMI
+# country-code: '581'
+# - name: Uruguay
+# alpha-3: URY
+# country-code: '858'
+# - name: Uzbekistan
+# alpha-3: UZB
+# country-code: '860'
+# - name: Vanuatu
+# alpha-3: VUT
+# country-code: '548'
+# - name: Venezuela
+# alpha-3: VEN
+# country-code: '862'
+# - name: Viet Nam
+# alpha-3: VNM
+# country-code: '704'
+# - name: Virgin Islands (British)
+# alpha-3: VGB
+# country-code: '092'
+# - name: Virgin Islands (U.S.)
+# alpha-3: VIR
+# country-code: '850'
+# - name: Wallis and Futuna
+# alpha-3: WLF
+# country-code: '876'
+# - name: Western Sahara
+# alpha-3: ESH
+# country-code: '732'
+# - name: Yemen
+# alpha-3: YEM
+# country-code: '887'
+# - name: Zambia
+# alpha-3: ZMB
+# country-code: '894'
+# - name: Zimbabwe
+# alpha-3: ZWE
+# country-code: '716'
+
diff --git a/crowdin.yml b/crowdin.yml
new file mode 100644
index 0000000..cac3adc
--- /dev/null
+++ b/crowdin.yml
@@ -0,0 +1,3 @@
+files:
+ - source: '*.yml'
+ translation: /%two_letters_code%/%original_file_name%
diff --git a/demo_survey.yml b/demo_survey.yml
new file mode 100644
index 0000000..dafee4f
--- /dev/null
+++ b/demo_survey.yml
@@ -0,0 +1,490 @@
+locale: en-US
+namespace: demo
+translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ - key: general.demo_survey.intro
+ t: |
+ Since being originally created at Facebook in September 2015, many developers have embraced GraphQL as a new and promising way to build APIs.
+
+ Yet a lot of questions still remain: when do you need GraphQL exactly? Should you hand-code your GraphQL API or generate it from your database? And will it ever replace REST?
+
+ The annual State of GraphQL developer survey aims to answer these questions, and many more!
+
+ - key: general.demo_survey.description
+ t: The annual developer survey of the GraphQL ecosystem
+ ###########################################################################
+ # Survey
+ ###########################################################################
+
+ - key: features.graphql_features_intro
+ t: >
+ Welcome to the survey! This first part is all about figuring out
+ which **features** of GraphQL and its ecosystem you know about.
+ And if you know about something but haven't yet used it, that's fine too!
+
+ - key: tools.graphql_tools_intro
+ t: >
+ The next couple sections focus on the **libraries** and **services** that make up
+ the GraphQL ecosystem. Let us know what you're excited about!
+
+ - key: usage.bracket_intro
+ t: >
+ The next question uses a special **bracket** format! For each match-up, pick the item
+ that you feel is most important to you (note that match-ups are randomized for every respondent).
+
+ ###########################################################################
+ # Sections
+ ###########################################################################
+
+ - key: sections.graphql_language.title
+ t: Language
+ - key: sections.graphql_language.description
+ t: The vocabulary of GraphQL.
+ - key: sections.directives.title
+ t: Directives
+ - key: sections.directives.description
+ t: Augmenting your GraphQL fields.
+ - key: sections.security_performance.title
+ t: Security & Performance
+ - key: sections.security_performance.description
+ t: Making your API more robust.
+ - key: sections.other_features.title
+ t: Other Features
+
+ - key: sections.graphql_servers.title
+ t: GraphQL Servers
+ - key: sections.graphql_servers.description
+ t: How you power your API.
+ - key: sections.graphql_clients.title
+ t: GraphQL Clients
+ - key: sections.graphql_clients.description
+ t: Querying your API.
+ - key: sections.api_generators.title
+ t: API Generators
+ - key: sections.api_generators.description
+ t: ORMs, CMSes, and other tools that create an API for you.
+ - key: sections.web_frameworks.title
+ t: Web Frameworks
+ - key: sections.web_frameworks.description
+ t: Web frameworks that you use in conjunction with GraphQL.
+ - key: sections.graphql_code_generators.title
+ t: Code & Schema Generators
+ - key: sections.graphql_code_generators.description
+ t: Generators, schema builders, and other libraries that write part of your code for you.
+ - key: sections.schema_builders.title
+ t: Schema Builders
+ - key: sections.schema_builders.description
+ t: Libraries and utilities that help you build all or part of your GraphQL schema.
+ - key: sections.usage_graphql.title
+ t: GraphQL Usage
+ - key: sections.usage_graphql.description
+ t: How you use GraphQL.
+
+ - key: sections.tools_others.title
+ t: Other Tools
+ - key: sections.tools_others.description
+ t: Other GraphQL tools.
+
+ - key: sections.resources_graphql.title
+ t: Resources
+ - key: sections.resources_graphql.description
+ t: What GraphQL resources do you consult?
+
+ ###########################################################################
+ # Features
+ ###########################################################################
+
+ # common features
+ - key: features.custom_directives
+ t: Custom Directives
+ - key: features.custom_scalars
+ t: Custom Scalars
+ - key: features.fragments
+ t: Fragments
+ - key: features.unions
+ t: Unions
+ - key: features.interfaces
+ t: Interfaces
+
+ # directives
+ - key: features.at_skip
+ t: "@skip"
+ - key: features.at_include
+ t: "@include"
+ - key: features.at_deprecated
+ t: "@deprecated"
+ - key: features.at_specified_by
+ t: "@specifiedBy"
+ - key: features.at_defer
+ t: "@defer"
+ - key: features.at_stream
+ t: "@stream"
+
+ # security & performance
+ - key: features.persisted_queries
+ t: Persisted Queries
+ - key: features.query_allowlisting
+ t: Query Allow-listing
+ - key: features.query_allowlisting.description
+ t: Only accept queries from a predefined list.
+
+ - key: features.query_timeouts
+ t: Query Timeouts
+ - key: features.query_rate_limit
+ t: Query Rate Limiting
+ - key: features.query_depth_limit
+ t: Query Depth Limiting
+ - key: features.query_amount_limit
+ t: Query Amount Limiting
+ - key: features.query_amount_limiting.description
+ t: Put a ceiling on any pagination count passed as a query argument.
+ - key: features.query_cost_analysis
+ t: Query Cost Analysis
+ - key: features.query_cost_analysis.description
+ t: Analyzing a set of factors before deciding whether to allow a query.
+
+ - key: features.disabling_introspection
+ t: Disabling Introspection
+ - key: features.disabling_introspection.description
+ t: Disabling introspection in production.
+ - key: features.ip_allowlisting
+ t: IP Allow-listing
+ - key: features.ip_allowlisting.description
+ t: Only allowing a predefined set of IP addresses to access an API.
+ - key: features.require_authentication
+ t: Requiring Authentication
+ - key: features.require_authentication.description
+ t: Require authentication before any API access.
+
+ # other features
+ - key: features.graphql_subscriptions
+ t: GraphQL Subscriptions
+ - key: features.live_queries
+ t: Live Queries
+ - key: features.apollo_federation
+ t: Apollo Federation
+ - key: features.schema_stitching
+ t: Schema Stitching
+
+ ###########################################################################
+ # Tools
+ ###########################################################################
+
+ - key: tools.no_client
+ t: No Client
+ - key: tools.no_client.description
+ t: No dedicated GraphQL client (raw HTTP requests with Fetch, Axios, etc.)
+
+ ###########################################################################
+ # Other Tools
+ ###########################################################################
+
+ - key: tools_others.server_languages
+ t: Server Languages
+ - key: tools_others.server_languages.description
+ t: Which language(s) do you use to write your GraphQL back-ends?
+ - key: tools_others.server_languages.others
+ t: Other Server Languages
+
+ - key: tools_others.combining_schemas
+ t: Combining Schemas
+ - key: tools_others.combining_schemas.description
+ t: Which tools do you use to combine, aggregate, or merge GraphQL schemas from different APIs?
+ - key: tools_others.combining_schemas.others
+ t: Other tools for combining schemas
+
+ - key: tools_others.graphql_ides
+ t: GraphQL IDEs
+ - key: tools_others.graphql_ides.description
+ t: Apps and services that help you query your GraphQL API.
+ - key: tools_others.graphql_ides.others
+ t: Other GraphQL IDEs
+
+ - key: tools_others.web_frameworks
+ t: Web Frameworks
+ - key: tools_others.web_frameworks.description
+ t: Web frameworks that you use in conjunction with GraphQL.
+ - key: tools_others.web_frameworks.others
+ t: Other Web Frameworks
+
+ - key: tools_others.databases
+ t: Databases
+ - key: tools_others.databases.description
+ t: Which databases do you use in conjunction with GraphQL?
+ - key: tools_others.databases.others
+ t: Other Databases
+
+ - key: tools_others.other_tools
+ t: Other GraphQL Tools
+ - key: tools_others.other_tools.description
+ t: Other tools, libraries, or services you use
+ - key: tools_others.other_tools.others
+ t: Other GraphQL tools not previously mentioned
+
+ ###########################################################################
+ # Usage
+ ###########################################################################
+
+ - key: usage.graphql_experience
+ t: GraphQL Experience
+ - key: usage.graphql_experience.description
+ t: How long have you been using GraphQL for?
+
+ - key: usage.api_type
+ t: API Types
+ - key: usage.api_type.description
+ t: What kind of APIs do you use GraphQL for?
+ - key: usage.api_type.others
+ t: Other kind of APIs
+
+ - key: usage.client_type
+ t: API Clients
+ - key: usage.client_type.description
+ t: What kind of clients connect to your APIs?
+ - key: usage.client_type.others
+ t: Other types of clients
+
+ - key: usage.data_sources
+ t: Data Sources
+ - key: usage.data_sources.description
+ t: Which kind of data sources are consumed by your GraphQL APIs?
+ - key: usage.data_sources.others
+ t: Other data sources
+
+ - key: usage.code_generation_type
+ t: Code Generation Type
+ - key: usage.code_generation_type.description
+ t: If you use code generation, which approaches do you tend to prefer?
+ - key: usage.code_generation_type.others
+ t: Other types of code generation
+ - key: usage.code_generation_target
+ t: Code Generation Target
+ - key: usage.code_generation_target.description
+ t: Which part(s) of your codebase do you generate programatically?
+ - key: usage.code_generation_target.others
+ t: Other code generation targets
+
+ - key: usage.industry_sector_graphql
+ aliasFor: usage.industry_sector
+ - key: usage.industry_sector_graphql.description
+ t: Which industry sector(s) are you using GraphQL in?
+ - key: usage.industry_sector_graphql.others
+ aliasFor: usage.industry_sector.others
+
+ - key: usage.graphql_strong_points
+ t: GraphQL Strong Points
+ - key: usage.graphql_strong_points.description
+ t: What are the main reasons why you enjoy using GraphQL?
+ - key: usage.graphql_strong_points.others
+ t: Other GraphQL Strong Points
+
+ - key: usage.graphql_pain_points
+ t: GraphQL Pain Points
+ - key: usage.graphql_pain_points.description
+ t: What are your main pain points when using GraphQL?
+ - key: usage.graphql_pain_points.others
+ t: Other GraphQL Pain Points
+
+ - key: happiness.graphql_servers
+ t: How happy are you with the overall state of GraphQL servers?
+ - key: happiness.graphql_clients
+ t: How happy are you with the overall state of GraphQL clients?
+ - key: happiness.api_generators
+ t: How happy are you with the overall state of API generators?
+ - key: happiness.schema_builders
+ t: How happy are you with the overall state of schema builders?
+ - key: happiness.state_of_graphql
+ t: How happy are you with the overall state of the GraphQL ecosystem?
+
+ ###########################################################################
+ # Opinions
+ ###########################################################################
+
+ # - key: opinions.graphql_better_than_rest
+ # t: GraphQL is superior to REST
+ # - key: opinions.always_prefer_graphql_apis
+ # t: I always prefer working with GraphQL APIs
+
+ ###########################################################################
+ # Resources
+ ###########################################################################
+
+ - key: resources.first_steps_graphql
+ t: First Steps With GraphQL
+ - key: resources.first_steps_graphql.description
+ t: When first starting out, how did you initially learn GraphQL?
+ - key: resources.first_steps_graphql.others
+ t: Other initial learning methods
+
+ # sites & courses
+ - key: resources.sites_courses_graphql
+ aliasFor: resources.sites_courses
+ - key: resources.sites_courses_graphql.description
+ t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL?
+
+ # podcasts
+ - key: resources.podcasts_graphql.others
+ aliasFor: resources.podcasts
+ - key: resources.podcasts_graphql.others.description
+ t: Which GraphQL-related podcasts do you listen to?
+
+ # people
+ - key: resources.people_graphql.others
+ aliasFor: resources.people
+ - key: resources.people_graphql.others.description
+ t: People you read, follow, or just want to highlight for their work in the GraphQL ecosystem.
+
+ ###########################################################################
+ # Options
+ ###########################################################################
+
+ - key: options.graphql_experience.range_less_than_1
+ t: Less than one year
+ - key: options.graphql_experience.range_1_2
+ t: 1 to 2 years
+ - key: options.graphql_experience.range_3_5
+ t: 3 to 5 years
+ - key: options.graphql_experience.range_6_10
+ t: 6 to 10 years
+ - key: options.graphql_experience.range_more_than_10
+ t: More than 10 years
+
+ - key: options.api_type.public_apis
+ t: Publicly-available APIs intended for third-party developers
+ - key: options.api_type.personal_apis
+ t: Exposed APIs intended for your own website and/or apps
+ - key: options.api_type.private_apis
+ t: Private, unexposed APIs for internal usage
+
+ - key: options.client_type.browsers
+ t: Browsers
+ - key: options.client_type.mobile_devices
+ t: Native Mobile Apps
+ - key: options.client_type.desktop_apps
+ t: Native Desktop Apps
+ - key: options.client_type.other_servers
+ t: Other Servers
+
+ - key: options.data_sources.static_files
+ t: Static files (YAML, Markdown, etc.)
+ - key: options.data_sources.databases
+ t: Databases
+ - key: options.data_sources.spreadsheets
+ t: Spreadsheets
+ - key: options.data_sources.cmses
+ t: CMSes
+ - key: options.data_sources.rest_apis
+ t: REST APIs (Swagger/OpenAPI, json-schema, oData, etc.)
+ - key: options.data_sources.other_graphql_apis
+ t: Other GraphQL APIs
+ - key: options.data_sources.other_api_protocols
+ t: Other API Protocols (gRPC, SOAP, Apache Thrift, etc.)
+
+ - key: options.code_generation_type.code_first
+ t: Code-first (JS, TS, JSON, etc.)
+ - key: options.code_generation_type.schema_first
+ t: Schema-first (GraphQL SDL-first)
+ - key: options.code_generation_type.database_first
+ t: Database-first
+
+ - key: options.code_generation_target.graphql_schema
+ t: GraphQL schema (SDL)
+ - key: options.code_generation_target.non_graphql_typings
+ t: Non-GraphQL (e.g. TypeScript) typings
+ - key: options.code_generation_target.server_resolvers
+ t: Server resolvers
+ - key: options.code_generation_target.fragments_or_queries
+ t: Client-side fragments and/or queries
+ - key: options.code_generation_target.client_code
+ t: Other client-side code (e.g. React hooks)
+
+ - key: options.graphql_strong_points.avoiding_overfetching
+ t: Avoiding Over-fetching
+ - key: options.graphql_strong_points.avoiding_overfetching.description
+ t: Keep API responses smaller by specifying exactly the data you need.
+ - key: options.graphql_strong_points.introspection
+ t: Introspection & API Documentation
+ - key: options.graphql_strong_points.introspection.description
+ t: Create self-documenting APIs that improve the developer experience.
+ - key: options.graphql_strong_points.tooling_ecosystem
+ t: Tooling & Ecosystem
+ - key: options.graphql_strong_points.tooling_ecosystem.description
+ t: The different tools, services, and libraries that use GraphQL.
+ - key: options.graphql_strong_points.type_checking
+ t: Type-checking
+ - key: options.graphql_strong_points.type_checking.description
+ t: Enforcing and validating types for every object in the API.
+ - key: options.graphql_strong_points.api_aggregation
+ t: Combining Different APIs
+ - key: options.graphql_strong_points.api_aggregation.description
+ t: Being able to combine together different API schemas.
+ - key: options.graphql_strong_points.aggregating_requests
+ t: Aggregating Requests
+ - key: options.graphql_strong_points.aggregating_requests.description
+ t: Only ever have to make a single request from the client.
+ - key: options.graphql_strong_points.community
+ t: Community
+ - key: options.graphql_strong_points.community.description
+ t: The people who are active in the GraphQL space.
+ - key: options.graphql_strong_points.fragment_colocation
+ t: Fragment Colocation
+ - key: options.graphql_strong_points.fragment_colocation.description
+ t: Being able to colocate a component's data requirements next to it.
+
+ - key: options.graphql_pain_points.performance
+ t: Performance
+ - key: options.graphql_pain_points.performance.description
+ t: Performance issues such as the n+1 problem.
+ - key: options.graphql_pain_points.security
+ t: Security
+ - key: options.graphql_pain_points.security.description
+ t: Security issues such as infinitely nested queries.
+ - key: options.graphql_pain_points.combining_schemas
+ t: Combining Different Schemas
+ - key: options.graphql_pain_points.combining_schemas.description
+ t: Being able to combine together different API schemas.
+ - key: options.graphql_pain_points.api_versioning
+ t: API Versioning
+ - key: options.graphql_pain_points.api_versioning.description
+ t: Handling deprecated fields and other versioning concerns.
+ - key: options.graphql_pain_points.file_upload
+ t: File Upload
+ - key: options.graphql_pain_points.file_upload.description
+ t: Being able to upload files through your GraphQL API.
+ - key: options.graphql_pain_points.testing
+ t: Testing
+ - key: options.graphql_pain_points.testing.description
+ t: Testing your GraphQL API.
+ - key: options.graphql_pain_points.error_handling
+ t: Error Handling
+ - key: options.graphql_pain_points.error_handling.description
+ t: Returning errors and managing them on the client.
+ - key: options.graphql_pain_points.client_side_caching
+ t: Client-side Caching
+ - key: options.graphql_pain_points.client_side_caching.description
+ t: Caching data on the client, updating the cache, optimistic UI, etc.
+
+ # learning methods
+ - key: options.first_steps_graphql.books
+ t: Books
+ - key: options.first_steps_graphql.videos
+ t: Videos & screencasts
+ - key: options.first_steps_graphql.school
+ t: School & higher education
+ - key: options.first_steps_graphql.courses_free
+ t: Online courses (free)
+ - key: options.first_steps_graphql.courses_paid
+ t: Online courses (paid)
+ - key: options.first_steps_graphql.podcasts
+ t: Podcasts
+ - key: options.first_steps_graphql.bootcamp
+ t: Coding bootcamp
+ - key: options.first_steps_graphql.on_the_job
+ t: On-the-job training
+ - key: options.first_steps_graphql.self_directed
+ t: Self-directed learning (Google, Stack Overflow, etc.)
+ - key: options.first_steps_graphql.mentoring
+ t: Mentoring
diff --git a/demo_survey_2022.yml b/demo_survey_2022.yml
new file mode 100644
index 0000000..d1b7eb9
--- /dev/null
+++ b/demo_survey_2022.yml
@@ -0,0 +1,360 @@
+locale: en-US
+translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ - key: general.results.description
+ t: The 2022 edition of the annual survey about the latest trends in the GraphQL ecosystem.
+
+ - key: general.livestream_announcement
+ t: Make sure to tune in for our [special survey results livestream](https://dev.to/sachagreif/state-of-javascript-2021-livestream-24a5) on February 22! (English)
+
+ ###########################################################################
+ # Introduction
+ ###########################################################################
+
+ - key: introduction.demo2022
+ t: >
+
+ Since being originally created at Facebook in September 2015, many developers have embraced GraphQL as a new and promising way to build APIs.
+
+
+ Yet 7 years later, a lot of questions still remain: when do you need GraphQL exactly? Should you hand-code your GraphQL API or generate it from your database? And will it ever replace REST?
+
+
+ To answer these questions and many more, we've created the first ever **State of GraphQL** community survey. Over 3,000 developers took part this year, and this is just the beginning.
+
+
+ We hope you enjoy browsing the data, and make sure to check out our [GraphQL API](https://graphiql.devographics.com/) as well!
+
+
+ – Sacha Greif
+
+ ###########################################################################
+ # Tshirt
+ ###########################################################################
+
+ - key: sections.tshirt.title
+ t: T-shirt
+
+ - key: sections.tshirt.description
+ t: |
+ ## Support the Survey With the State of JavaScript T-Shirt
+
+ Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes.
+
+ But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for JavaScript at the same time!
+
+ - key: tshirt.about
+ t: About the T-shirt
+
+ - key: tshirt.description
+ t: |
+ We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
+
+ - key: tshirt.getit
+ t: Get It
+
+ - key: tshirt.price
+ t: USD $29 + shipping
+
+ - key: tshirt.designer.heading
+ t: About the Designer
+
+ - key: tshirt.designer.name
+ t: Christopher Kirk-Nielsen
+
+ - key: tshirt.designer.bio
+ t: |
+ Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+
+ ###########################################################################
+ # Sections
+ ###########################################################################
+
+ - key: sections.user_info_demo2022.description
+ t: |
+ **3,094** respondents took part in this year's survey.
+
+ - key: sections.features_demo2022.description
+ t: |
+ GraphQL may be a simple concept at its core, but there are many features and patterns to consider when you dig below the surface.
+
+ - key: sections.libraries_demo2022.description
+ t: |
+ The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API.
+
+ - key: sections.tools_others_demo2022.description
+ t: |
+ Picking the right tools to use in combination with GraphQL can make all the difference.
+
+ - key: sections.usage_demo2022.description
+ t: |
+ We wanted to know not only how people use GraphQL, but also *why* they use it – as well as where GraphQL is still lacking…
+
+ - key: sections.resources_demo2022.description
+ t: |
+ We're sure you'll discover at least one or two new people, podcasts, or blogs to follow!
+
+ ###########################################################################
+ # Charts
+ ###########################################################################
+
+ - key: options.features_categories.graphql_language
+ aliasFor: sections.graphql_language.title
+ - key: options.features_categories.directives
+ aliasFor: sections.directives.title
+ - key: options.features_categories.security_performance
+ aliasFor: sections.security_performance.title
+ - key: options.features_categories.other_features
+ aliasFor: sections.other_features.title
+
+ - key: blocks.tools_quadrant.description
+ t: |
+ This chart shows each technology's **retention ratio** over its total **user count**.
+ It can be divided into four quadrants:
+
+ - **1**: Low usage, high retention. Technologies worth keeping an eye on.
+
+ - **2**: High usage, high retention. Safe technologies to adopt.
+
+ - **3**: Low usage, low retention. Technologies that are harder to recommend currently.
+
+ - **4**: High usage, low retention. Reassess these technologies if you're currently using them.
+
+ ###########################################################################
+ # Notes
+ ###########################################################################
+
+ - key: blocks.gender.note
+ t: |
+ If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.
+
+ - key: blocks.css_missing_features.note
+ t: |
+ You can explore the full dataset of answers to this question in [this side project](https://whatsmissingfromcss.com/).
+
+ - key: blocks.source.note
+ t: >
+
+ This chart aggregates a mix of referrers, URL parameters, and freeform answers.
+
+ - State of JS: the [State of JS](https://stateofjs.com) mailing list.
+
+ - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.
+
+ - Work: matches `work`, `colleagues`, `coworkers`, etc.
+
+ ###########################################################################
+ # Awards
+ ###########################################################################
+
+ - key: award.feature_adoption_delta_award.comment
+ t: With a **{value}** progression in 2021, the nullish coalescing operator (??) has quickly become an integral part of JavaScript.
+
+ - key: award.tool_usage_delta_award.comment
+ t: esbuild is barely two years old, but with a **{value}** progression over the last year it's already gaining ground.
+
+ - key: award.tool_satisfaction_award.comment
+ t: Vite takes the top spot with a sky-high **{value}** retention ratio!
+
+ - key: award.tool_interest_award.comment
+ t: With a **{value}** interest ratio, Vite once again wins the gold!
+
+ - key: award.most_write_ins_award.comment
+ t: Many questions also accepted write-in answers, and with **{value}** mentions Elm was the most popular item overall.
+
+ ###########################################################################
+ # Conclusion
+ ###########################################################################
+
+ - key: conclusion.demo2022
+ t: |
+
+ GraphQL is truly part of how we build modern applications today.
+
+ More and more companies are creating products, services, tooling, RFCs and most of that work is being done as open-source, which is fantastic to see! It's crucial for a flourishing ecosystem to have healthy competition and collaboration!
+
+ As a result, the tide is changing on how we consume GraphQL on the client, with libraries such as urql and React Query being popular choices today alongside stalwarts like Apollo Client and Relay. It's also great to see GraphQL continue to grow and flourish in languages other than JavaScript – there are now stable and mature GraphQL servers and clients in almost all of the most popular programming languages!
+
+ GraphQL itself is changing as well, with much anticipated changes edging closer to being officially part of the specification. We'll soon see changes with stream, defer, input polymorphism, as well as improvements around subscriptions and live queries.
+
+ Moreover, there's now dedicated companies focused on GraphQL security, caching, tracing errors, deploying to the edge, abstracting databases and backends into simple schemas, and so much more that make working with GraphQL even more approachable than it ever has been before.
+
+ We also recently witnessed a brand new GraphiQL release that boasts a powerful plugin ecosystem, fewer dependencies, and even dark mode! And the [GraphQL Foundation](https://graphql.org/foundation/) continues to grow with new members joining regularly to help sustain the efforts of all those involved in educating, building, and steering the future of GraphQL.
+
+ GraphQL has found its place in the ecosystem, and it has an exciting future ahead!
+
+ - key: conclusion.demo2022.bio
+ t: Senior Developer Relations @ Grafbase
+
+ ###########################################################################
+ # Picks
+ ###########################################################################
+
+ - key: picks.my_pick
+ t: "My 2022 Pick: "
+ - key: picks.intro
+ t: We asked members of the GraphQL community to share their “pick of the year”
+
+ - key: picks.jamie_barton.name
+ t: GraphQL Mesh
+ - key: picks.jamie_barton.bio
+ t: Full Stack Developer & Educator
+ - key: picks.jamie_barton.description
+ t: |
+ More and more people are looking for solutions to bridge the
+ gap between all of their services. Mesh lets you do that with GraphQL,
+ and non-GraphQL services.
+
+ - key: picks.tanmai_gopal.name
+ t: Streaming over GraphQL Subscriptions
+ - key: picks.tanmai_gopal.bio
+ t: CEO & co-founder at Hasura
+ - key: picks.tanmai_gopal.description
+ t: |
+ Modern APIs need to handle an increasing volume of data,
+ or fast-moving data that is a stream.
+ Could we use GraphQL subscriptions as a streaming API?
+
+ - key: picks.tim_suchanek.name
+ t: Benjie Gillam
+ - key: picks.tim_suchanek.bio
+ t: Software Engineer and Entrepreneur
+ - key: picks.tim_suchanek.description
+ t: |
+ Benjie is one of the main people pushing GraphQL forward.
+ His engagement in the WG, TSC, and various foundation initiatives is second to none.
+
+ - key: picks.uri_goldshtein.name
+ t: Pothos GraphQL
+ - key: picks.uri_goldshtein.bio
+ t: Founder of The Guild
+ - key: picks.uri_goldshtein.description
+ t: |
+ Code-first, TS schema builder. Easy to use yet powerful, plugin based and very well maintained.
+ If you go code first, this is the one to choose.
+
+ - key: picks.benjie_gillam.name
+ t: SpecNews Podcast
+ - key: picks.benjie_gillam.bio
+ t: Community-funded OSS maintainer
+ - key: picks.benjie_gillam.description
+ t: |
+ Latest activities from the GraphQL Working Group summarised in just 5-10 minutes per month.
+ Cutting edge GraphQL knowledge with minimal effort!
+
+ - key: picks.xxxx.name
+ t:
+ - key: picks.xxxx.bio
+ t:
+ - key: picks.xxxx.description
+ t: |
+ ###########################################################################
+ # Sponsors
+ ###########################################################################
+
+ - key: sponsors.nijibox.description
+ t: >
+ One-stop support for UX design, creativity, and development.
+
+ - key: sponsors.frontendmasters.description
+ t: >
+ Advance your skills with in-depth, modern front-end engineering courses.
+
+ - key: sponsors.nhost.description
+ t: >
+ Nhost is an open source Firebase alternative with GraphQL.
+
+ - key: sponsors.apollo.description
+ t: >
+ Apollo's supergraph empowers product and engineering teams to quickly create incredible experiences for their customers.
+
+ - key: sponsors.the_guild.description
+ t: >
+ The Guild's open-source tools and ecosystem provides everything you need for evolving your APIs.
+
+ - key: sponsors.hasura.description
+ t: >
+ Run Hasura locally or in the cloud, and connect it to your new or existing databases to instantly get a production-grade GraphQL API.
+
+ - key: sponsors.graphql_wtf.description
+ t: >
+ Learn something new with GraphQL, every week. Get new episodes directly to your inbox.
+
+ - key: sponsors.grafbase.description
+ t: >
+ Instant serverless GraphQL backends. Grafbase provides the best developer experience to deploy GraphQL APIs.
+
+ ###########################################################################
+ # FAQ/About
+ ###########################################################################
+
+ - key: about.content
+ t: >
+ The 2022 State of GraphQL survey ran from June 15, 2022 to July 15, 2022, and collected 3,094 responses. The survey is primarily run by me, [Sacha Greif](https://sachagreif.com/), with help from a team of open-source contributors and consultants.
+
+ ### Survey Goals
+
+ This survey, along with the [State of CSS](https://stateofcss.com/) and [State of JS](https://stateofjs.com/) surveys, was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.
+
+
+ Because of the relatively small sample size, this survey should be taken as a **snapshot of a subset of developers**, and is not meant to speak for the entire GraphQL ecosystem.
+
+
+ The survey is also **not affiliated with GraphQL or Facebook**.
+
+ ### Survey Design
+
+ The survey was designed collaboratively, with an open feedback period where the survey contents were discussed on GitHub ([1](https://github.com/Devographics/Monorepo/issues/86), [2](https://github.com/Devographics/Monorepo/issues/90)). All survey questions were optional.
+
+ ### Survey Audience
+
+ The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily inbound from social media traffic.
+
+ ### Representativeness & Inclusivity
+
+ While we believe it's important to give a voice to every community, the reality is that an open survey like this one will always struggle to properly represent everybody, especially when operating through systems that already carry their own inherent biases.
+
+
+ In order to counter-balance this, we are implementing three distinct strategies:
+
+
+ - **Outreach**: we always try to reach out to different organizations (such as BIPOC- or LGBTQ-focused organizations, or online teaching platforms) to try and diversify our own audience.
+
+ - **Data Analysis**: through features like facets and variants, we're always trying to make it easier to surface the voices of any demographic segment, no matter how minoritized it might be in our data.
+
+ - **Barrier Lowering**: making the survey too long, inaccessible, slow to load, English-only, etc. can all contribute to imposing an "effort tax" that cuts off the parts of the community that can't afford to pay it. Fixing these issues can lower the barrier to entry and in the process make our audience more diverse.
+
+
+ ### Project Funding
+
+ Funding from this project comes from a variety of sources:
+
+
+ - **Chart Sponsorships**: members of the community can donate to the survey in exchange for having their name featured in the report.
+
+ - **Sponsored Links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).
+
+ - **Other Funding**: the companies listed in the "Our Partners" section on the [introduction page](/introduction) have also contributed financially or otherwise.
+
+
+ Sponsors have no say over the survey contents or the way the results are presented, and sponsorships are only decided once all data has already been collected.
+
+ ### Technical Overview
+
+ You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb).
+
+
+ - **Data collection**: custom [Vulcan.js](http://vulcanjs.org/) app.
+
+ - **Data storage/processing**: MongoDB & MongoDB Aggregations.
+
+ - **Data API**: Node.js GraphQL API.
+
+ - **Results Site**: [Gatsby](https://www.gatsbyjs.com/) React app.
+
+ - **Data Visualizations**: [Nivo](https://nivo.rocks/) React dataviz library.
+
+ - **Type**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).
diff --git a/homepage.yml b/homepage.yml
index 6c34aff..136ebc6 100644
--- a/homepage.yml
+++ b/homepage.yml
@@ -17,36 +17,70 @@ translations:
- key: homepage.previous_years
t: 'Korábbi évek:'
- - key: homepage.intro
- t: >
+ - key: homepage.take_survey
+ t: Take Survey
## A CSS minden korábbinál gyorsabban fejlődik.
- Flexbox, Grid, Multi-Column… Az új paradigmákról, mint a CSS-in-JS nem is beszélve.
+ - key: homepage.view_results
+ t: View Results
- Így, a [State Of JavaScript](https://stateofjs.com) felmérés sikerén felbuzdulva, úgy döntöttünk,
- hogy a stílusok és kiválasztók világában is megpróbáljuk felkutatni a trendeket... illetve megpróbáljuk áthidalni
- az egyre növekvő "Nagy front-end szakadékot”!
+ - key: homepage.results_coming_soon
+ t: Results Coming Soon…
- - key: homepage.take_survey
- t: A felmérés kitöltése
+ - key: share.help_spread
+ t: Help Spread the Word!
- - key: homepage.view_results
- t: 2019-es eredmények megtekintése
+ - key: homepage.other_surveys
+ t: "Other Surveys:"
- - key: share.help_spread
- t: Vidd hírünket!
+ - key: homepage.survey_open_now
+ t: Currently Open
+
+ - key: homepage.survey_preview
+ t: Preview Survey
+ - key: homepage.most_recent_survey
+ t: Most Recent
+
+ - key: homepage.current_survey
+ t: Current Survey
+
+ - key: homepage.past_surveys
+ t: Past Surveys
+
+ - key: homepage.view_questions
+ t: View Questions
+
+ - key: homepage.preview_questions
+ t: Preview Questions
+
+ # newsletter
- key: newsletter.stay_tuned
t: Maradj kapcsolatban
- key: newsletter.leave_your_email
t: Add meg az email címed és értesítünk a következő felmérésről.
+ - key: newsletter.email
+ t: Your Email
+ - key: newsletter.submit
+ t: Notify Me
+
+ # languages
+ - key: languages.available_languages
+ t: "Available languages:"
+ - key: languages.help_us_translate
+ t: Help us translate the survey in your language →
+
+ # partners
+ - key: homepage.with_support_from
+ aliasFor: sponsors.with_support_from
- - key: author.sacha.bio
- t: >
- A [Sidebar](http://sidebar.io) napi hírlevél valamint a
- [VulcanJS](http://vulcanjs.org) – egy React+GraphQL alapú nyílt forráskódú keretrendszer – készítője.
+ # footer
+ - key: homepage.made_by_devographics
+ aliasFor: general.made_by_devographics
+ - key: homepage.netlify_link
+ aliasFor: general.netlify_link
- - key: author.raphael.bio
- t: >
- A [Nivo](http://nivo.rocks/) JavaScript alapú adatvizualizációs, valamint
- a [Mozaik](http://mozaik.rocks/) – a csodaszép dashboard szerkesztő – készítője.
+ - key: homepage.join_discord
+ aliasFor: general.join_discord
+ - key: homepage.astro_link
+ t: Powered by [Astro](https://astro.build/)
diff --git a/how_to_help.yml b/how_to_help.yml
new file mode 100644
index 0000000..caa5495
--- /dev/null
+++ b/how_to_help.yml
@@ -0,0 +1,86 @@
+# NOTE: not ready for translation currently
+locale: en-US
+translations:
+
+ - key: how_to_help.content
+ t: >
+ Although the State of JavaScript and CSS do earn some revenue, they still rely primarily on volunteer work. If you'd like to join the project and help out, here are a few things we always need help with.
+
+ ### Translation
+
+ The surveys are now translated in 20+ languages, but a lot of the translations are incomplete or out of date. If you'd like to help, [join our Discord](https://discord.gg/tuWRUWVyJs) and give your GitHub username in the **#translations** channel.
+
+ ### Outreach
+
+ It's no secret that audiences for developer surveys in general tend to skew male, white, and U.S.-based. If you'd like to help us balance things out a bit, we could definitely use your help!
+
+ Outreach efforts include things like reaching out to organizations focused on helping minoritized populations negotiate the tech world, submitting links to the survey to various online communities, emailing blogs or magazines about the survey, and generally trying to diversify the survey's audience. If you'd like to help, [join our Discord](https://discord.gg/tuWRUWVyJs)'s **#outreach** channel (feel free to mute every other channel if you'd like).
+
+ Specifically, we'd love some help reaching out to organizations focused on:
+
+
+ - BIPOC developers
+
+
+ - LGBTQ+ developers
+
+
+ - Women developers
+
+
+ - Developers with disabilities
+
+
+ - Developers in under-represented countries (China, Brazil, India, Japan, etc.)
+
+
+ ### Writing & Analysis
+
+ Even though we try and surface interesting insights every year, we know there is no way to cover everything in a single report. If you're a data scientist or just curious about tech trends, we would love to see your own spin on our data! This can be a great way to broaden the dialog around the survey, especially when it comes to highlighting under-represented communities like the ones mentioned above.
+
+ You can either use the chart customization feature (pencil icon next to some charts) and our [public GraphQL API](https://api.stateofjs.com/) to create new visualizations, or [join our Discord](https://discord.gg/tuWRUWVyJs) and get in touch to ask for the full JSON dataset.
+
+ ### Coding
+
+ The entirety of our codebases are open-source, and we welcome contributions. I suggest first [getting familiar with how the surveys are run](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb), and then [dropping by the Discord](https://discord.gg/tuWRUWVyJs) to let me know what you'd like to work on.
+
+ ### Deals & Partnerships
+
+ In the future, we want to explore providing deals or discounts on products to our survey respondents as a way of rewarding survey participants and incentivizing new audiences to take part in the survey,
+
+ ### Financial Support
+
+ #### Grants & Funding
+
+ Of course, another way to help is to simply provide funding. For example, thanks to a grant received from Google we've been able to hire an expert to do a full accessibility audit of the project.
+
+ #### Chart Sponsorships
+
+ If you'd like to support the survey on a smaller scale, you can also now
+
+ #### Recommended Resources
+
+ If you create content relevant to our audience, you can also purchase one of the "Recommended Resources" links displayed at the bottom of each page. We also make these spots available for free for
+
+ Recommended Resources
+ Chart sponsorships
+ Discounts
+ Other partnerships
+
+ #### A Note About Paid Work
+
+ I have talked mainly about volunteer work here but we also have a small budget to pay consultants or experts, and are working on finding partners to subsidize more work. More specifically, we prefer paying for tasks that:
+
+
+ - Are **limited in scope**, since the budget will probably be limited too.
+
+
+ - Require **special expertise** that would not be easily provided by volunteers.
+
+
+ - Are **self-contained** and don't require too much follow-up work since we might not have time to do it.
+
+
+ Good examples include: illustrations & branding work, usability or accessibility audits, data visualization work, outreach work, etc.
+
+ So although we can't promise much, if you'd like to contribute to the project but can't afford to work on a volunteer basis, don't hesitate to [join the Discord](https://discord.gg/tuWRUWVyJs) and get in touch!
\ No newline at end of file
diff --git a/legacy.yml b/legacy.yml
new file mode 100644
index 0000000..89b9ba6
--- /dev/null
+++ b/legacy.yml
@@ -0,0 +1,1091 @@
+locale: en-US
+translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ # homepage
+ - key: general.why_create_account
+ t: Why do I need to create an account?
+ - key: general.create_account_reasons
+ t: >
+ We ask you to create an account in order to:
+
+ - Avoid duplicate responses
+
+ - Give you access to your data
+
+ - Save your session as you go
+
+ - Notify you when results are live
+ - key: general.survey_closed_detailed
+ t: >
+ Sorry, the survey is now closed! You can still review your data but you won't be able to modify it.
+ - key: general.survey_read_only
+ t: >
+ You are currently viewing this survey in read-only mode.
+ - key: general.survey_preview
+ t: >
+ This survey is in preview mode. Its questions are subject to change, and all
+ inputted data will be deleted when the actual survey starts.
+
+ - key: general.survey_read_only_back
+ t: >
+ Go back to the main survey page to start or resume a session.
+ - key: general.take_survey
+ t: Take the {name} survey
+
+ # surveys
+ - key: general.open_surveys
+ t: Open Surveys
+ - key: general.no_open_surveys
+ t: No surveys are currently open.
+ - key: general.closed_surveys
+ t: Closed Surveys
+ - key: general.no_closed_surveys
+ t: No surveys are currently closed.
+ - key: general.preview_surveys
+ t: Preview Surveys
+ - key: general.no_preview_surveys
+ t: No surveys available to preview.
+ - key: general.start_survey
+ t: Start Survey »
+ - key: general.continue_survey
+ t: Continue Survey »
+ - key: general.review_survey
+ t: Review Survey »
+ - key: general.preview_survey
+ t: Preview Survey »
+ - key: general.finish_survey
+ t: Finish Survey
+ - key: general.next_section
+ t: Next section
+ - key: general.previous_section
+ t: Previous section
+ - key: general.survey_closed
+ t: This survey is now closed.
+ - key: general.survey_results
+ t: View Survey Results »
+ - key: general.surveys_available_languages
+ t: "Surveys available in:"
+ - key: general.help_us_translate
+ t: Help us translate the surveys »
+ - key: general.translators
+ t: Translators
+ - key: general.translation_help
+ t: Translation Help
+ - key: general.newly_added
+ t: Newly added this year
+ - key: general.new
+ t: New
+ - key: general.devographics_banner
+ t: Devographics is the new name of the collective running the State of JavaScript, CSS, and GraphQL surveys.
+
+ # credits
+ - key: credits.thanks
+ t: Special Thanks
+ - key: credits.contributors
+ t: Contributors
+ - key: credits.contributors.description
+ t: Special thanks to the following people for helping us design the survey.
+ - key: credits.accessibility
+ t: Accessibility Consulting
+ - key: credits.survey_design
+ t: Survey Design
+ - key: credits.logo_design
+ t: Logo Design
+ - key: credits.mobile_testing
+ t: Mobile Testing
+ - key: credits.data_visualizations
+ t: Data Visualizations
+ - key: credits.repo_architecture
+ t: Repo Architecture
+ - key: credits.code_refactoring
+ t: Code Refactoring
+ - key: credits.data_processing
+ t: Data Processing
+
+ # support
+ - key: general.support_from
+ t: With Support From
+
+ # footer
+ - key: general.privacy_policy
+ t: Privacy Policy
+ - key: general.leave_issue
+ t: Questions? Found a bug? Leave an issue.
+ - key: general.emoji_icons
+ t: Emoji icons by Icons8
+
+ # navigation
+ - key: general.table_of_contents
+ t: Table of Contents
+ - key: general.all_questions_optional
+ t: >
+ Note: all questions are optional, reaching 100% completion is not required.
+ - key: general.data_is_saved
+ t: Your data is saved whenever you navigate to the previous or next section.
+ - key: general.close_nav
+ t: Close menu
+ - key: general.open_nav
+ t: Open menu
+ - key: general.more_actions
+ t: More actions
+ - key: general.skip_to_content
+ t: Skip to content
+
+ # thanks
+ - key: general.back
+ t: Back
+ - key: general.thanks
+ t: >
+ Thanks for filling out the survey! Your data is saved.
+
+
+ Also, you can help us get the word out by sharing this survey. Every bit counts, and it'll help make our data even
+ more representative:
+ - key: thanks.learn_more_about
+ t: "Some of the features you might want to learn more about:"
+ - key: thanks.knowledge_score
+ t: Knowledge Score
+ - key: thanks.score_explanation
+ t: >
+ You’ve heard or used {known} out of
+ {total} features mentioned in the survey, which
+ puts you in the top {knowledgeRankingFromTop}%
+ of all respondents.
+ - key: thanks.share_on_twitter
+ t: Share on Twitter
+ - key: thanks.share_score_message
+ t: >
+ I got a {score}% knowledge score on this year's #{hashtag} survey! Take the survey here: {shareUrl}
+ # share
+ - key: general.share_subject
+ t: >
+ {surveyName} survey
+ - key: general.share_text
+ t: >
+ This year's {surveyName} survey is now open! {link}
+
+ # forms
+ - key: forms.select_option
+ t: Select option
+ - key: forms.clear_field
+ t: Clear question
+
+ # partners
+ - key: sponsors.our_partners
+ t: Our Partners
+ - key: sponsors.become_partner
+ t: Become a partner
+
+ # 404
+ - key: notfound.title
+ t: 404 Not Found
+ - key: notfound.description
+ t: Sorry, we couldn't find what you were looking for.
+
+ # other
+ - key: general.join_discord
+ t: Join us on Discord.
+ - key: general.translator_mode
+ t: Press option/alt to enable translator mode.
+ - key: general.charts_nivo
+ t: Charts built with Nivo.
+ - key: general.made_by_devographics
+ t: Made by Devographics
+
+ ###########################################################################
+ # Nav
+ ###########################################################################
+
+ - key: nav.surveys
+ t: Surveys
+ - key: nav.account
+ t: Account
+
+ ###########################################################################
+ # Sections
+ ###########################################################################
+
+ - key: sections.user_info.title
+ t: About You
+ - key: sections.user_info.description
+ t: Let's get to know the real you.
+
+ - key: sections.features.title
+ t: Features
+ - key: sections.features.description
+ t: Syntax, keywords, and other language features.
+
+ - key: sections.resources.title
+ t: Resources
+ - key: sections.resources.description
+ t: What {topic} resources do you consult?
+
+ - key: sections.opinions.title
+ t: Opinions
+ - key: sections.opinions.description
+ t: How do you feel about the state of {topic}?
+
+ - key: sections.other_tools.title
+ t: Other Tools
+ - key: sections.other_tools.description
+ t: For these tools & technologies, just check the ones that you use regularly.
+
+ - key: sections.report.title
+ t: Trend Report
+
+ ###########################################################################
+ # Options
+ ###########################################################################
+
+ # features
+ - key: options.features.never_heard
+ t: 🤷 Never heard of it/Not sure what it is
+ - key: options.features.heard
+ t: ✅ Know what it is, but haven't used it
+ - key: options.features.used
+ t: 👍 I've used it
+
+ # features (no emoji)
+ - key: options.features.never_heard.label
+ t: Never heard of it/Not sure what it is
+ - key: options.features.heard.label
+ t: Know what it is, but haven't used it
+ - key: options.features.used.label
+ t: I've used it
+
+ # features (short versions)
+ # - key: options.features.never_heard.short
+ # t: Never heard of it
+ # - key: options.features.heard.short
+ # t: Know about it
+ # - key: options.features.used.short
+ # t: Have used it
+
+ # patterns
+ - key: options.patterns.use_never
+ t: Almost always avoid
+ - key: options.patterns.use_sparingly
+ t: Use sparingly
+ - key: options.patterns.use_neutral
+ t: Neutral
+ - key: options.patterns.use_frequently
+ t: Use frequently
+ - key: options.patterns.use_always
+ t: Use as much as I can
+
+ # tools experience
+ - key: options.tools.never_heard
+ t: 🤷 Never heard of it/Not sure what it is
+ - key: options.tools.interested
+ t: ✅ Heard of it > Would like to learn
+ - key: options.tools.not_interested
+ t: 🚫 Heard of it > Not interested
+ - key: options.tools.would_use
+ t: 👍 Used it > Would use again
+ - key: options.tools.would_not_use
+ t: 👎 Used it > Would not use again
+
+ # tools experience (no emoji)
+ - key: options.tools.never_heard.legend
+ t: Never heard of it/Not sure what it is
+ - key: options.tools.interested.legend
+ t: Heard of it > Would like to learn
+ - key: options.tools.not_interested.legend
+ t: Heard of it > Not interested
+ - key: options.tools.would_use.legend
+ t: Used it > Would use again
+ - key: options.tools.would_not_use.legend
+ t: Used it > Would not use again
+
+ # tools experience (short versions)
+ - key: options.tools.never_heard.short
+ t: Never heard
+ - key: options.tools.interested.short
+ t: Interested
+ - key: options.tools.not_interested.short
+ t: Not interested
+ - key: options.tools.would_use.short
+ t: Would use again
+ - key: options.tools.would_not_use.short
+ t: Would not use
+
+ # happiness
+ - key: options.happiness.0
+ t: Very Unhappy
+ - key: options.happiness.1
+ t: Unhappy
+ - key: options.happiness.2
+ t: Neutral
+ - key: options.happiness.3
+ t: Happy
+ - key: options.happiness.4
+ t: Very Happy
+
+ # happiness (short version)
+ - key: options.happiness.0.short
+ t: Very Unhappy
+ - key: options.happiness.1.short
+ t: Unhappy
+ - key: options.happiness.2.short
+ t: Neutral
+ - key: options.happiness.3.short
+ t: Happy
+ - key: options.happiness.4.short
+ t: Very Happy
+
+ # opinions
+ - key: options.opinions.0
+ t: Disagree Strongly
+ - key: options.opinions.1
+ t: Disagree
+ - key: options.opinions.2
+ t: Neutral
+ - key: options.opinions.3
+ t: Agree
+ - key: options.opinions.4
+ t: Agree Strongly
+
+ # age
+ - key: options.age.range_less_than_10
+ t: 10 years old or under
+ - key: options.age.range_10_18
+ t: 11-18 years old
+ - key: options.age.range_18_24
+ t: 19-24 years old
+ - key: options.age.range_25_34
+ t: 25-34 years old
+ - key: options.age.range_35_44
+ t: 35-44 years old
+ - key: options.age.range_45_54
+ t: 45-54 years old
+ - key: options.age.range_55_64
+ t: 55-64 years old
+ - key: options.age.range_more_than_65
+ t: 65 years or older
+
+ # age (short versions)
+ - key: options.age.range_less_than_10.short
+ t: "<=10"
+ - key: options.age.range_10_18.short
+ t: 11-18
+ - key: options.age.range_18_24.short
+ t: 19-24
+ - key: options.age.range_25_34.short
+ t: 25-34
+ - key: options.age.range_35_44.short
+ t: 35-44
+ - key: options.age.range_45_54.short
+ t: 45-54
+ - key: options.age.range_55_64.short
+ t: 55-64
+ - key: options.age.range_more_than_65.short
+ t: ">65"
+
+ # years of experience
+ - key: options.years_of_experience.range_less_than_1
+ t: Less than one year
+ - key: options.years_of_experience.range_1_2
+ t: 1 to 2 years
+ - key: options.years_of_experience.range_2_5
+ t: 3 to 5 years
+ - key: options.years_of_experience.range_5_10
+ t: 6 to 10 years
+ - key: options.years_of_experience.range_10_20
+ t: 11 to 20 years
+ - key: options.years_of_experience.range_more_than_20
+ t: More than 20 years
+
+ # years of experience (short versions)
+ - key: options.years_of_experience.range_less_than_1.short
+ t: "<1 years"
+ - key: options.years_of_experience.range_1_2.short
+ t: 1-2 years
+ - key: options.years_of_experience.range_2_5.short
+ t: 3-5 years
+ - key: options.years_of_experience.range_5_10.short
+ t: 6-10 years
+ - key: options.years_of_experience.range_10_20.short
+ t: 11-20 years
+ - key: options.years_of_experience.range_more_than_20.short
+ t: ">20 years"
+
+ # company size
+ - key: options.company_size.range_1
+ t: One employee
+ - key: options.company_size.range_1_5
+ t: 2 to 5 employees
+ - key: options.company_size.range_5_10
+ t: 6 to 10 employees
+ - key: options.company_size.range_10_20
+ t: 11 to 20 employees
+ - key: options.company_size.range_20_50
+ t: 21 to 50 employees
+ - key: options.company_size.range_50_100
+ t: 51 to 100 employees
+ - key: options.company_size.range_100_1000
+ t: 101 to 1000 employees
+ - key: options.company_size.range_more_than_1000
+ t: More than 1000 employees
+
+ # company size (short versions)
+ - key: options.company_size.range_1.short
+ t: 1
+ - key: options.company_size.range_1_5.short
+ t: 1-5
+ - key: options.company_size.range_5_10.short
+ t: 6-10
+ - key: options.company_size.range_10_20.short
+ t: 11-20
+ - key: options.company_size.range_20_50.short
+ t: 21-50
+ - key: options.company_size.range_50_100.short
+ t: 51-100
+ - key: options.company_size.range_100_1000.short
+ t: 101-1000
+ - key: options.company_size.range_more_than_1000.short
+ t: ">1000"
+
+ # salary
+ - key: options.yearly_salary.range_work_for_free
+ t: I work for free
+ - key: options.yearly_salary.range_0_10
+ t: $0k-$10k
+ - key: options.yearly_salary.range_10_30
+ t: $10k-$30k
+ - key: options.yearly_salary.range_30_50
+ t: $30k-$50k
+ - key: options.yearly_salary.range_50_100
+ t: $50k-$100k
+ - key: options.yearly_salary.range_100_200
+ t: $100k-$200k
+ - key: options.yearly_salary.range_more_than_200
+ t: More than $200k
+
+ # salary (short versions)
+ - key: options.yearly_salary.range_work_for_free.short
+ t: $0
+ - key: options.yearly_salary.range_0_10.short
+ t: $0-$10k
+ - key: options.yearly_salary.range_10_30.short
+ t: $10k-$30k
+ - key: options.yearly_salary.range_30_50.short
+ t: $30k-$50k
+ - key: options.yearly_salary.range_50_100.short
+ t: $50k-$100k
+ - key: options.yearly_salary.range_100_200.short
+ t: $100k-$200k
+ - key: options.yearly_salary.range_more_than_200.short
+ t: ">$200k"
+
+ # Proficiency (generic versions)
+ - key: options.proficiency.0
+ t: None
+ - key: options.proficiency.1
+ t: Beginner
+ - key: options.proficiency.2
+ t: Intermediate
+ - key: options.proficiency.3
+ t: Advanced
+ - key: options.proficiency.4
+ t: Expert
+
+ # Gender
+
+ - key: options.gender.female
+ t: Woman
+ - key: options.gender.male
+ t: Man
+ - key: options.gender.non_binary
+ t: Non-Binary or Gender Non-Conforming
+ - key: options.gender.questioning
+ t: Questioning
+ - key: options.gender.prefer_not_to_say
+ t: Prefer Not to Say
+ - key: options.gender.not_listed
+ t: Not Listed
+
+ # Gender (short)
+
+ - key: options.gender.female.short
+ t: Woman
+ - key: options.gender.male.short
+ t: Man
+ - key: options.gender.non_binary.short
+ t: Non-Binary or GNC
+ - key: options.gender.questioning.short
+ t: Questioning
+ - key: options.gender.prefer_not_to_say.short
+ t: Prefer Not to Say
+ - key: options.gender.not_listed.short
+ t: Not Listed
+
+ # Race & Ethnicity
+
+ - key: options.race_ethnicity.white_european
+ t: White
+ - key: options.race_ethnicity.south_asian
+ t: South Asian
+ - key: options.race_ethnicity.south_east_asian
+ t: South East Asian
+ - key: options.race_ethnicity.hispanic_latin
+ t: Hispanic or Latino/Latina/Latinx
+ - key: options.race_ethnicity.east_asian
+ t: East Asian
+ - key: options.race_ethnicity.middle_eastern
+ t: Middle Eastern
+ - key: options.race_ethnicity.black_african
+ t: Black or of African descent
+ - key: options.race_ethnicity.multiracial
+ t: Multiracial
+ - key: options.race_ethnicity.biracial
+ t: Biracial
+ - key: options.race_ethnicity.native_american_islander_australian
+ t: Native American, Pacific Islander, or Indigenous Australian
+ - key: options.race_ethnicity.not_listed
+ t: Not listed
+
+ # Race & Ethnicity (short)
+
+ - key: options.race_ethnicity.white_european.short
+ t: White
+ - key: options.race_ethnicity.south_asian.short
+ t: South Asian
+ - key: options.race_ethnicity.south_east_asian.short
+ t: SE Asian
+ - key: options.race_ethnicity.hispanic_latin.short
+ t: Hispanic/Latin
+ - key: options.race_ethnicity.east_asian.short
+ t: East Asian
+ - key: options.race_ethnicity.middle_eastern.short
+ t: Middle Eastern
+ - key: options.race_ethnicity.black_african.short
+ t: Black/African Descent
+ - key: options.race_ethnicity.multiracial.short
+ t: Multiracial
+ - key: options.race_ethnicity.biracial.short
+ t: Biracial
+ - key: options.race_ethnicity.native_american_islander_australian.short
+ t: Native American/Pacific Islander/Indigenous Australian
+ - key: options.race_ethnicity.not_listed.short
+ t: Not listed
+
+ # Disability Status
+ - key: options.disability_status.visual_impairments
+ t: >
+ Visual impairments (such as: blindness, color blindness, etc.)
+ - key: options.disability_status.hearing_impairments
+ t: >
+ Hearing impairments (such as: deafness, tinnitus, etc.)
+ - key: options.disability_status.mobility_impairments
+ t: >
+ Mobility impairments (such as: arthritis, carpal tunnel, etc.)
+ - key: options.disability_status.cognitive_impairments
+ t: >
+ Cognitive impairments (such as: anxiety, dyslexia, etc.)
+ - key: options.disability_status.not_listed
+ t: >
+ Not Listed
+
+ # Disability Status (short)
+ - key: options.disability_status.visual_impairments
+ t: >
+ Visual impairments
+ - key: options.disability_status.hearing_impairments
+ t: >
+ Hearing impairments
+ - key: options.disability_status.mobility_impairments
+ t: >
+ Mobility impairments
+ - key: options.disability_status.cognitive_impairments
+ t: >
+ Cognitive impairments
+ - key: options.disability_status.not_listed
+ t: >
+ Not Listed
+
+ # Form Factors
+ - key: options.form_factors.desktop
+ t: Desktop
+ - key: options.form_factors.keyboard_only
+ t: Desktop with keyboard only
+ - key: options.form_factors.smartphone
+ t: Smartphone
+ - key: options.form_factors.feature_phone
+ t: Feature phone
+ - key: options.form_factors.tablet
+ t: Tablet
+ - key: options.form_factors.smart_watch
+ t: Smartwatch
+ - key: options.form_factors.tv
+ t: TV
+ - key: options.form_factors.gaming_console
+ t: Gaming console
+ - key: options.form_factors.screen_reader
+ t: Screen reader
+ - key: options.form_factors.print
+ t: Print
+ - key: options.form_factors.testing_tools
+ t: Testing Tools (Axe, Lighthouse, etc.)
+ - key: options.form_factors.vision_simulator
+ t: Altered Vision Simulator (color blindness, etc.)
+
+ # Industry Sector
+ - key: options.industry_sector.ecommerce
+ t: Ecommerce & Retail
+ - key: options.industry_sector.news_media
+ t: News, Media, & Blogging
+ - key: options.industry_sector.healthcare
+ t: Healthcare
+ - key: options.industry_sector.finance
+ t: Finance
+ - key: options.industry_sector.programming_tools
+ t: Programming & Technical Tools
+ - key: options.industry_sector.socialmedia
+ t: Social Media
+ - key: options.industry_sector.marketing_tools
+ t: Marketing/Sales/Analytics Tools
+ - key: options.industry_sector.education
+ t: Education
+ - key: options.industry_sector.real_estate
+ t: Real Estate
+ - key: options.industry_sector.government
+ t: Government
+ - key: options.industry_sector.entertainment
+ t: Entertainment
+ - key: options.industry_sector.consulting
+ t: Consulting & Services
+ - key: options.industry_sector.travel
+ t: Travel
+ - key: options.industry_sector.insurance
+ t: Insurance
+ - key: options.industry_sector.logistics
+ t: Logistics
+ - key: options.industry_sector.energy
+ t: Energy
+ - key: options.industry_sector.telecommunications
+ t: Telecommunications
+ - key: options.industry_sector.student
+ t: Student
+ - key: options.industry_sector.hospitality
+ t: Hospitality
+ - key: options.industry_sector.cyber_security
+ t: Cyber Security
+ - key: options.industry_sector.construction
+ t: Construction
+ - key: options.industry_sector.automotive
+ t: Automotive
+ - key: options.industry_sector.agriculture
+ t: Agriculture
+ - key: options.industry_sector.transport
+ t: Transport
+ - key: options.industry_sector.manufacturing
+ t: Manufacturing
+
+ # tool evaluation
+ - key: options.tool_evaluation.learning_curve_documentation
+ t: Documentation
+ - key: options.tool_evaluation.learning_curve_documentation.description
+ t: Is it easy to learn and/or well-documented?
+ - key: options.tool_evaluation.momentum_popularity
+ t: Hype & Momentum
+ - key: options.tool_evaluation.momentum_popularity.description
+ t: Is it currently generating a lot of buzz?
+ - key: options.tool_evaluation.user_base_size
+ t: User Base Size
+ - key: options.tool_evaluation.user_base_size.description
+ t: Is it a well-established option with a long track record?
+ - key: options.tool_evaluation.developer_experience_tooling
+ t: Developer Experience
+ - key: options.tool_evaluation.developer_experience_tooling.description
+ t: Does it have good developer tools, a large plugin ecosystem, etc.?
+ - key: options.tool_evaluation.performance_user_experience
+ t: User Experience
+ - key: options.tool_evaluation.performance_user_experience.description
+ t: Does it help you create smooth, performant user experiences?
+ - key: options.tool_evaluation.creator_team
+ t: Creator & Team
+ - key: options.tool_evaluation.creator_team.description
+ t: Is it backed by a well-known, well-funded, or experienced team?
+ - key: options.tool_evaluation.accessibility_features
+ t: Accessibility Features
+ - key: options.tool_evaluation.accessibility_features.description
+ t: Is it good at creating accessible experiences for all users?
+ - key: options.tool_evaluation.community_inclusivity
+ t: Community & Inclusivity
+ - key: options.tool_evaluation.community_inclusivity.description
+ t: Does it have a welcoming, vibrant community built around it?
+
+ # accessibility features
+ - key: options.accessibility_features.keyboard_navigation
+ t: Keyboard navigation
+ - key: options.accessibility_features.compliant_contrast
+ t: WCAG-compliant contrast
+ - key: options.accessibility_features.focus_indicators
+ t: Focus indicators
+ - key: options.accessibility_features.skip_to_content_link
+ t: Skip-to-content link
+ - key: options.accessibility_features.color_themes
+ t: Color themes (dark mode, high-contrast mode, etc.)
+ - key: options.accessibility_features.prefers_reduced_motion
+ t: Prefers-reduced-motion
+ - key: options.accessibility_features.alt_text
+ t: Alt texts
+ - key: options.accessibility_features.semantic_markup
+ t: Semantic markup
+ - key: options.accessibility_features.aria_attributes
+ t: ARIA HTML attributes
+
+ # learning methods
+ - key: options.first_steps.books
+ t: Books
+ - key: options.first_steps.videos
+ t: Videos & screencasts
+ - key: options.first_steps.school
+ t: School & higher education
+ - key: options.first_steps.courses_free
+ t: Online courses (free)
+ - key: options.first_steps.courses_paid
+ t: Online courses (paid)
+ - key: options.first_steps.podcasts
+ t: Podcasts
+ - key: options.first_steps.bootcamp
+ t: Coding bootcamp
+ - key: options.first_steps.on_the_job
+ t: On-the-job training
+ - key: options.first_steps.self_directed
+ t: Self-directed learning (Google, Stack Overflow, etc.)
+ - key: options.first_steps.mentoring
+ t: Mentoring
+
+ # degree
+ - key: options.higher_education_degree.no_degree
+ t: No
+ - key: options.higher_education_degree.yes_related
+ t: Yes, in a field related to my current profession
+ - key: options.higher_education_degree.yes_unrelated
+ t: Yes, but in a field unrelated to my current profession
+
+ # degree (short versions)
+ - key: options.higher_education_degree.no_degree.short
+ t: No
+ - key: options.higher_education_degree.yes_related.short
+ t: Yes, related field
+ - key: options.higher_education_degree.yes_unrelated.short
+ t: Yes, unrelated field
+
+ # bracket
+ - key: options.bracket.round1
+ t: Round 1 wins
+ - key: options.bracket.round2
+ t: Round 2 wins
+ - key: options.bracket.round3
+ t: Round 3 wins
+ - key: options.bracket.combined
+ t: Combined
+
+ # email_temporary (receive updates?)
+ - key: options.receive_notifications.yes
+ t: Yes, email me when the survey results are published
+
+ ###########################################################################
+ # Tools
+ ###########################################################################
+
+ - key: tools.other_tools
+ t: Other Options
+ - key: tools.other_tools.description
+ t: Other options you use for the current section not mentioned in the list above.
+ - key: tools.happiness
+ t: Overall Happiness
+ - key: tools.happiness.description
+ t: >
+ On a scale of one (very unhappy) to five (very happy), how happy are
+ you with the current overall state of things as it relates to the options listed above?
+
+ ###########################################################################
+ # Demographics (About You/User Info)
+ ###########################################################################
+
+ # age
+ - key: user_info.age
+ t: Age
+ - key: user_info.age.description
+ t: How old are you, in years?
+
+ # years of experience
+ - key: user_info.years_of_experience
+ t: Years of Experience
+ - key: user_info.years_of_experience.description
+ t: How long have you been working or studying in this field, in years?
+
+ # company size
+ - key: user_info.company_size
+ t: Company Size
+ - key: user_info.company_size.description
+ t: How big is your company, in number of employees?
+
+ # salary ranges
+ - key: user_info.yearly_salary
+ t: Yearly Salary
+ - key: user_info.yearly_salary.description
+ t: Your yearly salary in U.S. dollar.
+
+ # job title
+ - key: user_info.job_title
+ t: Job Title
+ - key: user_info.job_title.description
+ t: How do you introduce yourself to others?
+
+ # javascript proficiency
+ - key: user_info.javascript_proficiency
+ t: JavaScript Proficiency
+ - key: user_info.javascript_proficiency.description
+ t: How proficient are you at JavaScript?
+
+ # css proficiency
+ - key: user_info.css_proficiency
+ t: CSS Proficiency
+ - key: user_info.css_proficiency.description
+ t: How proficient are you at CSS?
+
+ # backend proficiency
+ - key: user_info.backend_proficiency
+ t: Back-end Proficiency
+ - key: user_info.backend_proficiency.description
+ t: How proficient are you at back-end development?
+
+ # gender
+ - key: user_info.gender
+ t: Gender
+ - key: user_info.gender.description
+ t: >
+ Which of the following options describes you, if any? Please pick one.
+ - key: user_info.gender.note
+ t: >
+ While we know collecting and publishing diversity data can be a sensitive issue,
+ we do think it's important to obtain this data to help measure and improve
+ the survey's efforts in terms of inclusivity and representativeness.
+
+ # race & ethnicity
+ - key: user_info.race_ethnicity
+ t: Race & Ethnicity
+ - key: user_info.race_ethnicity.description
+ t: >
+ Which of the following options describe you, if any? Please check all that apply.
+ - key: user_info.race_ethnicity.note
+ t: >
+ While we know collecting and publishing diversity data can be a sensitive issue,
+ we do think it's important to obtain this data to help measure and improve
+ the survey's efforts in terms of inclusivity and representativeness.
+ - key: user_info.race_ethnicity.not_allowed
+ t: >
+ In order to comply with local policies, the collection of race or ethnicity data has
+ been disabled for your country or region.
+
+ # disability status
+ - key: user_info.disability_status
+ t: Disability Status
+ - key: user_info.disability_status.description
+ t: >
+ Which of the following disabilities do you experience, if any? Please check all that apply.
+ Note that this can include temporary disabilities or injuries.
+
+ # disability status (other)
+ - key: user_info.disability_status.others
+ t: Other Disabilities
+
+ # other info
+ - key: user_info.how_did_user_find_out_about_the_survey
+ t: How did you find out about this survey?
+ - key: user_info.email
+ t: Your Email
+ - key: user_info.email.description
+ t: >
+ You have filled out the survey anonymously. If you'd like, you can optionally enter your email to be able to access your data later on, and be notified when the survey results are published.
+ - key: user_info.email.note
+ t: >
+ We do not store any personal data, so after you fill in your email address we will use it to generate a unique anonymized identifier and then delete the address itself from our records.
+ - key: user_info.country
+ t: Country or Region
+ - key: user_info.country.description
+ t: Where do you currently reside?
+
+ - key: user_info.github_username
+ t: Your GitHub Username
+ - key: user_info.github_username.description
+ t: >
+ We might use GitHub usernames in the future to look at
+ repos and cross-reference publicly available information.
+
+ - key: user_info.twitter_username
+ t: Your Twitter Username
+ - key: user_info.twitter_username.description
+ t: >
+ We might use Twitter usernames in the future to look at
+ Twitter activity and cross-reference publicly available information
+ (such as the list of people you're following).
+
+ - key: user_info.industry_sector
+ t: Industry Sector
+ - key: user_info.industry_sector.description
+ t: Which industry sector(s) do you work in?
+ - key: user_info.industry_sector.others
+ t: Other Industry Sectors
+ - key: user_info.industry_sector.others.description
+ t: Other industry sector(s) you work in not mentioned above.
+
+ # degree
+ - key: user_info.higher_education_degree
+ t: Higher Education Degree
+ - key: user_info.higher_education_degree.description
+ t: Do you have a higher education degree?
+
+ # email_temporary (receive updates?)
+ - key: user_info.receive_notifications
+ t: Do you want to be notified when the survey results are released?
+ - key: user_info.receive_notifications.note
+ t: >
+ We don't store any private data, so after your email address is sent to our
+ mailing list provider it will be deleted from our own records.
+
+ # how can we improve the survey?
+ - key: user_info.how_can_we_improve
+ t: How could we improve this survey?
+
+ ###########################################################################
+ # Other Tools
+ ###########################################################################
+
+ - key: tools_others.libraries
+ t: Libraries
+ - key: tools_others.libraries.description
+ t: Which libraries do you regularly use?
+ - key: tools_others.libraries.others
+ t: Other Libraries
+ - key: tools_others.libraries.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.text_editors
+ t: Text Editors
+ - key: tools_others.text_editors.description
+ t: Which text editor(s) do you regularly use?
+ - key: tools_others.text_editors.others
+ t: Other Text Editors
+ - key: tools_others.text_editors.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.utilities
+ t: Utilities
+ - key: tools_others.utilities.description
+ t: Which utilities or tools do you regularly use?
+ - key: tools_others.utilities.others
+ t: Other Utilities
+ - key: tools_others.utilities.others.description
+ t: Other utilities (freeform field).
+
+ - key: tools_others.browsers
+ t: Browsers
+ - key: tools_others.browsers.description
+ t: Which browser(s) do you primarily work in during initial development?
+ - key: tools_others.browsers.others
+ t: Other Browsers
+ - key: tools_others.browsers.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.build_tools
+ t: Build Tools
+ - key: tools_others.build_tools.description
+ t: Which build tools do you use?
+ - key: tools_others.build_tools.others
+ t: Other Build Tools
+ - key: tools_others.build_tools.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.non_js_languages
+ t: Non-JavaScript Languages
+ - key: tools_others.non_js_languages.description
+ t: Which other programming languages do you use?
+ - key: tools_others.non_js_languages.others
+ t: Other Languages
+ - key: tools_others.non_js_languages.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.javascript_flavors
+ t: JavaScript Flavors
+ - key: tools_others.javascript_flavors.description
+ t: Languages that compile to JavaScript
+ - key: tools_others.javascript_flavors.others
+ t: Other JavaScript Flavors
+ - key: tools_others.javascript_flavors.others.description
+ t: Other answers (freeform field).
+
+ ###########################################################################
+ # Resources
+ ###########################################################################
+
+ # first steps
+ - key: resources.first_steps
+ t: First Learning Methods
+ - key: resources.first_steps.description
+ t: When first starting out, how did you initially learn coding?
+ - key: resources.first_steps.others
+ t: Other First Learning Methods
+ - key: resources.first_steps.others.description
+ t: Other answers (freeform field).
+
+ # blogs & magazines
+ - key: resources.blogs_news_magazines
+ t: Blogs & Magazines
+ - key: resources.blogs_news_magazines.description
+ t: Which blogs/magazines/etc. do you read?
+ - key: resources.blogs_news_magazines.others
+ t: Other Blogs & Magazines
+ - key: resources.blogs_news_magazines.others.description
+ t: Other answers (freeform field).
+
+ # sites & courses
+ - key: resources.sites_courses
+ t: Sites & Courses
+ - key: resources.sites_courses.description
+ t: Which sites/courses/etc. do you consult?
+ - key: resources.sites_courses.others
+ t: Other Sites & Courses
+ - key: resources.sites_courses.others.description
+ t: Other answers (freeform field).
+
+ # podcasts
+ - key: resources.podcasts
+ t: Podcasts
+ - key: resources.podcasts.description
+ t: Which programming-related podcasts do you listen to?
+ - key: resources.podcasts.others
+ t: Other Podcasts
+ - key: resources.podcasts.others.description
+ t: Other answers (freeform field).
+
+ # people
+ - key: resources.people
+ t: People
+ - key: resources.people.description
+ t: People you read, follow, or just want to highlight.
+ # - key: resources.people.others
+ # t: Other People
+ # - key: resources.people.others.description
+ # t: Other answers (freeform field).
+ - key: resources.people.others
+ t: People
+ - key: resources.people.others.description
+ t: >
+ People you read, follow, or just want to highlight for their work
+ (freeform field, comma-separated names).
+
+ # other surveys
+ - key: resources.other_surveys
+ t: Other Surveys
+ - key: resources.other_surveys.description
+ t: Which other developer surveys do you participate in?
+ - key: resources.other_surveys.others
+ t: Additional surveys not mentioned above
diff --git a/results.yml b/results.yml
index 9b12a42..8c098f7 100644
--- a/results.yml
+++ b/results.yml
@@ -55,12 +55,12 @@ translations:
t: Fizetés alapján
- key: tabs.by_gender
t: Nemenként
-
- ###########################################################################
- # Block
- ###########################################################################
-
- - key: block.data_from
+ - key: tabs.by_race_ethnicity
+ t: By Race & Ethnicity
+ - key: tabs.low_vs_high_income
+ t: Low vs High Income
+ - key: tabs.usa_vs_the_world
+ t: U.S. vs World
t: foo
###########################################################################
@@ -148,6 +148,12 @@ translations:
t: Fórumok
- key: options.first_steps.view_source
t: View Source
+ - key: options.first_steps.copy_paste
+ t: Copy/paste
+ - key: options.first_steps.trial_and_error
+ t: Trial & Error
+ - key: options.first_steps.documentation
+ t: Documentation
# other disablities
- key: options.disability_status_others.adhd
@@ -172,6 +178,22 @@ translations:
t: Dyslexia
- key: options.disability_status_others.diabetes
t: Diabetes
+ - key: options.disability_status_others.carpal_tunnel
+ t: Carpal Tunnel
+ - key: options.disability_status_others.migraine
+ t: Migraine
+ - key: options.disability_status_others.speech_impairment
+ t: Speech Impairment
+ - key: options.disability_status_others.ocd
+ t: OCD
+ - key: options.disability_status_others.chronic_pain
+ t: Chronic Pain
+ - key: options.disability_status_others.chronic_fatigue
+ t: Chronic Fatigue
+ - key: options.disability_status_others.crohn
+ t: Crohn's Disease
+ - key: options.disability_status_others.depression
+ t: Depression
###########################################################################
# Sections
@@ -197,6 +219,8 @@ translations:
- key: sections.about.title
t: A kérdőívről
+ - key: sections.how_to_help.title
+ t: How to Help
- key: sections.support.title
t: Támogass minket
@@ -231,7 +255,11 @@ translations:
t: Hogyan hallottak a válaszadók a kérdőívről?
- key: user_info.source.note
t: Az adathalmaz kombinálja a kitöltők válaszait, hivatkozási- valamint URL követési adatokat.
+ - key: user_info.source_by_gender
+ t: Source by Gender
+ - key: user_info.source_by_race_ethnicity
+ t: Source by Race & Ethnicity
- key: user_info.gender_by_country
t: Nemek ország szerinti bontásban
- key: user_info.gender_by_country.description
@@ -241,6 +269,15 @@ translations:
t: Tapasztalat években, fizetések szerint rangsorolva
- key: user_info.years_of_experience_by_salary.description
t: Tapasztalat években, fizetések szerint rangsorolva.
+ - key: user_info.average_income_by_years_of_experience
+ t: Average Income by Years of Experience
+ - key: user_info.average_income_by_years_of_experience.description
+ t: Average income by years of experience.
+
+ - key: user_info.average_income_by_company_size
+ t: Average Income by Company Size
+ - key: user_info.average_income_by_company_size.description
+ t: Average income by company size.
- key: user_info.yearly_salary_by_country
t: Fizetés ország szerinti bontásban
@@ -256,6 +293,9 @@ translations:
t: Fizetés tapasztalat alapján
- key: user_info.yearly_salary_by_experience.description
t: Éves fizetés eloszlása tapasztalat alapján, átlagos fizetések szerinti csökkenő sorrendben.
+ - key: user_info.yearly_salary_usa_vs_the_world
+ t: >
+ Yearly Income: U.S vs World
- key: user_info.race_ethnicity_by_years_of_experience
t: Faji és etnikai eloszlás tapasztalat alapján
@@ -289,6 +329,8 @@ translations:
t: cseh
- key: options.locale.pt-PT
t: portugál
+ - key: options.locale.pt-BR
+ t: Portuguese (Brazil)
- key: options.locale.it-IT
t: olasz
- key: options.locale.sv-SE
@@ -315,8 +357,22 @@ translations:
t: koreai
- key: options.locale.ro-RO
t: román
+ - key: options.locale.am-ET
+ t: Amharic
+ - key: options.locale.ar-EG
+ t: Arabic
+ - key: options.locale.el-GR
+ t: Greek
+ - key: options.locale.gl-ES
+ t: Galician
+ - key: options.locale.hr-HR
+ t: Croatian
- key: options.locale.hu-HU
t: magyar
+ - key: options.locale.sk-SK
+ t: Slovak
+ - key: options.locale.vi-VN
+ t: Vietnamese
###########################################################################
# Features
@@ -386,6 +442,28 @@ translations:
t: Homepage
- key: blocks.entity.github_link
t: GitHub
+ - key: blocks.entity.twitter_link
+ t: Twitter
+ - key: blocks.entity.mastodon_link
+ t: Mastodon
+ - key: blocks.entity.blog_link
+ t: Blog
+ - key: blocks.entity.rss_link
+ t: RSS
+ - key: blocks.entity.twitch_link
+ t: Twitch
+ - key: blocks.entity.npm_link
+ t: npm
+ - key: blocks.entity.youtube_link
+ t: YouTube
+
+ # people
+ - key: blocks.people.name
+ t: Name
+ - key: blocks.people.social_links
+ t: Links
+ - key: blocks.people.responses
+ t: Responses
# cardinality
- key: blocks.all_sections_tools_cardinality_by_user
@@ -415,19 +493,19 @@ translations:
# tools quadrant
- key: blocks.tools_quadrant
- t: Satisfaction vs Usage
+ t: Retention vs Usage
- key: blocks.tools_quadrant.description
t: |
- This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**.
+ This chart shows each technology's **retention ratio** over its total **user count**.
It can be divided into four quadrants:
- - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on.
+ - **ASSESS**: Low usage, high retention. Technologies worth keeping an eye on.
- - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt.
+ - **ADOPT**: High usage, high retention. Safe technologies to adopt.
- - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently.
+ - **AVOID**: Low usage, low retention. Technologies probably best avoided currently.
- - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them.
+ - **ANALYZE**: High usage, low retention. Reassess these technologies if you're currently using them.
# category other tools
- key: blocks.category_other_tools
@@ -437,7 +515,7 @@ translations:
# tool experience
- key: blocks.tool_experience
- t: '{name} Experience'
+ t: "{name} Experience"
- key: blocks.tool_experience.description
t: Respondent's experience with {name}.
@@ -457,7 +535,7 @@ translations:
t: Library Tier List
- key: blocks.tools_tier_list.description
t: |
- This chart ranks libraries based on their satisfaction ratio (percentage of users
+ This chart ranks libraries based on their retention ratio (percentage of users
who would use a library again). Note that libraries used by less than 10% of survey
respondents are not included.
- key: blocks.tools_tier_list.bounds
@@ -484,18 +562,30 @@ translations:
# tools experience ranking
- key: blocks.tools_experience_ranking
+ t: Rankings Over Time
+ - key: blocks.tools_experience_ranking.percentages
+ t: Percentages
+ - key: blocks.tools_experience_ranking.rankings
t: Rankings
- key: blocks.tools_experience_ranking.description
- t: Satisfaction, interest, usage, and awareness ratio rankings.
+ t: Retention, interest, usage, and awareness ratio rankings.
- key: blocks.tools_experience_ranking.note
t: |
Technologies with less than 10% awareness not included. Each ratio is defined as follows:
- - Satisfaction: **would use again** / (**would use again** + **would not use again**)
+ - Retention: **would use again** / (**would use again** + **would not use again**)
- Interest: **want to learn** / (**want to learn** + **not interested**)
- Usage: (**would use again** + **would not use again**) / **total**
- Awareness: (**total** - **never heard**) / **total**
+ # tools experience linechart
+ - key: blocks.tools_experience_linechart
+ t: Ratios Over Time
+ - key: blocks.tools_experience_linechart.description
+ t: Retention, interest, usage, and awareness ratio over time.
+ - key: blocks.tools_experience_linechart.note
+ aliasFor: blocks.tools_experience_ranking.note
+
# happiness
- key: blocks.happiness
t: Overall Happiness
@@ -518,17 +608,32 @@ translations:
# features_overview
- key: blocks.features_overview
- t: Usage Overview
+ t: Features Overview
- key: blocks.features_overview.description
t: |
- This chart presents the various adoption rates for all features, grouped by category.
+ The size of the **outer circle** corresponds to the total number of users who know about a feature (*know about it* + *have used it* respondents), while
+ the **inner circle** represents those who have actually used it (*have used it* respondents).
- The size of the outer circle
- corresponds to the total number of users who know about a feature, while
- the inner one represents those who have actually used it.
+ Hover on each circle to see detailed stats, including the ratio between both values.
- Hover on each node to view detailed data along with an overlay
- representing the total number of survey respondents.
+ # features_experience_linechart
+ - key: blocks.features_experience_linechart
+ t: Ratios Over Time
+ - key: blocks.features_experience_linechart.description
+ t: Usage and awareness ratios over time for the highest-rating features.
+ - key: blocks.features_experience_linechart.note
+ t: |
+ Each ratio is defined as follows:
+
+ - Usage: (**have used it**) / **total**
+ - Awareness: (**have used it** + **know about it **) / **total**
+
+ - key: blocks.features_experience_ranking
+ t: Rankings Over Time
+ - key: blocks.features_experience_ranking.description
+ t: Usage and awareness rankings over time.
+ - key: blocks.features_experience_ranking.note
+ aliasFor: blocks.features_experience_linechart.note
# export
- key: export.export
@@ -555,6 +660,8 @@ translations:
t: Custom Chart
- key: custom_data.submit
t: Submit
+ - key: custom_data.empty_contents
+ t: Please enter some data in the "Custom Data" field.
- key: custom_data.edit_title
t: Edit Chart Title
- key: custom_data.customize
@@ -592,6 +699,8 @@ translations:
# Recommended Resources
- key: blocks.recommended_resources
t: Recommended Resources
+ - key: blocks.recommended_events
+ t: Recommended Events
# Brackets
- key: tool_evaluation.tool_evaluation_wins
@@ -604,23 +713,53 @@ translations:
- key: tool_evaluation.tool_evaluation_matchups.description
t: Which factors do you prioritize when evaluating a new library? Percentage of rounds won by left-hand item against top-side item.
+ # other
+ - key: blocks.freeform
+ t: (freeform question)
+
+ # Reading List
+ - key: features.reading_list
+ t: Reading List
+ - key: features.reading_list.description
+ t: How many respondents added each item to their reading list?
+ - key: features.reading_list.note
+ t: >
+ The “Reading List” feature lets respondents save items they want to learn more
+ about while taking the survey; and get a recap of useful resources about them at
+ the end of the survey.
+
###########################################################################
# Charts
###########################################################################
- key: chart_units.respondents
- t: '{count} question respondents ({percentage}% completion percentage)'
+ t: "{count} question respondents ({percentage}% completion percentage)"
- key: chart_units.percentage
t: Percents
- key: chart_units.count
t: Count
- key: chart_units.percentage_question
- t: '% of question respondents'
+ t: "% of question respondents"
+ - key: chart_units.percentageQuestion
+ aliasFor: chart_units.percentage_question
- key: chart_units.percentage_survey
- t: '% of survey respondents'
+ t: "% of survey respondents"
+ - key: chart_units.percentageSurvey
+ aliasFor: chart_units.percentage_survey
+ - key: chart_units.percentage_bucket
+ t: "% of bucket"
+ - key: chart_units.percentageBucket
+ aliasFor: chart_units.percentage_bucket
+ - key: chart_units.average
+ t: Average {axis}
+ - key: chart_units.averageByFacet
+ aliasFor: chart_units.average
+
+ - key: chart_units.percentilesByFacet
+ t: "{axis} Percentiles"
- key: charts.average
- t: Average
+ t: Average {axis}
- key: charts.mean
t: Mean
- key: charts.overall
@@ -628,14 +767,14 @@ translations:
- key: charts.all_respondents
t: All Respondents
- key: charts.facet_responses
- t: '{count} responses'
+ t: "{count} responses"
- key: charts.axis_legends.years_of_experience
t: Years of Experience
- key: charts.axis_legends.yearly_salary
t: Salary Range (USD)
- key: charts.axis_legends.company_size
- t: Number of Employees
+ t: Organization Size
- key: charts.axis_legends.backend_proficiency
t: Back-end Proficiency
- key: charts.axis_legends.css_proficiency
@@ -646,14 +785,26 @@ translations:
t: Percentage of Users
- key: charts.axis_legends.users_count
t: User Count
+ - key: charts.axis_legends.users_average
+ t: Average {axis}
- key: charts.axis_legends.interest_percentage
t: Interest %
- key: charts.axis_legends.satisfaction_percentage
- t: Satisfaction %
+ t: Retention %
- key: charts.axis_legends.usage_percentage
t: Usage %
- key: charts.axis_legends.awareness_percentage
t: Awareness %
+
+ - key: chart_units.interest_percentage
+ aliasFor: charts.axis_legends.interest_percentage
+ - key: chart_units.satisfaction_percentage
+ aliasFor: charts.axis_legends.satisfaction_percentage
+ - key: chart_units.usage_percentage
+ aliasFor: charts.axis_legends.usage_percentage
+ - key: chart_units.awareness_percentage
+ aliasFor: charts.axis_legends.awareness_percentage
+
- key: charts.axis_legends.happiness
t: Happiness
- key: charts.axis_legends.knowledge_score
@@ -663,9 +814,22 @@ translations:
- key: charts.axis_legends.age
t: Age
- key: charts.axis_legends.users_percentage_survey
- t: '% of survey respondents'
+ t: "% of survey respondents"
+ - key: charts.axis_legends.users_percentageSurvey
+ aliasFor: charts.axis_legends.users_percentage_survey
- key: charts.axis_legends.users_percentage_question
- t: '% of question respondents'
+ t: "% of question respondents"
+ - key: charts.axis_legends.users_percentageQuestion
+ aliasFor: charts.axis_legends.users_percentage_question
+ - key: charts.axis_legends.users_percentage_bucket
+ t: "% of bucket respondents"
+ - key: charts.axis_legends.users_percentageBucket
+ aliasFor: charts.axis_legends.users_percentage_bucket
+
+ - key: charts.axis_legends.users_averageByFacet
+ aliasFor: chart_units.average
+ - key: charts.axis_legends.users_percentilesByFacet
+ aliasFor: chart_units.percentilesByFacet
- key: charts.ranges_multiple_diverging_lines.baseline
t: baseline
@@ -709,6 +873,45 @@ translations:
- key: charts.no_answer
t: No Answer
+ - key: charts.no_answer.short
+ t: No Answer
+
+ - key: charts.other_answers
+ t: Others
+ - key: charts.other_answers.short
+ t: Others
+
+ - key: charts.tick.links
+ t: Links
+
+ - key: charts.resources
+ t: Useful Links
+
+ - key: charts.facets_clarification
+ t: >
+ Note that the percentages shown above are influenced by how many respondents
+ overall belong to each group.
+
+ - key: charts.average_clarification
+ t: >
+ Note that averages are calculated by taking the midpoint value of each range as an approximate representative value.
+
+ ###########################################################################
+ # Comments
+ ###########################################################################
+
+ - key: comments.comments
+ t: Comments
+ - key: comments.comments_for
+ t: Comments for “{name}”
+ - key: comments.description
+ t: |
+ These comments were submitted as part of the survey
+ through an optional freeform text field next to the main question.
+ - key: comments.report_abuse
+ t: Report this comment
+ - key: comments.share
+ t: Share Comment
###########################################################################
# Sharing
@@ -768,10 +971,16 @@ translations:
t: Elem
- key: table.percentage_survey
t: 'a felmérés válaszadóinak százaléka (%)'
+ - key: table.percentageSurvey
+ aliasFor: table.percentage_survey
- key: table.percentage_question
t: 'kérdés válaszadóinak százaléka (%)'
+ - key: table.percentageQuestion
+ aliasFor: table.percentage_question
- key: table.percentage_facet
t: 'aspektus válaszadóinak százaléka (%)'
+ - key: table.percentageFacet
+ aliasFor: table.percentage_facet
- key: table.count
t: Összesítve
- key: table.year
@@ -818,6 +1027,8 @@ translations:
t: Újra használnám %
- key: table.interested_percentage
t: Érdeklődő %
+ - key: table.not_available
+ t: No datatable available.
###########################################################################
# Awards
@@ -847,9 +1058,9 @@ translations:
t: Awarded to the technology with the largest year-over-year “would use again” progression.
- key: award.tool_satisfaction_award.title
- t: Highest Satisfaction
+ t: Highest Retention
- key: award.tool_satisfaction_award.description
- t: Awarded to the technology with the highest percentage of satisfied users.
+ t: Awarded to the technology with the highest percentage of returning users.
- key: award.tool_interest_award.title
t: Highest Interest
@@ -871,6 +1082,16 @@ translations:
- key: award.most_write_ins_award.description
t: Awarded to the item with the most write-in answers
+ - key: award.most_commented_feature_award.title
+ t: Most Commented Feature
+ - key: award.most_commented_feature_award.description
+ t: Awarded to the feature which received the most comments.
+
+ - key: award.most_commented_tool_award.title
+ t: Most Commented Library
+ - key: award.most_commented_tool_award.description
+ t: Awarded to the library which received the most comments.
+
###########################################################################
# Hints
###########################################################################
@@ -903,8 +1124,8 @@ translations:
- key: hints.rankings_modes_hint
t: >
- The Rankings chart can be toggled between satisfaction, interest, usage, and awareness
- to give you a fuller picture of a category's rankings.
+ The Experience Over Time chart can be toggled between retention, interest, usage, and awareness
+ to give you a fuller picture of a category.
- key: hints.sharing_hint
t: >
@@ -931,6 +1152,10 @@ translations:
The following chart provides the results of a tournament-style 8-player bracket in which
respondents were tasked with picking the winner of each match-up until a single winner remained.
+ - key: hints.comments_hint
+ t: >
+ The tab lets you view comments left by survey respondents as they were filling out the survey.
+
###########################################################################
# Sponsor Chart
###########################################################################
@@ -959,7 +1184,7 @@ translations:
Twitter avatar featured next to a chart!
- key: sponsor.chart_id
- t: 'Chart ID: '
+ t: "Chart ID: "
- key: sponsor.sponsor_this_chart
t: Sponsor This Chart (${baseAmount}+)
@@ -990,7 +1215,7 @@ translations:
t: What will my donation be used for?
- key: sponsor.faq.usage.description
- t: Your donation will help cover [my](https://sachagreif.com/) living expenses, as well as hire more contributors (illustrators, accessibilty and diversity experts, etc.).
+ t: Your donation will help support survey maintainers, as well as help hire more contributors (illustrators, accessibilty and diversity experts, etc.).
- key: sponsor.faq.public.title
t: Will my donation be public?
@@ -1021,3 +1246,294 @@ translations:
- key: sponsor.faq.feedback.description
t: You can do so [on GitHub](https://github.com/StateOfJS/Monorepo/issues/69) or [in our Discord](https://discord.gg/tuWRUWVyJs).
+
+ ###########################################################################
+ # Data Explorer
+ ###########################################################################
+
+ - key: sections.data_explorer.title
+ t: Data Explorer
+ - key: sections.data_explorer.description
+ t: |
+ Dynamically explore the survey's audience by picking two questions, and seeing how
+ respondents are distributed between them.
+
+ - key: hints.data_explorer
+ t: |
+ This is a preview version of our new Data Explorer. If you find any issues or data inconsistencies please [let us know]({issueLink}).
+
+ # heading
+
+ - key: explorer.main_heading
+ t: “{xAxisLabel}” vs “{yAxisLabel}”
+
+ - key: explorer.total_respondents
+ t: |
+ (**{totalCount}** total respondents)
+
+ - key: explorer.count_per_dot
+ t: |
+ {respondentsPerDot} Respondents
+ - key: explorer.percentage_per_dot
+ t: |
+ {percentsPerDot}%
+ - key: explorer.extra_respondents
+ t: Extra Respondents
+ - key: explorer.missing_respondents
+ t: Missing Respondents
+
+ - key: explorer.count_per_dot.tooltip
+ t: |
+ 1 dot represents {respondentsPerDot} respondents
+ - key: explorer.percentage_per_dot.tooltip
+ t: |
+ 1 dot represents {percentsPerDot}% of respondents
+ - key: explorer.extra_respondents.tooltip
+ t: Highlighted dots indicate higher-than-expected results.
+ - key: explorer.missing_respondents.tooltip
+ t: Empty dots indicate lower-than-expected results.
+
+ - key: explorer.units_count
+ t: Count
+ - key: explorer.units_percentage
+ t: "% of Row"
+
+ - key: explorer.edit
+ t: Edit Parameters…
+
+ - key: explorer.get_data
+ t: Get Data…
+
+ # loading
+
+ - key: explorer.loading.1
+ t: Querying API…
+ - key: explorer.loading.2
+ t: Waiting for a response…
+ - key: explorer.loading.3
+ t: Still working…
+ - key: explorer.loading.4
+ t: Hang on just a little bit longer…
+ - key: explorer.loading.5
+ t: Sorry, this is taking a while. You can try waiting a little longer, or [report an issue]({issueLink}).
+ - key: explorer.timeout
+ t: Timeout
+ - key: explorer.timeout.description
+ t: The API didn't respond in time. Please try again later, or [report an issue]({issueLink}).
+
+ # share
+
+ - key: explorer.share
+ t: Share…
+ - key: explorer.share.title
+ t: Share “{xAxisLabel}” vs “{yAxisLabel}”
+ - key: explorer.share.tweet
+ t: “{xAxisLabel}” vs “{yAxisLabel}” from the {surveyName} {year} survey
+
+ # axis
+
+ - key: explorer.axis_total
+ t: "{totalCount} respondents"
+ - key: explorer.axis_percent
+ t: "{percentCount}% of respondents"
+
+ - key: explorer.x_axis_details
+ t: |
+ Out of all respondents who completed question “{yAxisLabel}”, **{totalCount}** survey respondents picked “{xQuestionLabel}” for “{xAxisLabel}”
+ - key: explorer.y_axis_details
+ t: |
+ **{totalCount}** survey respondents picked “{yQuestionLabel}”
+ - key: explorer.main_legend_count
+ t: |
+ **{totalCount}** respondents, **1** dot = **{respondentsPerDot}** respondents, **{dotsPerLine}** dots per line
+
+ # controls
+ - key: explorer.dots_per_line
+ t: Dots per line
+ - key: explorer.respondents_per_dot
+ t: Respondents per dot
+ - key: explorer.show_cell_counts
+ t: Show cell counts
+ - key: explorer.show_no_answer
+ t: Show “No Answer” cells
+
+ - key: explorer.all_fields
+ t: All fields
+ - key: explorer.select_item
+ t: Select item
+
+ # details views
+
+ - key: explorer.count_details.1
+ t: |
+ **{xAxisTotal}** “{xAxisLabel}” respondents selected “{xAnswerLabel}”.
+
+ - key: explorer.count_details.2
+ t: |
+ **{yAxisPercentage}%** of “{yAxisLabel}” respondents selected “{yAnswerLabel}”.
+
+ - key: explorer.count_details.3
+ t: |
+ Applying that percentage to the previous **{xAxisTotal}** respondents figure
+ gives us an expected baseline of **{normalizedCount}** respondents in this intersection.
+
+ - key: explorer.count_details.4_extra
+ t: |
+ The actual count is **{cellCount}**, and those extra **{normalizedCountDelta}** respondents are *highlighted*.
+
+ - key: explorer.count_details.4_missing
+ t: |
+ The actual count is **{cellCount}**, and those missing **{normalizedCountDelta}** respondents appear as empty dots.
+
+ - key: explorer.percentage_details.1_extra
+ t: |
+ Overall, **{xAxisPercentage}%** of “{xAxisLabel}” respondents selected “{xAnswerLabel}”, but
+ within **“{yAxisLabel}” respondents who selected “{yAnswerLabel}”** that percentage climbs to **{bucketPercentage}%**.
+
+ - key: explorer.percentage_details.1_missing
+ t: |
+ Overall, **{xAxisPercentage}%** of “{xAxisLabel}” respondents selected “{xAnswerLabel}”, but
+ within **“{yAxisLabel}” respondents who selected “{yAnswerLabel}”** that percentage drops to **{bucketPercentage}%**.
+
+ - key: explorer.percentage_details.2_extra
+ t: |
+ Those extra **{normalizedPercentageDelta}%** respondents are *highlighted*.
+
+ - key: explorer.percentage_details.2_missing
+ t: |
+ Those missing **{normalizedPercentageDelta}%** respondents appear as empty dots.
+
+ # - key: explorer.percentage_details.1
+ # t: |
+ # **{xAxisPercentage}%** of **{xAxisTotal}** “{xAxisLabel}” respondents selected “{xAnswerLabel}”.
+
+ # - key: explorer.percentage_details.2
+ # t: |
+ # **{yAxisPercentage}%** of “{yAxisLabel}” respondents selected “{yAnswerLabel}”.
+
+ # - key: explorer.percentage_details.3
+ # t: |
+ # Applying that percentage to the previous **{xAxisTotal}** respondents figure
+ # gives us an expected baseline of **{normalizedPercentage}%** of respondents in this intersection.
+
+ # - key: explorer.percentage_details.4_extra
+ # t: |
+ # The actual percentage is **{bucketPercentage}%**, and those extra **{normalizedPercentageDelta}%** respondents are *highlighted*.
+
+ # - key: explorer.percentage_details.4_missing
+ # t: |
+ # The actual count is **{bucketPercentage}%**, and those missing **{normalizedPercentageDelta}%** respondents appear as empty dots.
+
+ - key: explorer.extra_missing_respondents
+ t: |
+ ### Extra & Missing Respondents
+
+ The chart above aims to identify areas showing higher-than-expected
+ or lower-than-expected values compared to a calculated baseline.
+
+ For example, assuming there are 1000 CSS Grid users, and that 50% of survey respondents work in a large company,
+ you'd expect to find 500 CSS Grid users working in large companies.
+
+ Any deviation above or below that expected total could potentially indicate an interesting
+ correlation between both variables, and is highlighted on the chart with either colored
+ dots (for extra respondents above the baseline) or empty dots (for missing respondents).
+
+ ###########################################################################
+ # Filters
+ ###########################################################################
+
+ - key: filters.compare_data
+ t: Compare Data
+ - key: filters.customize_chart
+ t: Customize Chart
+ - key: filters.docs
+ t: Documentation
+ - key: filters.compare_chart
+ t: Customize “{chartName}”
+ - key: filters.filters.description
+ t: |
+ Using a combination of demographics filters, you can define up to four **custom data series** to dynamically
+ load and compare them with the default data for this question.
+ - key: filters.facets.description
+ t: |
+ Pick a variable to break down each bar into "facets".
+ - key: filters.grid_mode
+ t: Side-by-Side
+ - key: filters.combined_mode
+ t: Combined
+ - key: filters.facet_mode
+ t: Facets
+ - key: filters.facet
+ t: "Facet:"
+
+ - key: filters.series.heading
+ t: Series {index}
+ - key: filters.series.add
+ t: Add Series…
+ - key: filters.series.delete
+ t: Delete Series
+ - key: filters.series.year
+ t: |
+ {year} data
+ - key: filters.series.show_default
+ t: |
+ Show default series
+ - key: filters.series.no_data
+ t: No data
+
+ - key: filters.condition.add
+ t: Add Filter
+ - key: filters.condition.delete
+ t: Delete Filter
+ - key: filters.condition.and
+ t: and
+ - key: filters.operators.eq
+ t: is
+ - key: filters.operators.in
+ t: is one of
+ - key: filters.operators.nin
+ t: is not one of
+ - key: filters.value.add
+ t: Add Value
+ - key: filters.value.delete
+ t: Delete Value
+
+ - key: filters.legend.default
+ t: Default
+
+ - key: filters.cancel
+ t: Cancel
+ - key: filters.submit
+ t: Update Chart
+ - key: filters.copy_link
+ t: Copy link to current filters
+ - key: filters.get_code
+ t: Get filters code
+
+ - key: filters.presets.title
+ t: "Presets:"
+ - key: filters.presets.save
+ t: Save current filters as preset…
+ - key: filters.presets.delete
+ t: Delete Preset
+ - key: filters.presets.enter_name
+ t: |
+ Enter a name for your new preset:
+ - key: filters.presets.previous_years
+ t: Previous Years
+ - key: filters.presets.gender
+ t: Gender
+ - key: filters.presets.top_countries
+ t: Top Countries
+ - key: filters.presets.salary_low_high
+ t: |
+ Low vs High Salary
+ - key: filters.presets.experience_low_high
+ t: |
+ Low vs High Experience
+ - key: filters.presets.company_size_low_high
+ t: |
+ Small vs Large Company
+
+ - key: filters.facet.select
+ t: Select a facet…
diff --git a/state_of_css.yml b/state_of_css.yml
index 47832f9..47c247d 100644
--- a/state_of_css.yml
+++ b/state_of_css.yml
@@ -57,6 +57,21 @@ translations:
- key: sections.media_queries.description
t: Annak a módja, hogy hogyan tudjuk a megjelenítést a felhasználó eszközére és preferenciájára szabni.
+ - key: sections.selectors.title
+ t: Selectors
+ - key: sections.selectors.description
+ t: CSS selectors.
+
+ - key: sections.colors.title
+ t: Colors
+ - key: sections.colors.description
+ t: Color-related features.
+
+ - key: sections.javascript_apis.title
+ t: JavaScript APIs
+ - key: sections.javascript_apis.description
+ t: JavaScript APIs used to control or complement CSS.
+
- key: sections.other_features.title
t: Egyéb funkciók
- key: sections.other_features.description
@@ -110,6 +125,16 @@ translations:
- key: sections.environments.description
t: Milyen környezeteket és akadálymentesítési szempontokat veszel figyelembe amikor CSS kódot írsz?
+ - key: sections.usage_css.title
+ t: CSS Usage
+ - key: sections.usage_css.description
+ t: How you use CSS.
+
+ - key: sections.resources_css.title
+ t: Resources
+ - key: sections.resources_css.description
+ t: What CSS resources do you consult?
+
###########################################################################
# Options
###########################################################################
@@ -172,7 +197,22 @@ translations:
- key: options.what_do_you_use_css_for.emails
t: Emailek
- key: options.what_do_you_use_css_for.printed_documents
- t: Nyomtatott dokumentumok
+ t: Printed documents
+ - key: options.what_do_you_use_css_for.desktop_apps
+ t: Desktop apps
+
+ - key: options.what_do_you_use_css_for.e_commerce
+ t: E-commerce
+ - key: options.what_do_you_use_css_for.websites
+ t: Websites
+ - key: options.what_do_you_use_css_for.games
+ t: Games
+ - key: options.what_do_you_use_css_for.portfolio
+ t: Portfolio
+ - key: options.what_do_you_use_css_for.extensions
+ t: Browser Extensions
+ - key: options.what_do_you_use_css_for.desktop
+ t: Desktop
# CSS pain points
- key: options.css_pain_points.browser_interoperability
@@ -242,42 +282,81 @@ translations:
- key: options.css_missing_features.subgrid.description
t: Rácsok egymásba ágyazása
+ - key: options.css_missing_features.native_visually_hidden
+ t: Visually Hidden Content
+ - key: options.css_missing_features.native_visually_hidden.description
+ t: Native support for visually hidden content.
+
+ - key: options.css_missing_features.generated_content_alt_text
+ t: Generated Content Alt Text
+ - key: options.css_missing_features.generated_content_alt_text.description
+ t: Add alt text to generated (`::before`, `::after`) content.
+
+ - key: options.css_missing_features.animate_to_auto
+ t: Animate to `auto`
+ - key: options.css_missing_features.animate_to_auto.description
+ t: Animate an element's dimension to `auto`.
+
+ - key: options.css_missing_features.anchored_positioning
+ t: Anchored Positioning
+ - key: options.css_missing_features.anchored_positioning.description
+ t: Positioning elements relative to the edges of any arbitrary other element.
+
+ - key: options.css_missing_features.wrapping_detection
+ t: Wrapping Detection
+ - key: options.css_missing_features.wrapping_detection.description
+ t: Detecting when a flex or grid item has wrapped to another line.
+
+ - key: options.css_missing_features.more_pseudo_elements
+ t: More Pseudo-Elements
+ - key: options.css_missing_features.more_pseudo_elements.description
+ t: Having more than two pseudo-elements per element.
+
+ - key: options.css_missing_features.svg_in_css
+ t: SVG-in-CSS
+ - key: options.css_missing_features.svg_in_css.description
+ t: Support for SVG syntax inside CSS code (such as `background`).
+
+ - key: options.css_missing_features.grid_lines_styling
+ t: Grid-lines Styling
+ - key: options.css_missing_features.grid_lines_styling.description
+ t: The ability to style the invisible lines that divide a grid.
+
+ - key: options.css_missing_features.media_queries_variables
+ t: Media Queries Variables
+ - key: options.css_missing_features.media_queries_variables.description
+ t: Being able to use variables inside media queries.
+
+ - key: options.css_missing_features.masonry_layout
+ t: Masonry Layout
+ - key: options.css_missing_features.masonry_layout.description
+ t: Native support for Pinterest-style free-flowing grid layouts.
+
+ - key: options.css_missing_features.css_toggle
+ t: CSS Toggle
+ - key: options.css_missing_features.css_toggle.description
+ t: A way to associate a "toggleable value" with an element
+
###########################################################################
# Features
###########################################################################
# layout
- - key: features.grid
- t: CSS rácsok
- - key: features.subgrid
- t: Alrácsok
- key: features.regions
t: CSS régiók
- - key: features.flexbox
- t: Flexbox
- key: features.multi_column
t: CSS sokszoros oszlop (multi-column)
- key: features.writing_modes
t: CSS írási módok
- key: features.exclusions
t: CSS kivételek
- - key: features.position_sticky
- t: "position: sticky"
- - key: features.logical_properties
- t: Logikai tulajdonságok
- - key: features.logical_properties.description
- t: margin-block-start, padding-inline-end, etc.
- - key: features.aspect_ratio
- t: aspect-ratio
- - key: features.content_visibility
- t: content-visibility
+
- key: features.flexbox_gap
t: A Flexbox rés tulajdonsága
- - key: features.break_rules
- t: Törési (break) szabályok
- - key: features.break_rules.description
- t: break-inside, break-before, break-after
+
+ - key: features.viewport_percentage_length_units
+ t: Small, Large, and Dynamic Viewport Units
- key: features.at_container
t: Konténerlekérdezések
- key: features.at_container.description
@@ -286,48 +365,19 @@ translations:
# shapes & graphics
- key: features.shapes
t: CSS formák
- - key: features.object_fit
- t: object-fit
- - key: features.clip_path
- t: clip-path
- key: features.masks
t: CSS maszkok
- - key: features.blend_modes
- t: Összemosási (blend) módok
- - key: features.blend_modes.description
- t: The mix-blend-mode property
- key: features.filter_effects
t: CSS szűrési effektek (filter effects)
- - key: features.backdrop_filter
- t: backdrop-filter
+ - key: features.linear_easing_function
+ t: "`linear()` Easing Function"
+ - key: features.blend_modes
+ t: Blend Modes
- key: features.intrinsic_sizing
t: Saját magát megszabó méretezés (Intrinsic sizing)
- - key: features.intrinsic_sizing.description
- t: min-content, max-content, fit-content
- - key: features.repeating_linear_gradient
- t: repeating-linear-gradient()
- - key: features.conic_gradient
- t: conic-gradient()
- - key: features.color_function
- t: color()
-
- - key: features.accent_color
- t: accent-color
-
- # interactions
- - key: features.scroll_snap
- t: CSS görgetési viselkedés
- - key: features.overscroll_behavior
- t: overscroll-behavior
- - key: features.overflow_anchor
- t: overflow-anchor
- - key: features.touch_action
- t: touch-action
- - key: features.pointer_events
- t: pointer-events
- - key: features.scroll_timeline
- t: scroll-timeline
+ - key: features.gradient_color_spaces
+ t: Interpolation Color Spaces
# typography
- key: features.web_fonts
@@ -336,22 +386,6 @@ translations:
t: Változó betűlészletek
- key: features.line_breaking
t: Sortörési tulajdonságok
- - key: features.line_breaking.description
- t: overflow-wrap, word-break, line-break, hyphens
- - key: features.font_variant
- t: font-variant-*
- - key: features.initial_letter
- t: initial-letter
- - key: features.font_variant_numeric
- t: font-variant-numeric
- - key: features.font_display
- t: font-display
- - key: features.line_clamp
- t: line-clamp
- - key: features.leading_trim
- t: leading-trim
- - key: features.direction
- t: direction
- key: features.direction.description
t: Idea tartozik a dir HTML attribútum is.
@@ -362,31 +396,10 @@ translations:
t: CSS transzformációk
- key: features.animations
t: CSS animációk
- - key: features.perspective
- t: perspective
# media queries/accessibility
- - key: features.feature_support_queries
- t: Funkciótámogatási lekérdezés (@supports)
- - key: features.prefers_reduced_motion
- t: prefers-reduced-motion
- - key: features.prefers_color_scheme
- t: prefers-color-scheme
- - key: features.color_gamut
- t: color-gamut
-
- - key: features.prefers_reduced_data
- t: prefers-reduced-data
- key: features.tabindex
t: tabindex HTML attribute
- - key: features.tabindex.description
- t: <div tabindex="0">
-
- - key: features.color_contrast
- t: color-contrast()
-
- - key: features.color_scheme
- t: color-scheme
- key: features.aria_attributes
t: ARIA HTML attribútumok
@@ -398,25 +411,31 @@ translations:
t: CSS változók (Egyéni Tulajdonságok)
- key: features.containment
t: CSS behatárolás
- - key: features.will_change
- t: will-change
- - key: features.calc
- t: calc()
- - key: features.houdini
- t: Houdini
+ - key: features.css_nesting.description
+ t: Native CSS nesting, excluding pre- or post-processors.
+
+ - key: features.trigonometric_functions
+ t: Trigonometric Functions
+ - key: features.exponential_functions
+ t: Exponential Functions
+ - key: features.sign_related_functions
+ t: Sign-Related Functions
+ - key: features.stepped_value_functions
+ t: Stepped Value Functions
+ - key: features.css_nesting
+ t: CSS Nesting
+ - key: features.shadow_dom_css
+ t: Shadow DOM Features
+ - key: features.individual_transform_properties
+ t: Individual Transform Properties
- key: features.comparison_functions
- t: CSS összehasonlító funkciók
- - key: features.comparison_functions.description
- t: min(), max(), and clamp()
-
- - key: features.at_property
- t: Houdini egyéni tulajdonságok
- - key: features.at_property.description
- t: @property
- - key: features.at_layer
- t: @layer
- - key: features.marker
- t: ::marker pseudo-element
+ t: CSS Comparison Functions
+ - key: features.math_functions
+ t: CSS Math Functions
+ - key: features.viewport_units
+ t: Viewport Units (`vh`, `vw`)
+ - key: features.cascade_layers
+ t: Cascade Layers
# missing features (see also options)
- key: features.nesting
@@ -632,6 +651,75 @@ translations:
- key: options.form_controls.required_optional
t: :required and :optional
+ # slider
+ - key: options.css_js_balance.0
+ t: 100% CSS
+ - key: options.css_js_balance.4
+ t: 50%–50%
+ - key: options.css_js_balance.8
+ t: 100% JS
+
+ ###########################################################################
+ # Other Tools
+ ###########################################################################
+
+ - key: tools_others.pre_post_processors
+ aliasFor: sections.pre_post_processors.title
+ - key: other_tools.pre_post_processors
+ aliasFor: sections.pre_post_processors.title
+ - key: tools_others.pre_post_processors.description
+ t: Which pre- or post-processors do you regularly use?
+ - key: other_tools.pre_post_processors.description
+ aliasFor: tools_others.pre_post_processors.description
+ - key: tools_others.pre_post_processors.others
+ aliasFor: sections.pre_post_processors_others.title
+ - key: other_tools.pre_post_processors.others
+ aliasFor: sections.pre_post_processors_others.title
+ - key: other_tools.pre_post_processors_freeform
+ aliasFor: sections.pre_post_processors_others.title
+ - key: options.pre_post_processors.na
+ t: None
+
+ - key: tools_others.utilities
+ t: Utilities
+ - key: tools_others.utilities.description
+ t: Which utilities or tools do you regularly use?
+ - key: tools_others.utilities.others
+ t: Other Utilities
+ - key: tools_others.utilities.others.description
+ t: Other utilities (freeform field).
+ - key: options.utilities.na
+ t: None
+
+ - key: other_tools.utilities
+ aliasFor: tools_others.utilities
+ - key: other_tools.utilities.description
+ aliasFor: tools_others.utilities.description
+ - key: other_tools.utilities.others
+ aliasFor: tools_others.utilities.others
+ - key: other_tools.utilities.others.description
+ aliasFor: tools_others.utilities.others.description
+ - key: other_tools.utilities_freeform
+ aliasFor: tools_others.utilities.others
+
+ - key: tools_others.browsers
+ t: Browsers
+ - key: tools_others.browsers.description
+ t: Which browser(s) do you primarily work in during initial development?
+ - key: tools_others.browsers.others
+ t: Other Browsers
+ - key: tools_others.browsers.others.description
+ t: Other answers (freeform field).
+
+ - key: other_tools.browsers
+ aliasFor: tools_others.browsers
+ - key: other_tools.browsers.description
+ aliasFor: tools_others.browsers.description
+ - key: other_tools.browsers.others
+ aliasFor: tools_others.browsers.others
+ - key: other_tools.browsers.others.description
+ aliasFor: tools_others.browsers.others.description
+
###########################################################################
# Environments
###########################################################################
@@ -645,6 +733,21 @@ translations:
t: Tesztelési környezetek
- key: environments.form_factors.description
t: Milyen felbontásokat és tesztelési környezetet szoktál használni teszteléshez?
+ - key: environments.form_factors.others
+ t: Other Testing Environments
+ - key: environments.form_factors.others.description
+ t: Other form factors or environments you usually test on.
+
+ - key: usage.form_factors
+ aliasFor: environments.form_factors
+ - key: usage.form_factors.description
+ aliasFor: environments.form_factors.description
+ - key: usage.form_factors.others
+ aliasFor: environments.form_factors.others
+ - key: usage.form_factors_freeform
+ aliasFor: environments.form_factors.others
+ - key: usage.form_factors.others.description
+ aliasFor: environments.form_factors.others.description
- key: environments.accessibility_features
t: Akadálymentesítési szempontok
@@ -671,6 +774,14 @@ translations:
t: Főleg milyen projektekhez használod a CSS-t?
- key: environments.what_do_you_use_css_for.others
t: Egyéb fajta projektek
+ - key: usage.what_do_you_use_css_for
+ aliasFor: environments.what_do_you_use_css_for
+ - key: usage.what_do_you_use_css_for.description
+ aliasFor: environments.what_do_you_use_css_for.description
+ - key: usage.what_do_you_use_css_for.others
+ aliasFor: environments.what_do_you_use_css_for.others
+ - key: usage.what_do_you_use_css_for_freeform
+ aliasFor: environments.what_do_you_use_css_for.others
- key: charts.axis_legends.css_for_print
t: Frekvencia
@@ -723,27 +834,88 @@ translations:
t: >
Vannak olyan funkciói a CSS-nek amit nehéz használni a böngészők
közötti különbségek miatt?
+ - key: usage.css_interoperability_features
+ aliasFor: opinions_others.browser_interoperability_features.others
+ - key: usage.css_interoperability_features.description
+ aliasFor: opinions_others.browser_interoperability_features.others.description
+
+ - key: usage.css_interoperability_features_freeform
+ aliasFor: opinions_others.browser_interoperability_features.others
+ - key: usage.interoperability_features_freeform
+ aliasFor: opinions_others.browser_interoperability_features.others
+ - key: usage.interoperability_features_freeform.others
+ aliasFor: opinions_others.browser_interoperability_features.others
+
+ - key: usage.interoperability_features_freeform.description
+ aliasFor: opinions_others.browser_interoperability_features.others.description
+ - key: usage.interoperability_features_freeform.others.description
+ aliasFor: opinions_others.browser_interoperability_features.others.description
+
+ - key: options.css_interoperability_features.math_functions
+ aliasFor: features.math_functions
+ - key: options.css_interoperability_features.css_nesting
+ aliasFor: features.css_nesting
+ - key: options.css_interoperability_features.at_container
+ aliasFor: features.at_container
+
+ - key: options.css_interoperability_features.color_functions
+ aliasFor: features.color_functions
+ - key: options.css_interoperability_features.color_functions.description
+ aliasFor: features.color_functions.description
+ - key: options.css_interoperability_features.cascade_layers
+ aliasFor: features.cascade_layers
+
+ - key: options.css_interoperability_features.na
+ t: None
# Pain Points
- key: opinions.css_pain_points
t: A CSS hiányosságai
- key: opinions.css_pain_points.description
t: Minden egyes párnál válaszd ki, hogy a CSS mely aspektusával küzdesz a legtöbbet.
+ - key: usage.other_pain_points_freeform
+ t: Any other pain points related to writing CSS?
+ - key: usage.other_pain_points_freeform.others
+ aliasFor: usage.other_pain_points_freeform
- key: opinions_others.css_pain_points.others
t: A CSS egyéb hiányosságai
+ - key: usage.css_pain_points
+ aliasFor: opinions_others.css_pain_points.others
+ - key: usage.css_pain_points.description
+ aliasFor: usage.other_pain_points_freeform
+ - key: usage.css_pain_points_freeform
+ aliasFor: usage.other_pain_points_freeform
+
+ - key: options.css_pain_points.na
+ t: None
# Missing Features
- key: opinions.css_missing_features
t: Mi az, ami jelenleg hiányzik számodra a CSS-ből?
- key: opinions.css_missing_features.description
t: Minden egyes funkció-párnál azt válaszd ki, amelyiket a leginkább szeretnéd látni a CSS-ben ma.
+ - key: usage.missing_features_freeform
+ t: What features do you feel are currently missing from CSS altogether?
+ - key: usage.missing_features_freeform.others
+ aliasFor: usage.missing_features_freeform
+ - key: usage.missing_features_freeform
+ aliasFor: usage.missing_features_freeform
+
+ - key: usage.css_missing_features
+ t: Missing Features
+ - key: usage.css_missing_features.description
+ aliasFor: usage.missing_features_freeform
- key: opinions_others.css_missing_features.others
t: Egyéb hiányosságok
- key: opinions_others.css_missing_features.others.note
t: >
Ezek az eredmények egy szabad formátumú mezőből lettek összesítve.
Az eredeti válaszok megtekintése itt lehetséges: [whatsmissingfromcss.com](http://whatsmissingfromcss.com/).
+ # - key: opinions_others.css_missing_features.others.note
+ # t: >
+ # These results were normalized based on the contents of a freeform field.
+ # To view the raw, unprocessed responses check out [whatsmissingfromcss.com](http://whatsmissingfromcss.com/).
- key: opinions.sum_up_one_word_css
t: CSS egy szóban
@@ -754,14 +926,30 @@ translations:
t: Mennyive vagy megelégedve az elő- és utófeldolgozók jelenlegi állapotával?
- key: happiness.css_in_js
t: Mennyive vagy megelégedve a CSS-in-JS könyvtárak jelenlegi állapotával?
+ - key: css_in_js.css_in_js_happiness
+ aliasFor: happiness.css_in_js
- key: happiness.css_frameworks
t: Mennyive vagy megelégedve a CSS keretrendszerek jelenlegi állapotával?
+ - key: css_frameworks.css_frameworks_happiness
+ aliasFor: happiness.css_frameworks
- key: happiness.state_of_the_web
t: Mennyive vagy megelégedve a jelenlegi webes technológiákkal?
+ - key: happiness.state_of_the_web.description
+ t: How happy are you with the general state of web technologies?
+ - key: usage.state_of_the_web_happiness
+ aliasFor: happiness.state_of_the_web
+ - key: usage.state_of_the_web_happiness.description
+ aliasFor: happiness.state_of_the_web.description
- key: happiness.state_of_css
t: Mennyire vagy megelégedve a CSS jelenlegi állapotával?
+ - key: happiness.state_of_css.description
+ t: How happy are you with the general state of CSS?
+ - key: usage.state_of_css_happiness
+ aliasFor: happiness.state_of_css
+ - key: usage.state_of_css_happiness.description
+ aliasFor: happiness.state_of_css.description
# pain points/currently missing (results)
- key: css_pain_points.css_pain_points_wins
@@ -784,6 +972,17 @@ translations:
- key: css_missing_features.css_missing_features_matchups.description
t: Which feature would you most like to be able to use in CSS today? Percentage of rounds won by left-hand item against top-side item.
+ - key: usage.css_js_balance
+ t: CSS vs JavaScript Balance
+ - key: usage.css_js_balance.description
+ t: How do you divide your time between writing CSS (including HTML markup) and JavaScript code?
+
+ - key: usage.css_usage_type
+ t: CSS Usage
+ - key: usage.css_usage_type.description
+ t: In what context do you primarily use CSS?
+ - key: usage.css_usage_type.others
+ t: Other CSS Usages
###########################################################################
# Resources
###########################################################################
@@ -792,3 +991,41 @@ translations:
t: Első lépések a CSS-ben
- key: resources.first_steps_css.description
t: Hogyan kezdtél el CSS-t tanulni az elején?
+ - key: resources.learning_methods_css
+ t: CSS Learning Methods
+ - key: resources.learning_methods_css.description
+ t: Which resources have you used to learn CSS?
+
+ # sites & courses
+ - key: resources.sites_courses_css
+ aliasFor: resources.sites_courses
+ - key: resources.sites_courses_css.description
+ t: Which CSS-related sites/courses/etc. do you use to learn about CSS?
+
+ # podcasts
+ - key: resources.podcasts_css
+ aliasFor: resources.podcasts
+ - key: resources.podcasts_css.description
+ t: Which CSS-related podcasts do you listen to?
+
+ # people
+ - key: resources.people_css.others
+ aliasFor: resources.people.others
+ - key: resources.people_css.others.description
+ t: People you read, follow, or just want to highlight for their work in the CSS ecosystem.
+
+ ###########################################################################
+ # Survey Help
+ ###########################################################################
+
+ - key: features.features_intro_css
+ t: |
+ Welcome to the survey! This first part is all about figuring out
+ which **features** of CSS you know about.
+
+ By the way, if you want to tell us more about any of your choices, just click that little "comment" icon!
+
+ - key: tools.tools_intro_css
+ t: |
+ The next couple sections focus on the **libraries** and **frameworks** that make up
+ the CSS ecosystem. Let us know what you're excited about!
diff --git a/state_of_css_2021.yml b/state_of_css_2021.yml
index 47b9945..bfe7ee8 100644
--- a/state_of_css_2021.yml
+++ b/state_of_css_2021.yml
@@ -114,15 +114,6 @@ translations:
- key: options.features_categories.other_features
aliasFor: sections.other_features.title
- ###########################################################################
- # Notes
- ###########################################################################
-
- - key: sections.opinions.description
- t: |
- Legyenek akár fájdalmas pontok, amik visszatartanak, vagy hiányzó funkciók, amiket remélsz, hogy
- egyszer majd használhatsz, ez volt itt a lehetőséged, hogy megoszd a kritikáidat és gondolataidat a CSS-ről!
-
###########################################################################
# Notes
###########################################################################
@@ -197,98 +188,98 @@ translations:
- key: picks.intro
t: Megkérdeztük a CSS közösség tagjait az "idei kedvenceikről"
- - key: picks.georgedoescode.name
- t: A CSS rajzoló API
- - key: picks.georgedoescode.bio
- t: Fejlesztő, író, alkotóművész.
- - key: picks.georgedoescode.description
+ - key: picks.george_francis.name
+ t: The CSS Paint API
+ - key: picks.george_francis.bio
+ t: Developer, writer, and generative artist.
+ - key: picks.george_francis.description
t: |
A rajzoló API-val programozva készíthetünk képeket, amit a CSS-ben
használhatunk. Ez egy egészen új világot nyit meg a kreativitásban,
és én nagyon izgatott vagyok emiatt!
- - key: picks.cassidoo.name
+ - key: picks.cassidy_williams.name
t: Lynn Fisher
- - key: picks.cassidoo.bio
- t: Fejlesztőtámogató, oktató, startup tanácsadó.
- - key: picks.cassidoo.description
+ - key: picks.cassidy_williams.bio
+ t: Developer advocate, educator, and startup advisor.
+ - key: picks.cassidy_williams.description
t: |
Szeretném kiemelni Lynn Fisher-t. Folyamatosan meglepi és
elragadtatja a CSS közösséget kreatív projektjeivel és kísérleteivel,
és imádom, hogy mennyit tudunk tőle tanulni!
- - key: picks.joshwcomeau.name
+ - key: picks.josh_comeau.name
t: Amelia Wattenberger
- - key: picks.joshwcomeau.bio
+ - key: picks.josh_comeau.bio
t: Szoftverfejlesző és a [CSS for JavaScript Developers](https://css-for-js.dev/) megalkotója.
- - key: picks.joshwcomeau.description
+ - key: picks.josh_comeau.description
t: |
Amelia a legszuperebb interaktív blogposztokat írja a
JS-ről és a CSS-ről.
Nézd meg ezt a posztot, ami arról szól, hogy hogyan működnek a százalékok CSS-ben!
- - key: picks.kevinjpowell.name
+ - key: picks.kevin_j_powell.name
t: Stephanie Eckles
- - key: picks.kevinjpowell.bio
+ - key: picks.kevin_j_powell.bio
t: CSS Evangelist
- - key: picks.kevinjpowell.description
+ - key: picks.kevin_j_powell.description
t: |
Változatlanul nagy hatást tesz rám Stephanie folyamatos kezdeményezése,
hogy megossza a tudását a modern CSS technikákról,
valamint a fertőző lelkesedése a CSS iránt.
- - key: picks.mmatuzo.name
+ - key: picks.manuel_matuzovic.name
t: aspect-ratio
- - key: picks.mmatuzo.bio
+ - key: picks.manuel_matuzovic.bio
t: Front-end fejlesztő Bécsből, a [htmhell.dev](https://htmhell.dev) megalkotója.
- - key: picks.mmatuzo.description
+ - key: picks.manuel_matuzovic.description
t: |
Az összes jelentősebb böngésző kiadta az aspect-ratio támogatást 2021-ben.
Először alábecsültem, de sok helyzeben hasznos lehet.
- - key: picks.lauragift_.name
+ - key: picks.gift_egwuenu.name
t: Kevin Powell
- - key: picks.lauragift_.bio
+ - key: picks.gift_egwuenu.bio
t: Frontend fejlesztő és alkotó
- - key: picks.lauragift_.description
+ - key: picks.gift_egwuenu.description
t: |
Kevin CSS vidókat csinál YouTube-on, és én nagyon élvezem ezeket nézni.
Érthető és élvezetes módon magyarázza el a CSS fogalmait.
- - key: picks.ericwbailey.name
+ - key: picks.eric_w_bailey.name
t: Miriam Suzanne
- - key: picks.ericwbailey.bio
+ - key: picks.eric_w_bailey.bio
t: Inkluzív dizájn és \#a11y szószóló.
- - key: picks.ericwbailey.description
+ - key: picks.eric_w_bailey.description
t: |
A CSS most fog éppen jóból fantasztikussá válni.
Miriam munkássága a Konténer Lekérdezéseken és Cascade Layers-en
meg fogja változtatni, hogy hogy írunk CSS kódot.
- - key: picks.samuelkraft.name
+ - key: picks.samuel_kraft.name
t: Vanilla Extract
- - key: picks.samuelkraft.bio
+ - key: picks.samuel_kraft.bio
t: Frontend & dizájn
- - key: picks.samuelkraft.description
+ - key: picks.samuel_kraft.description
t: |
Mostanában imádok Vanilla Extract-tal dolgozni. Olyan, mint a CSS modulok, de
teljesen típusos és a fejlesztői élmény varázslatos.
- - key: picks.sachagreif.name
+ - key: picks.sacha_greif.name
t: Open Props
- - key: picks.sachagreif.bio
+ - key: picks.sacha_greif.bio
t: A State of JS és a State of CSS megalkotója
- - key: picks.sachagreif.description
+ - key: picks.sacha_greif.description
t: |
Nagyon jó látni a visszacsatolási kört az új CSS funkciók és a projektek
között, amik használják őket! Adam Argyle Open Props-ja is egy jó példa a CSS custom
properties használatára.
- - key: picks.shadeed9.name
+ - key: picks.ahmad_shadeed.name
t: Konténer lekérdezések
- - key: picks.shadeed9.bio
+ - key: picks.ahmad_shadeed.bio
t: A [Debugging CSS](https://debuggingcss.com/) szerzője és a [ishadeed.com](http://ishadeed.com)-nál ír.
- - key: picks.shadeed9.description
+ - key: picks.ahmad_shadeed.description
t: |
Már megint a CSS konténer lekérdezések! Játszottunk velük egy kicsit a böngészőben.
Köszönjük Miriam Suzanne-nak, hogy segít ezt továbbvinni!
@@ -301,29 +292,29 @@ translations:
# - key: picks.georgedoescode.description
# t: |
- - key: picks.argyleink.name
+ - key: picks.adam_argyle.name
t: CSS zaj
- - key: picks.argyleink.bio
+ - key: picks.adam_argyle.bio
t: CSS a Google-nál
- - key: picks.argyleink.description
+ - key: picks.adam_argyle.description
t: |
A CSS által generált textúra és randomizálás egyedi és érdekes
képeket eredményez a dizájnodban.
Zaj eszközök tették ezt lehetővé.
- - key: picks.walterstephanie.name
+ - key: picks.stephanie_walter.name
t: Miriam Suzanne
- - key: picks.walterstephanie.bio
+ - key: picks.stephanie_walter.bio
t: UX kutató és CSS imádó
- - key: picks.walterstephanie.description
+ - key: picks.stephanie_walter.description
t: |
Miriam egy művész és egy aktivista, aki a szoftverfejlesztéssel és a művészettel ünnepli az emberi élmények sokszínűségét. Ő egy CSS szakértő, aki csodálatos munkát végez a CSS konténer lekérdezések specifikációján.
- - key: picks.michebarks.name
+ - key: picks.michelle_barker.name
t: Az "Egy színskála kiépítése" Adam Argyle által
- - key: picks.michebarks.bio
+ - key: picks.michelle_barker.bio
t: Senior Front End Fejlesztő
- - key: picks.michebarks.description
+ - key: picks.michelle_barker.description
t: |
Imádom ezt a cikket, mert bár a rendhagyó propertyk már egy ideje jelen vannak, de ez egy magasabb szintre emeli őket és jól bemutatja az erősségeiket. Remélem, hogy az emberek másként látják ezután őket, hogy többet tudnak, mint a sima változók.
@@ -333,11 +324,11 @@ translations:
# t: |
# One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use.
- - key: picks.kilianvalkhof.name
+ - key: picks.kilian_valkhof.name
t: prefers-reduced-data
- - key: picks.kilianvalkhof.bio
+ - key: picks.kilian_valkhof.bio
t: Webfejlesztő és a Polypane megalkotója
- - key: picks.kilianvalkhof.description
+ - key: picks.kilian_valkhof.description
t: |
Még több fejlesztőt kell rávennünk, hogy a böngészőket megkérjék erre, és rájöjjenek, hogy milyen nagy a hatása. A válaszolók 64%-a nem is tud róluk, úgyhogy van még mit tennünk!
diff --git a/state_of_css_2022.yml b/state_of_css_2022.yml
new file mode 100644
index 0000000..2f45e49
--- /dev/null
+++ b/state_of_css_2022.yml
@@ -0,0 +1,435 @@
+locale: en-US
+translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ - key: general.results.description
+ t: The 2022 edition of the annual survey about the latest trends in the CSS ecosystem.
+
+ - key: general.css2022.js2022_banner
+ t: The State of JS 2022 survey is currently open, you can [go take it right now](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!
+
+ - key: general.css2022.results_intro
+ t: |
+ CSS keeps progressing at an unprecedented rate. Not only are we seeing new features and properties, but even the language's foundations are being retooled and improved thanks to innovations like nesting and cascade layers.
+
+ Luckily this year we got help from someone at the forefront of all these changes: W3C working group member [Lea Verou](https://lea.verou.me/) has selected this year's survey questions, with a special focus on highlighting new and upcoming CSS features.
+
+ What's more, the survey results will also help browser vendors prioritize their roadmaps and work towards better compatibility between browsers.
+
+ With all this out of the way, let's see how CSS evolved in 2022!
+
+ ###########################################################################
+ # Introduction
+ ###########################################################################
+
+ - key: introduction.css2022
+ t: |
+ We thought CSS had already evolved into a pretty formidable language thanks to advancements like Flexbox, Grid, and CSS Variables. But it turns out this wasn't even its final form.
+
+ Parent selector, native nesting, container queries, cascade layers… The list of absolutely game-changing features coming imminently is pretty shocking when you think about it.
+
+ Thankfully, we have the best guide you could ask for to help us navigate these waters: [Lea Verou](http://lea.verou.me/) has taken the lead on this year's survey design, and the result is a survey that will hopefully encompass all the key innovations you should be aware of.
+
+ – Sacha Greif
+
+ P.S. Also new this year: we gave respondents the ability to **leave comments** on any feature or library mentioned in the survey! Make sure to look up these comments in each chart's sidebar.
+
+ ###########################################################################
+ # Tshirt
+ ###########################################################################
+
+ - key: sections.tshirt.title
+ t: T-shirt
+
+ - key: sections.tshirt.description
+ t: |
+ ## Support the Survey With the State of CSS T-Shirt
+
+ Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes.
+
+ But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for CSS at the same time!
+
+ - key: tshirt.about
+ t: About the T-shirt
+
+ - key: tshirt.description
+ t: |
+ We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
+
+ - key: tshirt.getit
+ t: Get It
+
+ - key: tshirt.price
+ t: USD $29 + shipping
+
+ - key: tshirt.designer.heading
+ t: About the Designer
+
+ - key: tshirt.designer.name
+ t: Christopher Kirk-Nielsen
+
+ - key: tshirt.designer.bio
+ t: |
+ Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+
+ ###########################################################################
+ # Charts
+ ###########################################################################
+
+ - key: options.features_categories.layout
+ aliasFor: sections.layout.title
+ - key: options.features_categories.shapes_graphics
+ aliasFor: sections.shapes_graphics.title
+ - key: options.features_categories.interactions
+ aliasFor: sections.interactions.title
+ - key: options.features_categories.typography
+ aliasFor: sections.typography.title
+ - key: options.features_categories.accessibility
+ aliasFor: sections.accessibility.title
+ - key: options.features_categories.other_features
+ aliasFor: sections.other_features.title
+ - key: options.features_categories.colors
+ aliasFor: sections.colors.title
+ - key: options.features_categories.selectors
+ aliasFor: sections.selectors.title
+
+
+ ###########################################################################
+ # Awards
+ ###########################################################################
+
+ - key: award.feature_adoption_delta_award.comment
+ t: |
+ The `gap` property for Flexbox is such a useful addition that it's not surprising
+ it would see a **{value}** progression in 2022
+
+ # - key: award.tool_usage_delta_award.comment
+ # t: No other tool comes even close to Tailwind CSS's dramatic **{value}** progression over the last year.
+
+ - key: award.most_commented_feature_award.comment
+ t: With **{value}** comments, no other feature even came close to generating as much feedback as Subgrid.
+
+ - key: award.tool_satisfaction_award.comment
+ t: |
+ Out of all the CSS-in-JS solutions, CSS Modules is the only one that maintained a
+ sky-high **{value}** retention ratio.
+
+ # - key: award.tool_interest_award.comment
+ # t: With a **{value}** ratio, CSS Modules again generated the most interest among CSS developers this year.
+
+ - key: award.most_write_ins_award.comment
+ t: |
+ With **{value}** mentions, the Arc browser was the tool most mentioned in freeform questions by far.
+
+
+ ###########################################################################
+ # Conclusion
+ ###########################################################################
+
+ - key: conclusion.css2022
+ t: |
+ [Last year](https://2021.stateofcss.com/en-US/conclusion/), Kilian predicted that the way we write CSS was about to change forever, and this year's results validate his prediction.
+
+ [Interop 2022](https://wpt.fyi/interop-2022) has brought browsers together working towards the same goals, and several features went from "this will never happen" to "this is now happening". Parent selectors (`:has()`) and container queries (`@container`) are two big ones in that category. For years it was hammered into developers that these could not happen due to performance implications, yet it turned out that both were possible.
+
+ Subgrid on the other hand was always on the roadmap, it was just a very big chunk of work. It is now supported by both Firefox and Safari, and being actively implemented in Chrome, so we will probably see much higher usage next year.
+
+ I predict that the stars of 2023 will be native Nesting, and color manipulation.
+ Nesting is currently [the primary reason](https://twitter.com/leaverou/status/806936438797307904) people still use preprocessors, so being able to rely on it natively will be incredibly freeing.
+
+ Working with color in CSS is also about to get a lot more exciting. There is a swath of features being implemented across the board as we speak. By the end of 2023, we will probably be able to rely on wide gamut colors and device independent colors (`color()`, `lab()`, `lch()`, `oklab()`, `oklch()`), and we'd be able to manipulate them in a basic way through `color-mix()`.
+
+ All of this together means that 2023 is likely to be a very exciting year for CSS. I look forward to all the amazing implementations to come, whether my predictions turn out to be correct or not. What a fantastic time to be writing CSS!
+
+ - key: conclusion.css2022.bio
+ t: W3C Technical Architecture Group Member, MIT CSAIL
+
+ ###########################################################################
+ # Picks
+ ###########################################################################
+
+ - key: picks.my_pick
+ t: 'My 2022 Pick: '
+ - key: picks.intro
+ t: We asked members of the CSS community to share their “pick of the year”
+
+ - key: picks.david_east.name
+ t: CSS Subgrid
+ - key: picks.david_east.bio
+ t: Advocate for building on the web
+ - key: picks.david_east.description
+ t: |
+ CSS Subgrid allows child elements to inherit their parents grid properties.
+ Soon, it will be much easier to lay elements out to the same grid
+ lines across the entire page.
+
+ - key: picks.bramus_van_damme.name
+ t: The `:has()` Selector
+ - key: picks.bramus_van_damme.bio
+ t: Chrome Developer Relations Engineer at Google
+ - key: picks.bramus_van_damme.description
+ t: |
+ You might know this one as the so-called “parent selector” but that name does it
+ no justice as it only covers a small part of what it can do.
+ This selector has essentially changed the way I write my CSS.
+
+ - key: picks.kevin_j_powell.name
+ t: Jhey Tompkins
+ - key: picks.kevin_j_powell.bio
+ t: CSS Evangelist
+ - key: picks.kevin_j_powell.description
+ t: |
+ Jhey is always pushing the limits of what we can do with CSS with
+ fun and impressive demos and Codepens. With all the new features landing in CSS recently,
+ Jhey is at the forefront of explaining how they work.
+
+ - key: picks.samuel_kraft.name
+ t: The `:has()` Selector
+ - key: picks.samuel_kraft.bio
+ t: Design Engineer
+ - key: picks.samuel_kraft.description
+ t: |
+ The new :has() selector is super powerful and unlocks new styling possibilities.
+ This great article from Jen Simmons breaks it down with explanations and practical examples.
+
+ - key: picks.josh_comeau.name
+ t: Modern CSS
+ - key: picks.josh_comeau.bio
+ t: Software developer and educator
+ - key: picks.josh_comeau.description
+ t: |
+ CSS has changed so much over the past few years.
+ Stephanie shows us how to leverage modern CSS features
+ to solve old problems in new ways.
+
+ - key: picks.adam_argyle.name
+ t: The `:has()` Selector
+ - key: picks.adam_argyle.bio
+ t: UI/CSS DevRel at Google
+ - key: picks.adam_argyle.description
+ t: |
+ CSS just because even stronger at orchestrating UI interaction across components.
+ We've barely scratched the surface of the impact of `:has()` on our styles.
+
+ - key: picks.eric_w_bailey.name
+ t: “Style with Stateful, Semantic Selectors” by Ben Myers
+ - key: picks.eric_w_bailey.bio
+ t: Accessibility advocate and CSS nerd
+ - key: picks.eric_w_bailey.description
+ t: |
+ Ben demonstrates how utilizing ARIA
+ attribute selectors can simply and powerfully tie appearance to state.
+
+ - key: picks.michelle_barker.name
+ t: Interop 2022
+ - key: picks.michelle_barker.bio
+ t: Writer and creator of front-end blog CSS { In Real Life }
+ - key: picks.michelle_barker.description
+ t: |
+ Interop is a collaboration between all of the major browser vendors,
+ agreeing 15 key areas of focus for implementation —
+ including game-changing new CSS features like container queries,
+ cascade layers and color functions.
+
+ - key: picks.gift_egwuenu.name
+ t: Learn CSS
+ - key: picks.gift_egwuenu.bio
+ t: Developer Advocate at Cloudflare
+ - key: picks.gift_egwuenu.description
+ t: |
+ My recommended resource for anyone looking to learn CSS from the ground up,
+ I also use it as a reference everytime I need to look up any CSS property.
+
+ - key: picks.ahmad_shadeed.name
+ t: Container Queries
+ - key: picks.ahmad_shadeed.bio
+ t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com)
+ - key: picks.ahmad_shadeed.description
+ t: |
+ If I would pick one highlight for 2022, it's container queries!
+ They are finally here in stable browser near you
+
+ # - key: picks.georgedoescode.name
+ # t:
+ # - key: picks.georgedoescode.bio
+ # t:
+ # - key: picks.georgedoescode.description
+ # t: |
+
+ - key: picks.jen_simmons.name
+ t: The `:has()` Selector
+ - key: picks.jen_simmons.bio
+ t: Web technologies evangelist at Apple
+ - key: picks.jen_simmons.description
+ t: |
+ For two decades, “parent selector” was a top requested feature for CSS.
+ Then in 2022, in a total surprise, the :has() pseudo-class arrived to solve this and far more.
+
+ - key: picks.sara_soueidan.name
+ t: The `:has()` Selector
+ - key: picks.sara_soueidan.bio
+ t: Independent inclusive design engineer
+ - key: picks.sara_soueidan.description
+ t: |
+ We've been wishing and waiting for CSS container queries for so long.
+ But then `:has()` arrived shortly after,
+ and it felt like it was "everything we never knew we always wanted".
+
+ - key: picks.adam_wathan.name
+ t: Empty CSS Variables
+ - key: picks.adam_wathan.bio
+ t: Creator of Tailwind CSS
+ - key: picks.adam_wathan.description
+ t: |
+ Not many people know this but `--my-var: ;` is totally valid CSS,
+ and it's way more useful than you think.
+ We use it in Tailwind CSS all the time to make it
+ possible to decompose a single CSS property into multiple classes.
+
+ # - key: picks.christianoliff.bio
+ # t: Front-end developer for Trimble MAPS
+ # - key: picks.christianoliff.description
+ # t: |
+ # One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use.
+
+ - key: picks.kilian_valkhof.name
+ t: Interop 2022
+ - key: picks.kilian_valkhof.bio
+ t: Web developer and creator of Polypane
+ - key: picks.kilian_valkhof.description
+ t: |
+ Started in 2021 as Compat 2021, browser engine makers
+ have started coordinating which features they prioritize.
+ Not only is this closing the various feature gaps that exist
+ between between browsers, it's also increasing the speed with which new
+ features like @layer lands across browsers.
+
+ # - key: picks.piccalilli_.bio
+ # t: Freelance designer & dev who runs piccalil.li
+ # - key: picks.piccalilli_.description
+ # t: |
+ # This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.
+
+ # - key: picks.piccalilli_.bio
+ # t: Freelance designer & dev who runs piccalil.li
+ # - key: picks.piccalilli_.description
+ # t: |
+ # This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.
+
+ # - key: picks.sarasoueidan.bio
+ # t: Independent UI/design engineer
+ # - key: picks.sarasoueidan.description
+ # t: |
+ # My pick is a person, namely Rachel Andrew. She taught CSS Grid to a whole generation of developers.
+
+ # - key: picks.5t3ph.bio
+ # t: Software Engineer @ Microsoft
+ # - key: picks.5t3ph.description
+ # t: |
+ # In this conference talk, Manuel Matuzovic provides thoughtfully
+ # crafted examples that are engaging, approachable, and actionable.
+
+ # - key: picks.hugogiraudel.bio
+ # t: Non-binary accessibility & diversity advocate
+ # - key: picks.hugogiraudel.description
+ # t: |
+ # Fela is an amazing piece of software.
+ # It’s pretty powerful, relatively easy to use and very performant
+
+ # - key: picks.foolip.bio
+ # t: Software Engineer @ Google
+ # - key: picks.foolip.description
+ # t: |
+ # Sergio has recently fixed lots of Flexbox in WebKit and even some in Chromium,
+ # notably bringing flex gap to WebKit,
+ # which means that soon it will be available on all modern browsers.
+
+ # - key: picks.jina.bio
+ # t: Design systems advocate and practitioner
+ # - key: picks.jina.description
+ # t: |
+ # The media query to reduce motion, which helps avoid
+ # triggering dizziness and discomfort.
+
+
+
+ ###########################################################################
+ # Sponsors
+ ###########################################################################
+
+ - key: sponsors.frontendmasters.description
+ t: Advance your skills with in-depth, modern front-end engineering courses.
+ - key: sponsors.nijibox.description
+ t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease.
+ - key: sponsors.renderatl.description
+ t: The largest tech conference with a dedicated Design & CSS track.
+ - key: sponsors.google_chrome.description
+ t: Thanks to the Google Chrome team for supporting our work.
+
+ ###########################################################################
+ # FAQ/About
+ ###########################################################################
+
+ - key: about.content
+ t: >
+ The 2022 State of CSS survey ran from October 1 to November 1 2022, and collected 14,310 responses. The survey is run by me, [Sacha Greif](https://sachagreif.com/), with help from a team of open-source contributors and consultants.
+
+ This year's logo and t-shirt were reused from last year, when they were designed and animated by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
+
+ ### Survey Goals
+
+ This survey, along with the [State of JavaScript](https://stateofjs.com/) survey, was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.
+
+ As such, these surveys are focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included.
+
+ Additionally, survey data is also used by browser vendors to prioritize features and inform initiatives such as [Interop 2022](https://wpt.fyi/interop-2022).
+
+ ### Survey Design
+
+ This year, survey design was lead by [Lea Verou](https://lea.verou.me/) thanks to a funding grant from the Google Chrome team, and managed publicly [on GitHub](https://github.com/orgs/Devographics/projects/1). All survey questions were optional.
+
+ Additionally, going forward we will also coordinate survey design, review, and feedback through a [Working Group mailing list](https://www.devographics.com/working-group/).
+
+ ### Survey Audience
+
+ The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic.
+
+ ### Project Funding
+
+ Funding from this project comes from a variety of sources:
+
+ - **T-shirt sales**.
+
+ - **Sponsored Links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).
+
+ - **Sponsored Charts**: starting last year, anybody can now also choose to directly sponsor a chart for $10 or more, and get their Twitter avatar displayed next to it.
+
+ - **Google**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a budget to hire Lea to help design the survey, as well as funded me directly to help support my work.
+
+ - **Nijibox**: Japan-based [Nijibox](https://nijibox.jp/) has also graciously accepted to sponsor my efforts to help make these yearly surveys more sustainable.
+
+ ### Technical Overview
+
+ You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). Our code is [open-source](https://github.com/Devographics/Monorepo/).
+
+ - **Data collection**: [Next.js](https://nextjs.org/) app running on [Vercel](https://vercel.com/).
+
+ - **Data storage/processing**: MongoDB & MongoDB Aggregations running on [MongoDB Atlas](https://cloud.mongodb.com/).
+
+ - **Data API**: Node.js GraphQL API running on [Render](https://render.com/).
+
+ - **Results Site**: [Gatsby](https://www.gatsbyjs.com/) React app running on [Netlify](https://netlify.com/).
+
+ - **Data Visualizations**: [Nivo](https://nivo.rocks/) React dataviz library.
+
+ - **Type**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).
+
+ ### Feedback
+
+ - [Report a technical issue](https://github.com/Devographics/Monorepo/issues)
+ - [Make a suggestion for next year](https://github.com/Devographics/surveys/issues/66)
+ - [Other non-technical issues](https://github.com/Devographics/surveys/issues)
+ - [Join our Discord](https://discord.gg/tuWRUWVyJs)
+ - [Join the Devographics Working Group](https://www.devographics.com/working-group/) to participate in the design and review of future surveys.
diff --git a/state_of_graphql_2022.yml b/state_of_graphql_2022.yml
new file mode 100644
index 0000000..893075c
--- /dev/null
+++ b/state_of_graphql_2022.yml
@@ -0,0 +1,360 @@
+locale: en-US
+translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ - key: general.results.description
+ t: The 2022 edition of the annual survey about the latest trends in the GraphQL ecosystem.
+
+ - key: general.livestream_announcement
+ t: Make sure to tune in for our [special survey results livestream](https://dev.to/sachagreif/state-of-javascript-2021-livestream-24a5) on February 22! (English)
+
+ ###########################################################################
+ # Introduction
+ ###########################################################################
+
+ - key: introduction.graphql2022
+ t: >
+
+ Since being originally created at Facebook in September 2015, many developers have embraced GraphQL as a new and promising way to build APIs.
+
+
+ Yet 7 years later, a lot of questions still remain: when do you need GraphQL exactly? Should you hand-code your GraphQL API or generate it from your database? And will it ever replace REST?
+
+
+ To answer these questions and many more, we've created the first ever **State of GraphQL** community survey. Over 3,000 developers took part this year, and this is just the beginning.
+
+
+ We hope you enjoy browsing the data, and make sure to check out our [GraphQL API](https://graphiql.devographics.com/) as well!
+
+
+ – Sacha Greif
+
+ ###########################################################################
+ # Tshirt
+ ###########################################################################
+
+ - key: sections.tshirt.title
+ t: T-shirt
+
+ - key: sections.tshirt.description
+ t: |
+ ## Support the Survey With the State of JavaScript T-Shirt
+
+ Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes.
+
+ But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for JavaScript at the same time!
+
+ - key: tshirt.about
+ t: About the T-shirt
+
+ - key: tshirt.description
+ t: |
+ We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
+
+ - key: tshirt.getit
+ t: Get It
+
+ - key: tshirt.price
+ t: USD $29 + shipping
+
+ - key: tshirt.designer.heading
+ t: About the Designer
+
+ - key: tshirt.designer.name
+ t: Christopher Kirk-Nielsen
+
+ - key: tshirt.designer.bio
+ t: |
+ Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+
+ ###########################################################################
+ # Sections
+ ###########################################################################
+
+ - key: sections.user_info_graphql2022.description
+ t: |
+ **3,094** respondents took part in this year's survey.
+
+ - key: sections.features_graphql2022.description
+ t: |
+ GraphQL may be a simple concept at its core, but there are many features and patterns to consider when you dig below the surface.
+
+ - key: sections.libraries_graphql2022.description
+ t: |
+ The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API.
+
+ - key: sections.tools_others_graphql2022.description
+ t: |
+ Picking the right tools to use in combination with GraphQL can make all the difference.
+
+ - key: sections.usage_graphql2022.description
+ t: |
+ We wanted to know not only how people use GraphQL, but also *why* they use it – as well as where GraphQL is still lacking…
+
+ - key: sections.resources_graphql2022.description
+ t: |
+ We're sure you'll discover at least one or two new people, podcasts, or blogs to follow!
+
+ ###########################################################################
+ # Charts
+ ###########################################################################
+
+ - key: options.features_categories.graphql_language
+ aliasFor: sections.graphql_language.title
+ - key: options.features_categories.directives
+ aliasFor: sections.directives.title
+ - key: options.features_categories.security_performance
+ aliasFor: sections.security_performance.title
+ - key: options.features_categories.other_features
+ aliasFor: sections.other_features.title
+
+ - key: blocks.tools_quadrant.description
+ t: |
+ This chart shows each technology's **retention ratio** over its total **user count**.
+ It can be divided into four quadrants:
+
+ - **1**: Low usage, high retention. Technologies worth keeping an eye on.
+
+ - **2**: High usage, high retention. Safe technologies to adopt.
+
+ - **3**: Low usage, low retention. Technologies that are harder to recommend currently.
+
+ - **4**: High usage, low retention. Reassess these technologies if you're currently using them.
+
+ ###########################################################################
+ # Notes
+ ###########################################################################
+
+ - key: blocks.gender.note
+ t: |
+ If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.
+
+ - key: blocks.css_missing_features.note
+ t: |
+ You can explore the full dataset of answers to this question in [this side project](https://whatsmissingfromcss.com/).
+
+ - key: blocks.source.note
+ t: >
+
+ This chart aggregates a mix of referrers, URL parameters, and freeform answers.
+
+ - State of JS: the [State of JS](https://stateofjs.com) mailing list.
+
+ - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.
+
+ - Work: matches `work`, `colleagues`, `coworkers`, etc.
+
+ ###########################################################################
+ # Awards
+ ###########################################################################
+
+ - key: award.feature_adoption_delta_award.comment
+ t: With a **{value}** progression in 2021, the nullish coalescing operator (??) has quickly become an integral part of JavaScript.
+
+ - key: award.tool_usage_delta_award.comment
+ t: esbuild is barely two years old, but with a **{value}** progression over the last year it's already gaining ground.
+
+ - key: award.tool_satisfaction_award.comment
+ t: Vite takes the top spot with a sky-high **{value}** retention ratio!
+
+ - key: award.tool_interest_award.comment
+ t: With a **{value}** interest ratio, Vite once again wins the gold!
+
+ - key: award.most_write_ins_award.comment
+ t: Many questions also accepted write-in answers, and with **{value}** mentions Elm was the most popular item overall.
+
+ ###########################################################################
+ # Conclusion
+ ###########################################################################
+
+ - key: conclusion.graphql2022
+ t: |
+
+ GraphQL is truly part of how we build modern applications today.
+
+ More and more companies are creating products, services, tooling, RFCs and most of that work is being done as open-source, which is fantastic to see! It's crucial for a flourishing ecosystem to have healthy competition and collaboration!
+
+ As a result, the tide is changing on how we consume GraphQL on the client, with libraries such as urql and React Query being popular choices today alongside stalwarts like Apollo Client and Relay. It's also great to see GraphQL continue to grow and flourish in languages other than JavaScript – there are now stable and mature GraphQL servers and clients in almost all of the most popular programming languages!
+
+ GraphQL itself is changing as well, with much anticipated changes edging closer to being officially part of the specification. We'll soon see changes with stream, defer, input polymorphism, as well as improvements around subscriptions and live queries.
+
+ Moreover, there's now dedicated companies focused on GraphQL security, caching, tracing errors, deploying to the edge, abstracting databases and backends into simple schemas, and so much more that make working with GraphQL even more approachable than it ever has been before.
+
+ We also recently witnessed a brand new GraphiQL release that boasts a powerful plugin ecosystem, fewer dependencies, and even dark mode! And the [GraphQL Foundation](https://graphql.org/foundation/) continues to grow with new members joining regularly to help sustain the efforts of all those involved in educating, building, and steering the future of GraphQL.
+
+ GraphQL has found its place in the ecosystem, and it has an exciting future ahead!
+
+ - key: conclusion.graphql2022.bio
+ t: Senior Developer Relations @ Grafbase
+
+ ###########################################################################
+ # Picks
+ ###########################################################################
+
+ - key: picks.my_pick
+ t: "My 2022 Pick: "
+ - key: picks.intro
+ t: We asked members of the GraphQL community to share their “pick of the year”
+
+ - key: picks.jamie_barton.name
+ t: GraphQL Mesh
+ - key: picks.jamie_barton.bio
+ t: Full Stack Developer & Educator
+ - key: picks.jamie_barton.description
+ t: |
+ More and more people are looking for solutions to bridge the
+ gap between all of their services. Mesh lets you do that with GraphQL,
+ and non-GraphQL services.
+
+ - key: picks.tanmai_gopal.name
+ t: Streaming over GraphQL Subscriptions
+ - key: picks.tanmai_gopal.bio
+ t: CEO & co-founder at Hasura
+ - key: picks.tanmai_gopal.description
+ t: |
+ Modern APIs need to handle an increasing volume of data,
+ or fast-moving data that is a stream.
+ Could we use GraphQL subscriptions as a streaming API?
+
+ - key: picks.tim_suchanek.name
+ t: Benjie Gillam
+ - key: picks.tim_suchanek.bio
+ t: Software Engineer and Entrepreneur
+ - key: picks.tim_suchanek.description
+ t: |
+ Benjie is one of the main people pushing GraphQL forward.
+ His engagement in the WG, TSC, and various foundation initiatives is second to none.
+
+ - key: picks.uri_goldshtein.name
+ t: Pothos GraphQL
+ - key: picks.uri_goldshtein.bio
+ t: Founder of The Guild
+ - key: picks.uri_goldshtein.description
+ t: |
+ Code-first, TS schema builder. Easy to use yet powerful, plugin based and very well maintained.
+ If you go code first, this is the one to choose.
+
+ - key: picks.benjie_gillam.name
+ t: SpecNews Podcast
+ - key: picks.benjie_gillam.bio
+ t: Community-funded OSS maintainer
+ - key: picks.benjie_gillam.description
+ t: |
+ Latest activities from the GraphQL Working Group summarised in just 5-10 minutes per month.
+ Cutting edge GraphQL knowledge with minimal effort!
+
+ - key: picks.xxxx.name
+ t:
+ - key: picks.xxxx.bio
+ t:
+ - key: picks.xxxx.description
+ t: |
+ ###########################################################################
+ # Sponsors
+ ###########################################################################
+
+ - key: sponsors.nijibox.description
+ t: >
+ One-stop support for UX design, creativity, and development.
+
+ - key: sponsors.frontendmasters.description
+ t: >
+ Advance your skills with in-depth, modern front-end engineering courses.
+
+ - key: sponsors.nhost.description
+ t: >
+ Nhost is an open source Firebase alternative with GraphQL.
+
+ - key: sponsors.apollo.description
+ t: >
+ Apollo's supergraph empowers product and engineering teams to quickly create incredible experiences for their customers.
+
+ - key: sponsors.the_guild.description
+ t: >
+ The Guild's open-source tools and ecosystem provides everything you need for evolving your APIs.
+
+ - key: sponsors.hasura.description
+ t: >
+ Run Hasura locally or in the cloud, and connect it to your new or existing databases to instantly get a production-grade GraphQL API.
+
+ - key: sponsors.graphql_wtf.description
+ t: >
+ Learn something new with GraphQL, every week. Get new episodes directly to your inbox.
+
+ - key: sponsors.grafbase.description
+ t: >
+ Instant serverless GraphQL backends. Grafbase provides the best developer experience to deploy GraphQL APIs.
+
+ ###########################################################################
+ # FAQ/About
+ ###########################################################################
+
+ - key: about.content
+ t: >
+ The 2022 State of GraphQL survey ran from June 15, 2022 to July 15, 2022, and collected 3,094 responses. The survey is primarily run by me, [Sacha Greif](https://sachagreif.com/), with help from a team of open-source contributors and consultants.
+
+ ### Survey Goals
+
+ This survey, along with the [State of CSS](https://stateofcss.com/) and [State of JS](https://stateofjs.com/) surveys, was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.
+
+
+ Because of the relatively small sample size, this survey should be taken as a **snapshot of a subset of developers**, and is not meant to speak for the entire GraphQL ecosystem.
+
+
+ The survey is also **not affiliated with GraphQL or Facebook**.
+
+ ### Survey Design
+
+ The survey was designed collaboratively, with an open feedback period where the survey contents were discussed on GitHub ([1](https://github.com/Devographics/Monorepo/issues/86), [2](https://github.com/Devographics/Monorepo/issues/90)). All survey questions were optional.
+
+ ### Survey Audience
+
+ The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily inbound from social media traffic.
+
+ ### Representativeness & Inclusivity
+
+ While we believe it's important to give a voice to every community, the reality is that an open survey like this one will always struggle to properly represent everybody, especially when operating through systems that already carry their own inherent biases.
+
+
+ In order to counter-balance this, we are implementing three distinct strategies:
+
+
+ - **Outreach**: we always try to reach out to different organizations (such as BIPOC- or LGBTQ-focused organizations, or online teaching platforms) to try and diversify our own audience.
+
+ - **Data Analysis**: through features like facets and variants, we're always trying to make it easier to surface the voices of any demographic segment, no matter how minoritized it might be in our data.
+
+ - **Barrier Lowering**: making the survey too long, inaccessible, slow to load, English-only, etc. can all contribute to imposing an "effort tax" that cuts off the parts of the community that can't afford to pay it. Fixing these issues can lower the barrier to entry and in the process make our audience more diverse.
+
+
+ ### Project Funding
+
+ Funding from this project comes from a variety of sources:
+
+
+ - **Chart Sponsorships**: members of the community can donate to the survey in exchange for having their name featured in the report.
+
+ - **Sponsored Links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).
+
+ - **Other Funding**: the companies listed in the "Our Partners" section on the [introduction page](/introduction) have also contributed financially or otherwise.
+
+
+ Sponsors have no say over the survey contents or the way the results are presented, and sponsorships are only decided once all data has already been collected.
+
+ ### Technical Overview
+
+ You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb).
+
+
+ - **Data collection**: custom [Vulcan.js](http://vulcanjs.org/) app.
+
+ - **Data storage/processing**: MongoDB & MongoDB Aggregations.
+
+ - **Data API**: Node.js GraphQL API.
+
+ - **Results Site**: [Gatsby](https://www.gatsbyjs.com/) React app.
+
+ - **Data Visualizations**: [Nivo](https://nivo.rocks/) React dataviz library.
+
+ - **Type**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).
diff --git a/state_of_js.yml b/state_of_js.yml
index 33e9ec7..1df8ae3 100644
--- a/state_of_js.yml
+++ b/state_of_js.yml
@@ -16,7 +16,11 @@ translations:
Töltsd ki ezt a kérdőívet és segíts nekünk megérteni, hogy a fejlesztők melyik könyvtárakat
akarják következőként megtanulni, melyikekkel vannak a legjobban megelégedve, és még több szempontot is.
+ - key: general.state_of_js.title
+ t: The State of JavaScript Developer Survey
+ - key: general.state_of_js.description
+ t: The annual developer survey of the JavaScript ecosystem
###########################################################################
# Sections
###########################################################################
@@ -65,6 +69,10 @@ translations:
t: Adatréteg
- key: sections.datalayer.description
t: Adatok betöltése és kezelése
+ - key: sections.rendering_frameworks.title
+ t: Rendering Frameworks
+ - key: sections.rendering_frameworks.description
+ t: Frameworks focused on rendering and serving your application
- key: sections.back_end_frameworks.title
t: Back-end keretrendszerek
@@ -101,12 +109,37 @@ translations:
- key: sections.other_tools.description
t: Ezekből az eszközökből és technológiákból csak azokat válaszd ki, amiket rendszeresen használsz.
+ - key: sections.resources_js.title
+ t: Resources
+ - key: sections.resources_js.description
+ t: What JavaScript resources do you consult?
+
+ - key: sections.usage_js.title
+ t: Usage
+ - key: sections.usage_js.description
+ t: How you use JavaScript
+
+ ###########################################################################
+ # Survey Help
+ ###########################################################################
+
+ - key: features.features_intro
+ t: >
+ Welcome to the survey! This first part is all about figuring out
+ which **features** of the JavaScript language you know about.
+ And if you know about something but haven't yet used it, that's fine too!
+
+ - key: tools.tools_intro
+ t: >
+ The next couple sections focus on the **libraries** and **frameworks** that make up
+ the JavaScript ecosystem. Let us know what you're excited about!
+
###########################################################################
# Options
###########################################################################
# JS pain points
- # - key: options.js_pain_points.browser_interoperability
+ # - key: options.top_js_pain_points.browser_interoperability
# t: Browser Compatibility
# - key: options.js_pain_points.browser_interoperability.description
# t: Differences between Chrome, Safari, Firefox, etc.
@@ -163,6 +196,74 @@ translations:
# - key: options.js_pain_points.xxx.description
# t:
+ - key: options.top_js_pain_points.state_management
+ aliasFor: options.js_pain_points.state_management
+ - key: options.top_js_pain_points.state_management.description
+ aliasFor: options.js_pain_points.state_management.description
+ - key: options.top_js_pain_points.managing_dependencies
+ aliasFor: options.js_pain_points.managing_dependencies
+ - key: options.top_js_pain_points.managing_dependencies.description
+ aliasFor: options.js_pain_points.managing_dependencies.description
+ - key: options.top_js_pain_points.architecture
+ aliasFor: options.js_pain_points.architecture
+ - key: options.top_js_pain_points.architecture.description
+ aliasFor: options.js_pain_points.architecture.description
+ - key: options.top_js_pain_points.finding_packages
+ aliasFor: options.js_pain_points.finding_packages
+ - key: options.top_js_pain_points.finding_packages.description
+ aliasFor: options.js_pain_points.finding_packages.description
+ - key: options.top_js_pain_points.writing_modules
+ aliasFor: options.js_pain_points.writing_modules
+ - key: options.top_js_pain_points.writing_modules.description
+ aliasFor: options.js_pain_points.writing_modules.description
+ - key: options.top_js_pain_points.debugging
+ aliasFor: options.js_pain_points.debugging
+ - key: options.top_js_pain_points.debugging.description
+ aliasFor: options.js_pain_points.debugging.description
+ - key: options.top_js_pain_points.async_code
+ aliasFor: options.js_pain_points.async_code
+ - key: options.top_js_pain_points.async_code.description
+ aliasFor: options.js_pain_points.async_code.description
+ - key: options.top_js_pain_points.modules_management
+ aliasFor: options.js_pain_points.modules_management
+ - key: options.top_js_pain_points.modules_management.description
+ aliasFor: options.js_pain_points.modules_management.description
+ - key: options.top_js_pain_points.date_management
+ aliasFor: options.js_pain_points.date_management
+ - key: options.top_js_pain_points.date_management.description
+ aliasFor: options.js_pain_points.date_management.description
+
+ - key: options.top_js_pain_points.build_tools
+ t: Build Tools
+ - key: options.top_js_pain_points.typing
+ t: Typing
+ - key: options.top_js_pain_points.typescript
+ t: TypeScript
+ - key: options.top_js_pain_points.esm_cjs
+ t: ESM vs CJS
+ - key: options.top_js_pain_points.testing
+ t: Testing
+ - key: options.top_js_pain_points.performance
+ t: Performance
+ - key: options.top_js_pain_points.too_many_choices
+ t: Too Many Choices
+ - key: options.top_js_pain_points.react
+ t: React
+ - key: options.top_js_pain_points.bundlers
+ t: Bundlers
+ - key: options.top_js_pain_points.complexity
+ t: Complexity
+ - key: options.top_js_pain_points.standard_library
+ t: Standard Library
+ - key: options.top_js_pain_points.tooling
+ t: Tooling
+ - key: options.top_js_pain_points.dependencies
+ t: Dependencies
+ - key: options.top_js_pain_points.security
+ t: Security
+ - key: options.top_js_pain_points.slow
+ t: Slowness
+
# JS missing features
- key: options.currently_missing_from_js.static_typing
t: Statikus típusok
@@ -201,6 +302,183 @@ translations:
# - key: options.currently_missing_from_js.xxx.description
# t:
+ - key: options.top_currently_missing_from_js.static_typing
+ aliasFor: options.currently_missing_from_js.static_typing
+ - key: options.top_currently_missing_from_js.static_typing.description
+ aliasFor: options.currently_missing_from_js.static_typing.description
+ - key: options.top_currently_missing_from_js.standard_library
+ aliasFor: options.currently_missing_from_js.standard_library
+ - key: options.top_currently_missing_from_js.standard_library.description
+ aliasFor: options.currently_missing_from_js.standard_library.description
+ - key: options.top_currently_missing_from_js.pattern_matching
+ aliasFor: options.currently_missing_from_js.pattern_matching
+ - key: options.top_currently_missing_from_js.pattern_matching.description
+ aliasFor: options.currently_missing_from_js.pattern_matching.description
+ - key: options.top_currently_missing_from_js.pipe_operator
+ aliasFor: options.currently_missing_from_js.pipe_operator
+ - key: options.top_currently_missing_from_js.pipe_operator.description
+ aliasFor: options.currently_missing_from_js.pipe_operator.description
+ - key: options.top_currently_missing_from_js.decorators
+ aliasFor: options.currently_missing_from_js.decorators
+ - key: options.top_currently_missing_from_js.decorators.description
+ aliasFor: options.currently_missing_from_js.decorators.description
+ - key: options.top_currently_missing_from_js.immutable_data_structures
+ aliasFor: options.currently_missing_from_js.immutable_data_structures
+ - key: options.top_currently_missing_from_js.immutable_data_structures.description
+ aliasFor: options.currently_missing_from_js.immutable_data_structures.description
+ - key: options.top_currently_missing_from_js.better_date_management
+ aliasFor: options.currently_missing_from_js.better_date_management
+ - key: options.top_currently_missing_from_js.better_date_management.description
+ aliasFor: options.currently_missing_from_js.better_date_management.description
+ - key: options.top_currently_missing_from_js.observable
+ aliasFor: options.currently_missing_from_js.observable
+ - key: options.top_currently_missing_from_js.observable.description
+ aliasFor: options.currently_missing_from_js.observable.description
+
+ - key: options.top_currently_missing_from_js.static_typing
+ t: Static Typing
+ - key: options.top_currently_missing_from_js.standard_library
+ t: Standard Library
+ - key: options.top_currently_missing_from_js.operator_overloading
+ t: Operator Overloading
+ - key: options.top_currently_missing_from_js.immutable
+ t: Immutable Data Structures
+ - key: options.top_currently_missing_from_js.deep_clone
+ t: Deep Clone
+ - key: options.top_currently_missing_from_js.enums
+ t: Enums
+ - key: options.top_currently_missing_from_js.decorators
+ t: Decorators
+ - key: options.top_currently_missing_from_js.multithreading
+ t: Multithreading
+ - key: options.top_currently_missing_from_js.pipe_operator
+ t: Pipe Operator
+ - key: options.top_currently_missing_from_js.native_observables
+ t: Native Observables
+
+ # What do you use JS for?
+ - key: options.what_do_you_use_js_for.frontend_development
+ t: Frontend Development
+ - key: options.what_do_you_use_js_for.backend_development
+ t: Backend Development
+ - key: options.what_do_you_use_js_for.data_analysis
+ t: Data Analysis
+ - key: options.what_do_you_use_js_for.machine_learning
+ t: Machine Learning
+ - key: options.what_do_you_use_js_for.desktop_apps
+ t: Desktop Apps
+ - key: options.what_do_you_use_js_for.mobile_apps
+ t: Mobile Apps
+ - key: options.what_do_you_use_js_for.embedded_apps
+ t: Embedded Apps
+ - key: options.what_do_you_use_js_for.game_development
+ t: Game Development
+ - key: options.what_do_you_use_js_for.data_visualization
+ t: Data Visualization
+ - key: options.what_do_you_use_js_for.graphics_animation
+ t: Graphics & Animation
+
+ - key: options.what_do_you_use_js_for.scripting
+ t: Scripting
+ - key: options.what_do_you_use_js_for.command_line_tools
+ t: Command Line Tools
+ - key: options.what_do_you_use_js_for.developer_tooling
+ t: Developer Tooling
+ - key: options.what_do_you_use_js_for.automation
+ t: Automation
+ - key: options.what_do_you_use_js_for.bots
+ t: Bots
+ - key: options.what_do_you_use_js_for.testing
+ t: Testing
+ - key: options.what_do_you_use_js_for.browser_extensions
+ t: Browser Extensions
+ - key: options.what_do_you_use_js_for.api
+ t: APIs
+ - key: options.what_do_you_use_js_for.infrastructure_as_code
+ t: Infrastructure as Code
+ - key: options.what_do_you_use_js_for.prototyping
+ t: Prototyping
+
+ # JS App Patterns
+
+ - key: options.js_app_patterns.single_page_app
+ t: Single Page Application (SPA)
+ - key: options.js_app_patterns.single_page_app.description
+ t: Apps that run entirely in the browser
+ - key: options.js_app_patterns.multiple_page_app
+ t: Multi-Page Application (MPA)
+ - key: options.js_app_patterns.multiple_page_app.description
+ t: Apps that run entirely on the server, with minimal client-side dynamic behavior
+ - key: options.js_app_patterns.static_site_generation
+ t: Static Site Generation (SSG)
+ - key: options.js_app_patterns.static_site_generation.description
+ t: Pre-rendered static content, with or without a client-side dynamic element
+ - key: options.js_app_patterns.server_side_rendering
+ t: Server-Side Rendering (SSR)
+ - key: options.js_app_patterns.server_side_rendering.description
+ t: Dynamically rendering HTML content on the server before rehydrating it on the client
+ - key: options.js_app_patterns.partial_hydration
+ t: Partial Hydration
+ - key: options.js_app_patterns.partial_hydration.description
+ t: Only hydrating some of your components on the client (e.g. React Server Components)
+ - key: options.js_app_patterns.progressive_rehydration
+ t: Progressive Hydration
+ - key: options.js_app_patterns.progressive_rehydration.description
+ t: Controlling the order of component hydration on the client
+ - key: options.js_app_patterns.islands_architecture
+ t: Islands Architecture
+ - key: options.js_app_patterns.islands_architecture.description
+ t: Isolated islands of dynamic behavior with multiple entry points in an otherwise static site (Astro, Eleventy)
+ - key: options.js_app_patterns.progressive_enhancement
+ t: Progressive Enhancement
+ - key: options.js_app_patterns.progressive_enhancement.description
+ t: Making sure an app is functional even without JavaScript
+ - key: options.js_app_patterns.incremental_static_generation
+ t: Incremental Static Generation
+ - key: options.js_app_patterns.incremental_static_generation.description
+ t: Being able to dynamically augment or modify a static site even after the initial build (Next.js ISR, Gatsby DSG)
+ - key: options.js_app_patterns.streaming_ssr
+ t: Streaming SSR
+ - key: options.js_app_patterns.streaming_ssr.description
+ t: Breaking down server-rendered content in smaller streamed chunks
+ - key: options.js_app_patterns.resumability
+ t: Resumability
+ - key: options.js_app_patterns.resumability.description
+ t: Serializing framework state on the server so the client can resume execution with no duplicated code execution.
+ - key: options.js_app_patterns.edge_rendering
+ t: Edge Rendering
+ - key: options.js_app_patterns.edge_rendering.description
+ t: Altering rendered HTML at the edge before sending it on to the client
+
+ - key: options.js_app_patterns.micro_frontend
+ t: Micro Frontend
+ - key: options.js_app_patterns.domain_driven_design
+ t: Domain-Driven Design
+ - key: options.js_app_patterns.serverless
+ t: Serverless
+ - key: options.js_app_patterns.pespa
+ t: PESPA
+
+ # slider
+ - key: options.js_ts_balance.0
+ t: 100% JS
+ - key: options.js_ts_balance.1
+ t: "|"
+ - key: options.js_ts_balance.2
+ t: "|"
+ - key: options.js_ts_balance.3
+ t: "|"
+ - key: options.js_ts_balance.4
+ t: "50/50"
+ - key: options.js_ts_balance.5
+ t: "|"
+ - key: options.js_ts_balance.6
+ t: "|"
+ - key: options.js_ts_balance.7
+ t: "|"
+ - key: options.js_ts_balance.8
+ t: 100% TS
+
###########################################################################
# Features
###########################################################################
@@ -275,11 +553,78 @@ translations:
t: >
Megjegyzendő, hogy ez a kérdés csak az [Angular](https://angular.io/)-ra vonatkozik,
és különösképpen *nem* vonatkozik az elavult [AngularJS](https://angularjs.org/)-re.
+ - key: tools.best_of_js_projects.note
+ t: >
+ Libraries are loaded from [Best of JS](https://bestofjs.org/).
+ If a project is missing, you can [submit it here](https://github.com/michaelrambeau/bestofjs/issues/new?template=add-a-project-to-best-of-javascript.md).
###########################################################################
# Other Tools
###########################################################################
+ - key: tools_others.libraries
+ t: Libraries
+ - key: tools_others.libraries.description
+ t: Which libraries do you regularly use?
+ - key: tools_others.libraries.others
+ t: Other Libraries
+ - key: tools_others.libraries.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.text_editors
+ t: Text Editors
+ - key: tools_others.text_editors.description
+ t: Which text editor(s) do you regularly use?
+ - key: tools_others.text_editors.others
+ t: Other Text Editors
+ - key: tools_others.text_editors.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.utilities
+ t: Utilities
+ - key: tools_others.utilities.description
+ t: Which utilities or tools do you regularly use?
+ - key: tools_others.utilities.others
+ t: Other Utilities
+ - key: tools_others.utilities.others.description
+ t: Other utilities (freeform field).
+
+ - key: tools_others.browsers
+ t: Browsers
+ - key: tools_others.browsers.description
+ t: Which browser(s) do you primarily work in during initial development?
+ - key: tools_others.browsers.others
+ t: Other Browsers
+ - key: tools_others.browsers.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.build_tools
+ t: Build Tools
+ - key: tools_others.build_tools.description
+ t: Which build tools do you use?
+ - key: tools_others.build_tools.others
+ t: Other Build Tools
+ - key: tools_others.build_tools.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.non_js_languages
+ t: Non-JavaScript Languages
+ - key: tools_others.non_js_languages.description
+ t: Which other programming languages do you use?
+ - key: tools_others.non_js_languages.others
+ t: Other Languages
+ - key: tools_others.non_js_languages.others.description
+ t: Other answers (freeform field).
+
+ - key: tools_others.javascript_flavors
+ t: JavaScript Flavors
+ - key: tools_others.javascript_flavors.description
+ t: Languages that compile to JavaScript
+ - key: tools_others.javascript_flavors.others
+ t: Other JavaScript Flavors
+ - key: tools_others.javascript_flavors.others.description
+ t: Other answers (freeform field).
+
- key: tools_others.runtimes
t: JavaScript futtatókörnyezet
- key: tools_others.runtimes.description
@@ -303,6 +648,223 @@ translations:
- key: tools_others.form_factors.description
aliasFor: environments.form_factors.description
+ - key: tools_others.backend_as_a_service
+ t: Backend-as-a-Service Providers
+ - key: tools_others.backend_as_a_service.description
+ t: Services that host your data and offer a client API to access it.
+ - key: tools_others.backend_as_a_service.others
+ t: Other BaaS Providers
+
+ - key: tools_others.date_management
+ t: Date Management
+ - key: tools_others.date_management.description
+ t: Libraries that help with date and timezone management.
+ - key: tools_others.date_management.others
+ t: Other Date Management Libraries
+
+ - key: tools_others.data_visualization
+ t: Data Visualization
+ - key: tools_others.data_visualization.description
+ t: Libraries that help with charts and other data visualizations.
+ - key: tools_others.data_visualization.others
+ t: Other Data Visualization Libraries
+
+ - key: tools_others.graphics_animation
+ t: Graphics & Animations
+ - key: tools_others.graphics_animation.description
+ t: Libraries dedicated to graphics and animation.
+ - key: tools_others.graphics_animation.others
+ t: Other Graphics & Animations Libraries
+
+ - key: tools_others.data_fetching
+ t: Data Fetching
+ - key: tools_others.data_fetching.description
+ t: Libraries that manage data fetching and caching.
+ - key: tools_others.data_fetching.others
+ t: Other Data Fetching Libraries
+
+ - key: other_tools.libraries
+ aliasFor: tools_others.libraries
+ - key: other_tools.libraries.description
+ aliasFor: tools_others.libraries.description
+ - key: other_tools.libraries.others
+ aliasFor: tools_others.libraries.others
+ - key: other_tools.libraries.others.description
+ aliasFor: tools_others.libraries.others.description
+
+ - key: other_tools.text_editors
+ aliasFor: tools_others.text_editors
+ - key: other_tools.text_editors.description
+ aliasFor: tools_others.text_editors.description
+ - key: other_tools.text_editors.others
+ aliasFor: tools_others.text_editors.others
+ - key: other_tools.text_editors.others.description
+ aliasFor: tools_others.text_editors.others.description
+
+ - key: other_tools.utilities
+ aliasFor: tools_others.utilities
+ - key: other_tools.utilities.description
+ aliasFor: tools_others.utilities.description
+ - key: other_tools.utilities.others
+ aliasFor: tools_others.utilities.others
+ - key: other_tools.utilities.others.description
+ aliasFor: tools_others.utilities.others.description
+
+ - key: other_tools.browsers
+ aliasFor: tools_others.browsers
+ - key: other_tools.browsers.description
+ aliasFor: tools_others.browsers.description
+ - key: other_tools.browsers.others
+ aliasFor: tools_others.browsers.others
+ - key: other_tools.browsers.others.description
+ aliasFor: tools_others.browsers.others.description
+
+ - key: other_tools.build_tools
+ aliasFor: tools_others.build_tools
+ - key: other_tools.build_tools.description
+ aliasFor: tools_others.build_tools.description
+ - key: other_tools.build_tools.others
+ aliasFor: tools_others.build_tools.others
+ - key: other_tools.build_tools.others.description
+ aliasFor: tools_others.build_tools.others.description
+
+ - key: other_tools.non_js_languages
+ aliasFor: tools_others.non_js_languages
+ - key: other_tools.non_js_languages.description
+ aliasFor: tools_others.non_js_languages.description
+ - key: other_tools.non_js_languages.others
+ aliasFor: tools_others.non_js_languages.others
+ - key: other_tools.non_js_languages.others.description
+ aliasFor: tools_others.non_js_languages.others.description
+
+ - key: other_tools.javascript_flavors
+ aliasFor: tools_others.javascript_flavors
+ - key: other_tools.javascript_flavors.description
+ aliasFor: tools_others.javascript_flavors.description
+ - key: other_tools.javascript_flavors.others
+ aliasFor: tools_others.javascript_flavors.others
+ - key: other_tools.javascript_flavors.others.description
+ aliasFor: tools_others.javascript_flavors.others.description
+
+ - key: tools_others.backend_frameworks
+ aliasFor: sections.back_end_frameworks.title
+ - key: tools_others.backend_frameworks.description
+ t: Frameworks for generating APIs and managing back-ends
+ - key: tools_others.backend_frameworks.others
+ t: Other Back-end Frameworks
+
+ - key: other_tools.runtimes
+ aliasFor: tools_others.runtimes
+ - key: other_tools.runtimes.description
+ aliasFor: tools_others.runtimes.description
+ - key: other_tools.runtimes.others
+ aliasFor: tools_others.runtimes.others
+ - key: other_tools.runtimes.others.description
+ aliasFor: tools_others.runtimes.others.description
+
+ - key: other_tools.package_registries
+ aliasFor: tools_others.package_registries
+ - key: other_tools.package_registries.description
+ aliasFor: tools_others.package_registries.description
+ - key: other_tools.package_registries.others
+ aliasFor: tools_others.package_registries.others
+ - key: other_tools.package_registries.others.description
+ aliasFor: tools_others.package_registries.others.description
+
+ - key: other_tools.form_factors
+ aliasFor: tools_others.form_factors
+ - key: other_tools.form_factors.description
+ aliasFor: tools_others.form_factors.description
+
+ - key: other_tools.backend_as_a_service
+ aliasFor: tools_others.backend_as_a_service
+ - key: other_tools.backend_as_a_service.description
+ aliasFor: tools_others.backend_as_a_service.description
+ - key: other_tools.backend_as_a_service.others
+ aliasFor: tools_others.backend_as_a_service.others
+
+ - key: other_tools.date_management
+ aliasFor: tools_others.date_management
+ - key: other_tools.date_management.description
+ aliasFor: tools_others.date_management.description
+ - key: other_tools.date_management.others
+ aliasFor: tools_others.date_management.others
+
+ - key: other_tools.data_visualization
+ aliasFor: tools_others.data_visualization
+ - key: other_tools.data_visualization.description
+ aliasFor: tools_others.data_visualization.description
+ - key: other_tools.data_visualization.others
+ aliasFor: tools_others.data_visualization.others
+
+ - key: other_tools.graphics_animation
+ aliasFor: tools_others.graphics_animation
+ - key: other_tools.graphics_animation.description
+ aliasFor: tools_others.graphics_animation.description
+ - key: other_tools.graphics_animation.others
+ aliasFor: tools_others.graphics_animation.others
+
+ - key: other_tools.data_fetching
+ aliasFor: tools_others.data_fetching
+ - key: other_tools.data_fetching.description
+ aliasFor: tools_others.data_fetching.description
+ - key: other_tools.data_fetching.others
+ aliasFor: tools_others.data_fetching.others
+
+ - key: other_tools.backend_frameworks
+ aliasFor: tools_others.backend_frameworks
+ - key: other_tools.backend_frameworks.description
+ aliasFor: tools_others.backend_frameworks.description
+ - key: other_tools.backend_frameworks.others
+ aliasFor: tools_others.backend_frameworks.others
+
+ ###########################################################################
+ # Usage
+ ###########################################################################
+
+ - key: usage.js_app_patterns
+ t: Application Patterns
+ - key: usage.js_app_patterns.description
+ t: Which of the following architecture and rendering patterns have you used **in the last year**?
+ - key: usage.js_app_patterns.others
+ t: Other App Patterns
+
+ - key: usage.what_do_you_use_js_for
+ t: What do you use JavaScript for?
+ - key: usage.what_do_you_use_js_for.others
+ t: Other JavaScript Use Cases
+
+ - key: usage.js_ts_balance
+ t: JavaScript/TypeScript Balance
+ - key: usage.js_ts_balance.description
+ t: How do you divide your time between writing JavaScript and TypeScript code?
+
+ - key: tools_others.edge_runtimes
+ t: JavaScript Edge/Serverless Runtimes
+ - key: tools_others.edge_runtimes.description
+ t: Which edge or serverless runtimes do you regularly use?
+ - key: tools_others.edge_runtimes.others
+ t: Other Edge Runtimes
+
+ - key: usage.usage_type
+ t: JavaScript Usage
+ - key: usage.usage_type.description
+ t: In what context do you primarily use JavaScript?
+ - key: usage.usage_type.others
+ t: Other Usages
+
+ - key: opinions.pick_of_the_year
+ t: Your “Pick of the Year”
+ - key: opinions.pick_of_the_year.description
+ t: The name of a feature, library, website, person, etc. you want to highlight this year.
+
+ - key: usage.industry_sector_js
+ aliasFor: usage.industry_sector
+ - key: usage.industry_sector_js.description
+ t: Which industry sector(s) are you using JavaScript in?
+ - key: usage.industry_sector_js.others
+ aliasFor: usage.industry_sector.others
+
###########################################################################
# Opinions
###########################################################################
@@ -357,6 +919,14 @@ translations:
- key: opinions_others.js_pain_points.others
t: A JavaScript egyéb részei, amik javításra szorulnak
+ - key: opinions.top_js_pain_points
+ aliasFor: opinions.js_pain_points
+ - key: opinions.top_js_pain_points.description
+ t: Pick the top 3 aspects of JavaScript you struggle with the most.
+ - key: opinions_others.top_js_pain_points.others
+ aliasFor: opinions_others.js_pain_points.others
+ - key: opinions.top_js_pain_points.others
+ aliasFor: opinions_others.js_pain_points.others
# Missing Features
- key: opinions.currently_missing_from_js
@@ -365,6 +935,14 @@ translations:
t: Minden egyes JavaScript funkció-párnál azt válaszd ki, amelyiket a leginkább szeretnéd látni a JavaScriptben ma.
- key: opinions_others.currently_missing_from_js.others
t: Egyéb hiányzó funkciók
+ - key: opinions.top_currently_missing_from_js
+ aliasFor: opinions.currently_missing_from_js
+ - key: opinions.top_currently_missing_from_js.description
+ t: Pick the top 3 features you'd most like to be able to use in JavaScript today.
+ - key: opinions_others.top_currently_missing_from_js.others
+ aliasFor: opinions_others.currently_missing_from_js.others
+ - key: opinions.top_currently_missing_from_js.others
+ aliasFor: opinions_others.currently_missing_from_js.others
# pain points/currently missing (results)
- key: js_pain_points.js_pain_points_wins
diff --git a/state_of_js_2021.yml b/state_of_js_2021.yml
index 4a265cf..5267318 100644
--- a/state_of_js_2021.yml
+++ b/state_of_js_2021.yml
@@ -1,5 +1,15 @@
locale: hu-HU
translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ - key: general.results.description
+ t: The 2021 edition of the annual survey about the latest trends in the JavaScript ecosystem.
+
+ - key: general.livestream_announcement
+ t: Make sure to tune in for our [special survey results livestream](https://dev.to/sachagreif/state-of-javascript-2021-livestream-24a5) on February 22! (English)
+
###########################################################################
# Introduction
###########################################################################
@@ -9,12 +19,16 @@ translations:
A lot happened in 2021. So much in fact that the survey was pushed back all the way to 2022!
- Between a slew of faster build tools and a new crop of back-end frameworks, the JavaScript world kept evolving. And we did our best to keep up, giving this survey a couple new power-ups ([read more about what's new](https://dev.to/sachagreif/whats-new-in-the-20212022-state-of-javascript-4jkf)) such as new question types, the ability to cross-reference two datapoints (such as yearly salaries by experience level), and even a way to customize the charts to surface your own insights! Read more about [what's new this year](https://dev.to/sachagreif/whats-new-in-the-20212022-state-of-javascript-4jkf) (English).
- It wasn't all smooth sailing, though. We had to deal with a [data leak](https://dev.to/sachagreif/disclosing-a-state-of-javascriptstate-of-css-data-breach-2lg1) that thankfully didn't seem to have any bad consequences. And we're constantly making efforts to make the survey more inclusive, more accessibe, and more fair.
+ Between a slew of faster build tools and a new crop of back-end frameworks, the JavaScript world kept evolving. And we did our best to keep up, giving this survey a couple new power-ups ([read more about what's new](https://dev.to/sachagreif/whats-new-in-the-2021-state-of-javascript-survey-4eej)) such as new question types, the ability to cross-reference two datapoints (such as yearly salaries by experience level), and even a way to customize the charts to surface your own insights! Read more about [what's new this year](https://dev.to/sachagreif/whats-new-in-the-2021-state-of-javascript-survey-4eej) (English).
+
+
+ It wasn't all smooth sailing, though. We had to deal with a [data leak](https://dev.to/sachagreif/disclosing-a-state-of-javascriptstate-of-css-data-breach-2lg1) that thankfully didn't seem to have any bad consequences. And we're constantly making efforts to make the survey more inclusive, more accessible, and more fair.
+
Still, even though the survey can ever only represents a tiny, tiny part of the JavaScript ecosystem, we hope you'll find the resulting data interesting!
+
– Sacha Greif
###########################################################################
@@ -30,7 +44,7 @@ translations:
Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes.
- But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for CSS at the same time!
+ But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for JavaScript at the same time!
- key: tshirt.about
t: About the T-shirt
@@ -106,16 +120,16 @@ translations:
- key: blocks.tools_quadrant.description
t: |
- This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**.
+ This chart shows each technology's **retention ratio** over its total **user count**.
It can be divided into four quadrants:
- - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on.
+ - **1**: Low usage, high retention. Technologies worth keeping an eye on.
- - **2**: High usage, high satisfaction. Safe technologies to adopt.
+ - **2**: High usage, high retention. Safe technologies to adopt.
- - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently.
+ - **3**: Low usage, low retention. Technologies that are harder to recommend currently.
- - **4**: High usage, low satisfaction. Reassess these technologies if you're currently using them.
+ - **4**: High usage, low retention. Reassess these technologies if you're currently using them.
###########################################################################
# Notes
@@ -151,7 +165,7 @@ translations:
t: esbuild is barely two years old, but with a **{value}** progression over the last year it's already gaining ground.
- key: award.tool_satisfaction_award.comment
- t: Vite takes the top spot with a sky-high **{value}** satisfaction ratio!
+ t: Vite takes the top spot with a sky-high **{value}** retention ratio!
- key: award.tool_interest_award.comment
t: With a **{value}** interest ratio, Vite once again wins the gold!
@@ -172,7 +186,7 @@ translations:
This is not to say that the language has stood still. The **Optional Chaining** and **Nullish Coalescing** APIs have rocketed up to be the most used new APIs in our survey, despite only being 2 years old. And more good things are on the way from TC39: you reported that date management is a top missing feature, and the Temporal API recently reached [Stage 3](https://github.com/tc39/proposal-temporal).
- The tooling ecosystem is also seeing its own rapid evolution, and it's fair to say that 2021 has been the year of **Vite**. Vite not only debuted at 98% satisfaction, but usage is already at 30% in its first year on our survey, even eclipsing esbuild. Vite isn't alone in trying to improve the state of JavaScript build tools - 8 of the 12 tools we track today are less than two years old! And while **pnpm**, **Turborepo**, and **Nx** took the top spots in our first year tracking monorepo tooling, only 25% report being happy with the state of that category, showing that a lot of work remains to be done.
+ The tooling ecosystem is also seeing its own rapid evolution, and it's fair to say that 2021 has been the year of **Vite**. Vite not only debuted at 98% retention, but usage is already at 30% in its first year on our survey, even eclipsing esbuild. Vite isn't alone in trying to improve the state of JavaScript build tools - 8 of the 12 tools we track today are less than two years old! And while **pnpm**, **Turborepo**, and **Nx** took the top spots in our first year tracking monorepo tooling, only 25% report being happy with the state of that category, showing that a lot of work remains to be done.
Also notable: many new entrants like **Deno**, **Rome**, **Astro**, **Remix**, and more are now supported by venture-backed companies, perhaps charting a viable alternative to the fragile open-source funding environment.
@@ -188,7 +202,7 @@ translations:
- key: picks.my_pick
t: "My 2021 Pick: "
- key: picks.intro
- t: We asked members of the CSS community to share their “pick of the year”
+ t: We asked members of the JavaScript community to share their “pick of the year”
- key: picks.lee_robinson.name
t: SvelteKit
@@ -230,10 +244,10 @@ translations:
- key: picks.sarah_drasner.name
t: Pawel Kozlowski
- key: picks.sarah_drasner.bio
- t:
+ t: Director of Engineering, Core Developer Web at Google
- key: picks.sarah_drasner.description
t: |
- Pawel Kozlowski is the kind of developerwho can be open-minded to different
+ Pawel Kozlowski is the kind of developer who can be open-minded to different
approaches with humility and curiosity with the interest of improving things.
- key: picks.sara_vieira.name
@@ -321,11 +335,11 @@ translations:
t: |
A Git repo full of all the things that have been proposed to be added to JavaScript. It's really fun to read through all the ideas people have for the language and see them go through the stages.
- - key: picks.scott_tolinkski.name
+ - key: picks.scott_tolinski.name
t: SvelteKit
- - key: picks.scott_tolinkski.bio
+ - key: picks.scott_tolinski.bio
t: Creator of Level-Up Tuts, co-host of Syntax
- - key: picks.scott_tolinkski.description
+ - key: picks.scott_tolinski.description
t: |
Svelte Kit provides the amazing developer experience of Svelte with all
of the modern features of expected from a web platform.
diff --git a/state_of_js_2022.yml b/state_of_js_2022.yml
new file mode 100644
index 0000000..7fdc338
--- /dev/null
+++ b/state_of_js_2022.yml
@@ -0,0 +1,576 @@
+locale: en-US
+translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ - key: general.results.description
+ t: The 2022 edition of the annual survey about the latest trends in the JavaScript ecosystem.
+
+ - key: general.livestream_announcement
+ t: Make sure to tune in for our [special survey results livestream](https://dev.to/sachagreif/state-of-javascript-2021-livestream-24a5) on February 22! (English)
+
+ ###########################################################################
+ # Introduction
+ ###########################################################################
+
+ - key: introduction.js2022
+ t: |
+
+ After years of relative stability, many are now beginning to question the status quo.
+
+ New front-end frameworks like Solid and Qwik are suggesting that React might not have all the answers after all, and on the server Astro, Remix and Next.js (among others) are making us reconsider how much code we really need to ship to the client.
+
+ We'll need all the data we can get if we want to make sense of all this, and in fact this year's survey received a massive **39,472** responses, almost double last year's amount!
+
+ Because of this newly expanded audience you might notice some unexpected results, such as some features going down year-over-year in terms of awareness or usage.
+
+ But having more data can potentially mean new insights, and that's why we've developed two new ways to interact with our dataset: the **Data Explorer** lets you cross-reference two variables and highlight any outlying results; while **Chart Filters** let you filter specific charts by salary, country, gender, and many other demographic variables.
+
+ We've also replaced our catch-all "back-end" category with a more specific **Rendering Frameworks** page and added a new **Video Creators** list to the Resources section.
+
+ Finally, Features and Libraries questions also now have a **Comments** popup that lets you see what people actually think of the items mentioned in the survey!
+
+ With all this out of the way, let's discover what JavaScript has been up to in 2022!
+
+ – Sacha Greif
+
+ ###########################################################################
+ # Tshirt
+ ###########################################################################
+
+ - key: sections.tshirt.title
+ t: T-shirt
+
+ - key: sections.tshirt.description
+ t: |
+ ## Support the Survey With the State of JavaScript T-Shirt
+
+ Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes.
+
+ But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for JavaScript at the same time!
+
+ - key: tshirt.about
+ t: About the T-shirt
+
+ - key: tshirt.description
+ t: |
+ We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
+
+ - key: tshirt.getit
+ t: Get It
+
+ - key: tshirt.price
+ t: USD $29 + shipping
+
+ - key: tshirt.designer.heading
+ t: About the Designer
+
+ - key: tshirt.designer.name
+ t: Christopher Kirk-Nielsen
+
+ - key: tshirt.designer.bio
+ t: |
+ Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+
+ ###########################################################################
+ # Sections
+ ###########################################################################
+
+ - key: sections.user_info.description
+ t: |
+ This year, **39,471** respondents took part in the survey. And in order
+ to help highlight different voices and surface deeper insights, we made a special
+ effort to provide new ways to break our data down.
+
+ - key: sections.features.description
+ t: |
+ JavaScript may move fast, but it seems like JavaScript developers move even faster, as many relatively new features already show high adoption levels.
+
+ - key: sections.technologies.description
+ t: |
+ This year's results point to a high degree of fragmentation in the JavaScript world. But while this can sometimes cause headaches, all that competition does make for a very dynamic ecosystem.
+
+ - key: sections.tools_others.description
+ t: |
+ Picking a technology can often come down to a series of tough choices between
+ competing priorities, and this year we tried to capture this process using a new bracket-style question format.
+
+ - key: sections.environments.description
+ t: |
+ Accessibility has long been an after-thought when it comes to web development, but many developers
+ are now realizing that it should in fact be the foundation on which everything else rests.
+
+ - key: sections.resources.description
+ t: |
+ Highlighting blogs, podcasts, and sites was a good start, but this year we decided to go one step further
+ and actually feature the people who make up the JavaScript community!
+
+ - key: sections.opinions.description
+ t: |
+ Whether it's pain points that hold you back today, or missing features that you hope to use
+ tomorrow, this was your chance to vent and share your gripes with JavaScript!
+
+ ###########################################################################
+ # Charts
+ ###########################################################################
+
+ - key: options.features_categories.language
+ aliasFor: sections.language.title
+ - key: options.features_categories.browser_apis
+ aliasFor: sections.browser_apis.title
+ - key: options.features_categories.other_features
+ aliasFor: sections.other_features.title
+
+ - key: blocks.tools_quadrant.description
+ t: |
+ This chart shows each technology's **retention ratio** over its total **user count**.
+ It can be divided into four quadrants:
+
+ - **1**: Low usage, high retention. Technologies worth keeping an eye on.
+
+ - **2**: High usage, high retention. Safe technologies to adopt.
+
+ - **3**: Low usage, low retention. Technologies that are harder to recommend currently.
+
+ - **4**: High usage, low retention. Reassess these technologies if you're currently using them.
+
+ ###########################################################################
+ # Notes
+ ###########################################################################
+
+ - key: blocks.gender.note
+ t: |
+ If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.
+
+ - key: blocks.css_missing_features.note
+ t: |
+ You can explore the full dataset of answers to this question in [this side project](https://whatsmissingfromcss.com/).
+
+ - key: blocks.source.note
+ t: >
+
+ This chart aggregates a mix of referrers, URL parameters, and freeform answers.
+
+ - State of JS: the [State of JS](https://stateofjs.com) mailing list.
+
+ - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.
+
+ - Work: matches `work`, `colleagues`, `coworkers`, etc.
+
+ ###########################################################################
+ # Awards
+ ###########################################################################
+
+ - key: award.feature_adoption_delta_award.comment
+ t: With a **{value}** progression in 2022, **top-level await** has quickly become an integral part of JavaScript.
+
+ - key: award.tool_usage_delta_award.comment
+ t: |
+ **Vite** is barely two years old, but with a **{value}** progression over the last year it's already gaining ground.
+
+ - key: award.tool_satisfaction_award.comment
+ t: Vite takes the top spot with a sky-high **{value}** retention ratio!
+
+ - key: award.tool_interest_award.comment
+ t: With a **{value}** interest ratio, Vite once again wins the gold!
+
+ - key: award.most_write_ins_award.comment
+ t: Many questions also accepted write-in answers, and with **{value}** mentions **Astro** was the most popular item overall.
+
+ - key: award.most_commented_feature_award.comment
+ t: With **{value}** comments, no other feature even came close to generating as much feedback as Private Fields.
+
+ - key: award.most_commented_tool_award.comment
+ t: With **{value}** comments, React showed that it's still the most-discussed library around.
+
+ ###########################################################################
+ # Conclusion
+ ###########################################################################
+
+ - key: conclusion.js2022
+ t: |
+ JavaScript and TypeScript are more vibrant than ever.
+
+ We saw a continuation of performance-lead innovations, many in reactivity and hydration (or the lack thereof). For example, [Svelte](https://www.youtube.com/watch?v=AdNJ3fydeao) took on simplicity in developer ergonomics and leaned into the compiler. Solid’s explored [new approaches to reactivity](https://www.youtube.com/watch?v=2iK9zzhSKo4), while Qwik [shifted our mental model with resumability](https://www.youtube.com/watch?v=Zddw6qy5pf0).
+
+ Innovation is also exciting to see in multi-platform solutions like Tauri, Ionic and Flutter, which opens the door to see applications that span across even more platforms.
+
+ We see globally distributed talent- like Nigeria and now India [having the highest developer growth on GitHub](https://octoverse.github.com/2022/global-tech-talent). Around the world, there are amazing projects like Segun Adebayo's [Chakra UI](https://chakra-ui.com/), or Liyas Thomas's [Hoppscotch](https://hoppscotch.io/), and folks supporting other people’s growth and learning like Ada Nduka Oyom who founded [SheCodeAfrica](https://shecodeafrica.org/), a non-profit organization that has helped empower over 17K women across Africa.
+
+ When we look at established frameworks like React, Angular, or Vue we often see a drop in satisfaction, and people may wonder what it means for the future. I believe that this decline is a function of the tool being battle-tested and used in production, of finding the rough edges and experiencing the trade-offs every tool has. It’s a sign of maturity and clear-eyed appreciation for what these tools can offer. They will also learn from innovation in the space and continue to evolve.
+
+ Finally, I couldn’t be happier to see Vite’s absolute resounding presence in the award section for the second year in a row. Build and serve tech is truly making massive strides and we all benefit from this hard work. Bravo!
+
+ - key: conclusion.js2022.bio
+ t: Director of Engineering and Web Infrastructure, Google
+
+ ###########################################################################
+ # Picks
+ ###########################################################################
+
+ - key: picks.my_pick
+ t: "My 2022 Pick: "
+ - key: picks.intro
+ t: We asked members of the JavaScript community to share their “pick of the year”
+
+ # https://svelte.dev/blog/announcing-sveltekit-1.0
+ - key: picks.lee_robinson.name
+ t: SvelteKit 1.0
+ - key: picks.lee_robinson.bio
+ t: VP of Developer Experience at Vercel
+ - key: picks.lee_robinson.description
+ t: |
+ Two years in the making, SvelteKit is finally ready for production –
+ and it has no shortage of amazing features for developers.
+
+ # - key: picks.vadim_makeev.name
+ # t: Server-Side Rendering
+ # - key: picks.vadim_makeev.bio
+ # t: DevRel, Podcaster & Web Standards Advocate
+ # - key: picks.vadim_makeev.description
+ # t: |
+ # The time has come to get our priorities straight.
+ # UX > DX, and it has always been like that. Performance FTW!
+
+ # - key: picks.ben_ilegbodu.name
+ # t: Lee Robinson
+ # - key: picks.ben_ilegbodu.bio
+ # t: Ben Ilegbodu, Principal Frontend Engineer @ Stitch Fix
+ # - key: picks.ben_ilegbodu.description
+ # t: |
+ # Lee has been great at shepherding and advocating for Next.js.
+ # He's helped me a ton with Next and continues to build excitement
+ # for where it's going
+
+ # - key: picks.shawn_wang.name
+ # t: Supabase
+ # - key: picks.shawn_wang.bio
+ # t: Head of DX at Temporal
+ # - key: picks.shawn_wang.description
+ # t: |
+ # Supabase is making Postgres accessible to more developers and showing
+ # everyone how a small focused team can out-ship peers 10x their size.
+
+ # - key: picks.sarah_drasner.name
+ # t: Pawel Kozlowski
+ # - key: picks.sarah_drasner.bio
+ # t: Director of Engineering, Core Developer Web at Google
+ # - key: picks.sarah_drasner.description
+ # t: |
+ # Pawel Kozlowski is the kind of developer who can be open-minded to different
+ # approaches with humility and curiosity with the interest of improving things.
+
+ # - key: picks.sara_vieira.name
+ # t: Paul Henschel
+ # - key: picks.sara_vieira.bio
+ # t: International Agent of JS Bullshit
+ # - key: picks.sara_vieira.description
+ # t: |
+ # Paul's work on animations and ReactThreeFiber
+ # have made doing any kind of 3D work on the web way easier.
+
+ # - key: picks.mark_erikson.name
+ # t: Ryan Carniato
+ # - key: picks.mark_erikson.bio
+ # t: Redux Maintainer
+ # - key: picks.mark_erikson.description
+ # t: |
+ # Ryan's reactive JS framework SolidJS hit 1.0,
+ # and he wrote numerous articles analyzing advanced
+ # JS framework implementation concepts.
+
+ # - key: picks.alyssa_nicoll.name
+ # t: BroccoDev's Twitch Stream
+ # - key: picks.alyssa_nicoll.bio
+ # t: Sr. Developer Advocate at Progress
+ # - key: picks.alyssa_nicoll.description
+ # t: |
+ # Mike Brocchi recently started streaming to Twitch. He is a brilliant programmer,
+ # developer, and most importantly teacher.
+ # I always have a blast watching his streams and learning from him.
+
+ # - key: picks.michael_jackson.name
+ # t: esbuild
+ # - key: picks.michael_jackson.bio
+ # t: Co-founder of Remix
+ # - key: picks.michael_jackson.description
+ # t: |
+ # We have been building the Remix compiler on top of esbuild and it
+ # has definitely raised the bar as far as JS bundlers are concerned.
+ # It's incredibly fast and the plugin API allows us to do pretty much anything we want.
+
+ # - key: picks.david_khourshid.name
+ # t: Remix
+ # - key: picks.david_khourshid.bio
+ # t: Pianist and founder of Stately
+ # - key: picks.david_khourshid.description
+ # t: |
+ # Remix is a full-stack web framework that feels old-school, but in a good way,
+ # by putting you on the path to create fast, complex, and accessible modern web apps.
+
+ # - key: picks.kent_c_dodds.name
+ # t: Fly.io
+ # - key: picks.kent_c_dodds.bio
+ # t: Director of Developer Experience, Remix
+ # - key: picks.kent_c_dodds.description
+ # t: |
+ # Fly enabled me (a frontend engineer with a distain for DevOps)
+ # to confidently deploy a real-world, globally-distributed, production-grade
+ # app.
+
+ # - key: picks.tejas_kumar.name
+ # t: Joe Haddad
+ # - key: picks.tejas_kumar.bio
+ # t: Web Developer, Conference Speaker, and Director of DevRel at Xata
+ # - key: picks.tejas_kumar.description
+ # t: |
+ # Joe works on Next.js at Vercel and is constantly looking to proudly
+ # demonstrate its power while actively listening
+ # to feedback from the community to support them better.
+
+ # - key: picks.wes_bos.name
+ # t: TC39 Proposals
+ # - key: picks.wes_bos.bio
+ # t: JavaScript Teacher & Podcast Host
+ # - key: picks.wes_bos.description
+ # t: |
+ # A Git repo full of all the things that have been proposed to be added to JavaScript. It's really fun to read through all the ideas people have for the language and see them go through the stages.
+
+ # - key: picks.scott_tolinski.name
+ # t: SvelteKit
+ # - key: picks.scott_tolinski.bio
+ # t: Creator of Level-Up Tuts, co-host of Syntax
+ # - key: picks.scott_tolinski.description
+ # t: |
+ # Svelte Kit provides the amazing developer experience of Svelte with all
+ # of the modern features of expected from a web platform.
+
+ # https://astro.build/
+ - key: picks.miguel_angel_duran.name
+ t: Astro
+ - key: picks.miguel_angel_duran.bio
+ t: Twitch Coding Streamer & Content Creator
+ - key: picks.miguel_angel_duran.description
+ t: |
+ Astro is a new exciting static site generator.
+ Zero client JavaScript by default, lazy-loading hydration,
+ and framework-agnostic. Built on top of Vite, it's blazing fast and easy to use.
+
+ # https://sandpack.codesandbox.io/
+ - key: picks.josh_comeau.name
+ t: Sandpack
+ - key: picks.josh_comeau.bio
+ t: Software developer and educator
+ - key: picks.josh_comeau.description
+ t: |
+ The folks at CodeSandbox open-sourced their ridiculously
+ powerful in-browser bundler, and packaged
+ it up in a world-class embedded code editor. Such an amazing tool!
+
+ # https://github.com/tc39/proposal-type-annotations
+ - key: picks.rich_harris.name
+ t: Type Annotations Proposal
+ - key: picks.rich_harris.bio
+ t: Principal Software Engineer, Vercel
+ - key: picks.rich_harris.description
+ t: |
+ I'm going to nominate the type annotations proposal, which was shared with the world this year.
+
+ # https://twitter.com/mooeypoo
+ - key: picks.cassidy_williams.name
+ t: Moriel Schottlender
+ - key: picks.cassidy_williams.bio
+ t: CTO at Contenda, Memer and Dreamer
+ - key: picks.cassidy_williams.description
+ t: |
+ Moriel is an inspiring developer who gives passionate,
+ interesting talks about internationalization and accessibility,
+ and some of the things she's built with Vue are SO cool,
+ everyone should check them out!
+
+ # https://www.withdiode.com/
+ - key: picks.charlie_gerard.name
+ t: Diode
+ - key: picks.charlie_gerard.bio
+ t: Senior Developer Advocate at Stripe, Author and Creative Technologist
+ - key: picks.charlie_gerard.description
+ t: |
+ Diode is an interactive tool to build and simulate hardware projects in the browser.
+ As a hardware tinkerer, this is really exciting and the interface built with
+ Three.js is great!
+
+ # https://arisa-fukuzaki.dev/
+ - key: picks.alba_silvente.name
+ t: Arisa Fukuzaki
+ - key: picks.alba_silvente.bio
+ t: FrontEnd developer working as DevRel at Storyblok
+ - key: picks.alba_silvente.description
+ t: |
+ Arisa is a hybrid between FrontEnd and Dev Rels, lover of React and its ecosystem,
+ she is always thinking about giving back to the community and contributes by giving talks,
+ workshops and articles on the subject.
+
+ # https://github.com/statelyai/xstate
+ - key: picks.matt_pocock.name
+ t: XState
+ - key: picks.matt_pocock.bio
+ t: TypeScript educator from the UK, building Total TypeScript.
+ - key: picks.matt_pocock.description
+ t: |
+ If I were given something complicated to build from scratch,
+ like a spreadsheet, WYSIWYG, or video calling app, I'd use XState.
+ It's the only library I can rely on to build complex systems.
+
+ # https://beta.reactjs.org/
+ - key: picks.kathryn_grayson_nanz.name
+ t: React Beta Docs
+ - key: picks.kathryn_grayson_nanz.bio
+ t: Developer Advocate at Progress
+ - key: picks.kathryn_grayson_nanz.description
+ t: |
+ The new React docs are incredibly well-written, accessible for beginners,
+ and beautifully designed.
+ Documentation is one of the hardest things to do well,
+ so this fantastic example is my pick of the year!
+
+ - key: picks.ryan_carniato.name
+ t: Astro
+ - key: picks.ryan_carniato.bio
+ t: Creator of Solid
+ - key: picks.ryan_carniato.description
+ t: |
+ While Astro has been popularizing the "Islands" architecture for the past couple of years, 2022 saw it reach 1.0 and bring on-demand server rendering. It's never been easier to create great sites while shipping less JavaScript.
+
+ - key: picks.theo_browne.name
+ t: tRPC
+ - key: picks.theo_browne.bio
+ t: Youtube Ranter & CEO @Ping.gg
+ - key: picks.theo_browne.description
+ t: |
+ 2022 was a big year for fullstack type-safety, and tRPC deserves most of the credit. tRPC is one of those rare libraries that makes everything you used before feel… awful, honestly. Never felt more productive as a full stack engineer.
+
+ - key: picks.sebastien_lorber.name
+ t: Remotion
+ - key: picks.sebastien_lorber.bio
+ t: This Week In React founder and Docusaurus maintainer
+ - key: picks.sebastien_lorber.description
+ t: |
+ The ability to create videos with React is rad. We can get creative and use any cutting-edge web technology, not only DOM/CSS. With the GitHub Unwrapped project, it has proved it can scale, render thousands of videos and be an awesome marketing tool.
+
+ - key: picks.ben_holmes.name
+ t: Zod
+ - key: picks.ben_holmes.bio
+ t: Open source maintainer at Astro
+ - key: picks.ben_holmes.description
+ t: |
+ Runtime safety came to define 2022 with tRPC's rise to stardom.
+ Now, with Astro using Zod for type-safe Markdown and Remix users bringing Zod to form validation,
+ it's becoming an must-have for any JavaScript developer
+
+ - key: picks.tyler_mcginnis.name
+ t: TanStack
+ - key: picks.tyler_mcginnis.bio
+ t: Founder, UI.dev
+ - key: picks.tyler_mcginnis.description
+ t: |
+ My JavaScript pick of the year is TanStack, or anything else that
+ Tanner and Dominik make.
+
+ - key: picks.shaundai_person.name
+ t: Sarah Drasner
+ - key: picks.shaundai_person.bio
+ t: Senior Software Engineer, Netflix
+ - key: picks.shaundai_person.description
+ t: |
+ Sarah continues to give back to the community through blog posts, public speaking, and most recently - her book "Engineering Management for the Rest of Us".
+
+ - key: picks.xxxx.name
+ t:
+ - key: picks.xxxx.bio
+ t:
+ - key: picks.xxxx.description
+ t: |
+
+ ###########################################################################
+ # Sponsors
+ ###########################################################################
+
+ - key: sponsors.frontendmasters.description
+ t: Advance your skills with in-depth, modern front-end engineering courses.
+ - key: sponsors.google_chrome.description
+ t: Thanks to the Google Chrome team for supporting our work.
+ - key: sponsors.renderatl.description
+ t: This is a tech conference focused on Front-End Engineering.
+
+ ###########################################################################
+ # FAQ/About
+ ###########################################################################
+
+ - key: about.content
+ t: |
+ The 2022 State of JS survey ran from November 21 to December 22 2022, and collected 39,472 responses. The survey is run by [Sacha Greif](https://sachagreif.com/) and [Eric Burel](https://www.lbke.fr/), with help from a team of open-source contributors and consultants.
+
+ This year's logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
+
+ ### Survey Goals
+
+ This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.
+
+ As such, the survey is focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included.
+
+ It should also be taken as a **snapshot of a specific subset of developers**, and is not meant to speak for the entire ecosystem.
+
+ ### Survey Design
+
+ The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed [on GitHub](https://github.com/Devographics/surveys/issues?q=is%3Aissue+is%3Aopen+label%3A%22State+of+JS+2022%22).
+
+ All survey questions were optional.
+
+ ### Survey Audience
+
+ The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic.
+
+ Note that frameworks, libraries, etc. were free to encourage their audience to participate in the survey and some of them did take advantage of this via banners, tweets, etc. A detailed breakdown of traffic sources is included in the "Sources" chart.
+
+ ### Representativeness & Inclusivity
+
+ While we believe it's important to give a voice to every community, the reality is that an open survey like this one will always struggle to properly represent everybody, especially when operating through systems that already carry their own inherent biases.
+
+ In order to counter-balance this, we are implementing three distinct strategies:
+
+ - **Outreach**: we always try to reach out to different organizations (such as BIPOC- or LGBTQ-focused organizations, or online teaching platforms) to try and diversify our own audience.
+
+ - **Data Analysis**: through features like facets and variants, we're always trying to make it easier to surface the voices of any demographic segment, no matter how minoritized it might be in our data.
+
+ - **Barrier Lowering**: making the survey too long, inaccessible, slow to load, English-only, etc. can all contribute to imposing an "effort tax" that cuts off the parts of the community that can't afford to pay it. Fixing these issues can lower the barrier to entry and in the process make our audience more diverse.
+
+ ### Project Funding
+
+ Funding from this project comes from a variety of sources:
+
+ - **T-shirt sales**.
+
+ - **Chart Sponsorships**: members of the community can donate to the survey in exchange for having their name featured in the report.
+
+ - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partners [Frontend Masters](https://frontendmasters.com/) and [RenderATL](https://www.renderatl.com/).
+
+ - **Other Funding**: this year, [Google](https://www.google.com/) and [Nijibox](https://nijibox.jp/) funded my work on the survey directly.
+
+ Any contribution or sponsorship is greatly appreciated. I would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.
+
+ ### Technical Overview
+
+ You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-devographics-surveys-are-run-2022-edition-3oo4).
+
+ - **Data collection**: custom [Vulcan.js](http://vulcanjs.org/) app.
+
+ - **Data storage/processing**: MongoDB & MongoDB Aggregations.
+
+ - **Data API**: Node.js GraphQL API.
+
+ - **Results Site**: [Gatsby](https://www.gatsbyjs.com/) React app.
+
+ - **Data Visualizations**: [Nivo](https://nivo.rocks/) React dataviz library.
+
+ - **Type**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).
diff --git a/state_of_js_2023.yml b/state_of_js_2023.yml
new file mode 100644
index 0000000..281c697
--- /dev/null
+++ b/state_of_js_2023.yml
@@ -0,0 +1,573 @@
+# WIP DO NOT TRANSLATE YET
+locale: en-US
+translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ - key: general.results.description
+ t: The 2022 edition of the annual survey about the latest trends in the JavaScript ecosystem.
+
+ - key: general.livestream_announcement
+ t: Make sure to tune in for our [special survey results livestream](https://dev.to/sachagreif/state-of-javascript-2021-livestream-24a5) on February 22! (English)
+
+ ###########################################################################
+ # Introduction
+ ###########################################################################
+
+ - key: introduction.js2023
+ t: |
+
+ After years of relative stability, many are now beginning to question the status quo.
+
+ New front-end frameworks like Solid and Qwik are suggesting that React might not have all the answers after all, and on the server Astro, Remix and Next.js (among others) are making us reconsider how much code we really need to ship to the client.
+
+ We'll need all the data we can get if we want to make sense of all this, and in fact this year's survey received a massive **39,472** responses, almost double last year's amount!
+
+ Because of this newly expanded audience you might notice some unexpected results, such as some features going down year-over-year in terms of awareness or usage.
+
+ But having more data can potentially mean new insights, and that's why we've developed two new ways to interact with our dataset: the **Data Explorer** lets you cross-reference two variables and highlight any outlying results; while **Chart Filters** let you filter specific charts by income, country, gender, and many other demographic variables.
+
+ We've also replaced our catch-all "back-end" category with a more specific **Rendering Frameworks** page and added a new **Video Creators** list to the Resources section.
+
+ Finally, Features and Libraries questions also now have a **Comments** popup that lets you see what people actually think of the items mentioned in the survey!
+
+ With all this out of the way, let's discover what JavaScript has been up to in 2022!
+
+ – Sacha Greif
+
+ ###########################################################################
+ # Tshirt
+ ###########################################################################
+
+ - key: sections.tshirt.title
+ t: T-shirt
+
+ - key: sections.tshirt.description
+ t: |
+ ## Support the Survey With the State of JavaScript T-Shirt
+
+ Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes.
+
+ But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for JavaScript at the same time!
+
+ - key: tshirt.about
+ t: About the T-shirt
+
+ - key: tshirt.description
+ t: |
+ We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.
+
+ - key: tshirt.getit
+ t: Get It
+
+ - key: tshirt.price
+ t: USD $29 + shipping
+
+ - key: tshirt.designer.heading
+ t: About the Designer
+
+ - key: tshirt.designer.name
+ t: Christopher Kirk-Nielsen
+
+ - key: tshirt.designer.bio
+ t: |
+ Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!
+
+ ###########################################################################
+ # Sections
+ ###########################################################################
+
+ - key: sections.user_info.description
+ t: |
+ This year, **39,471** respondents took part in the survey. And in order
+ to help highlight different voices and surface deeper insights, we made a special
+ effort to provide new ways to break our data down.
+
+ - key: sections.features.description
+ t: |
+ JavaScript may move fast, but it seems like JavaScript developers move even faster, as many relatively new features already show high adoption levels.
+
+ - key: sections.technologies.description
+ t: |
+ This year's results point to a high degree of fragmentation in the JavaScript world. But while this can sometimes cause headaches, all that competition does make for a very dynamic ecosystem.
+
+ - key: sections.tools_others.description
+ t: |
+ Picking a technology can often come down to a series of tough choices between
+ competing priorities, and this year we tried to capture this process using a new bracket-style question format.
+
+ - key: sections.environments.description
+ t: |
+ Accessibility has long been an after-thought when it comes to web development, but many developers
+ are now realizing that it should in fact be the foundation on which everything else rests.
+
+ - key: sections.resources.description
+ t: |
+ Highlighting blogs, podcasts, and sites was a good start, but this year we decided to go one step further
+ and actually feature the people who make up the JavaScript community!
+
+ - key: sections.opinions.description
+ t: |
+ Whether it's pain points that hold you back today, or missing features that you hope to use
+ tomorrow, this was your chance to vent and share your gripes with JavaScript!
+
+ ###########################################################################
+ # Charts
+ ###########################################################################
+
+ - key: options.features_categories.language
+ aliasFor: sections.language.title
+ - key: options.features_categories.browser_apis
+ aliasFor: sections.browser_apis.title
+ - key: options.features_categories.other_features
+ aliasFor: sections.other_features.title
+
+ - key: blocks.tools_quadrant.description
+ t: |
+ This chart shows each technology's **retention ratio** over its total **user count**.
+ It can be divided into four quadrants:
+
+ - **1**: Low usage, high retention. Technologies worth keeping an eye on.
+
+ - **2**: High usage, high retention. Safe technologies to adopt.
+
+ - **3**: Low usage, low retention. Technologies that are harder to recommend currently.
+
+ - **4**: High usage, low retention. Reassess these technologies if you're currently using them.
+
+ ###########################################################################
+ # Notes
+ ###########################################################################
+
+ - key: blocks.gender.note
+ t: |
+ If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.
+
+ - key: blocks.source.note
+ t: >
+
+ This chart aggregates a mix of referrers, URL parameters, and freeform answers.
+
+ - State of JS: the [State of JS](https://stateofjs.com) mailing list.
+
+ - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.
+
+ - Work: matches `work`, `colleagues`, `coworkers`, etc.
+
+ ###########################################################################
+ # Awards
+ ###########################################################################
+
+ - key: award.feature_adoption_delta_award.comment
+ t: With a **{value}** progression in 2022, **top-level await** has quickly become an integral part of JavaScript.
+
+ - key: award.tool_usage_delta_award.comment
+ t: |
+ **Vite** is barely two years old, but with a **{value}** progression over the last year it's already gaining ground.
+
+ - key: award.tool_satisfaction_award.comment
+ t: Vite takes the top spot with a sky-high **{value}** retention ratio!
+
+ - key: award.tool_interest_award.comment
+ t: With a **{value}** interest ratio, Vite once again wins the gold!
+
+ - key: award.most_write_ins_award.comment
+ t: Many questions also accepted write-in answers, and with **{value}** mentions **Astro** was the most popular item overall.
+
+ - key: award.most_commented_feature_award.comment
+ t: With **{value}** comments, no other feature even came close to generating as much feedback as Private Fields.
+
+ - key: award.most_commented_tool_award.comment
+ t: With **{value}** comments, React showed that it's still the most-discussed library around.
+
+ ###########################################################################
+ # Conclusion
+ ###########################################################################
+
+ - key: conclusion.js2022
+ t: |
+ JavaScript and TypeScript are more vibrant than ever.
+
+ We saw a continuation of performance-lead innovations, many in reactivity and hydration (or the lack thereof). For example, [Svelte](https://www.youtube.com/watch?v=AdNJ3fydeao) took on simplicity in developer ergonomics and leaned into the compiler. Solid’s explored [new approaches to reactivity](https://www.youtube.com/watch?v=2iK9zzhSKo4), while Qwik [shifted our mental model with resumability](https://www.youtube.com/watch?v=Zddw6qy5pf0).
+
+ Innovation is also exciting to see in multi-platform solutions like Tauri, Ionic and Flutter, which opens the door to see applications that span across even more platforms.
+
+ We see globally distributed talent- like Nigeria and now India [having the highest developer growth on GitHub](https://octoverse.github.com/2022/global-tech-talent). Around the world, there are amazing projects like Segun Adebayo's [Chakra UI](https://chakra-ui.com/), or Liyas Thomas's [Hoppscotch](https://hoppscotch.io/), and folks supporting other people’s growth and learning like Ada Nduka Oyom who founded [SheCodeAfrica](https://shecodeafrica.org/), a non-profit organization that has helped empower over 17K women across Africa.
+
+ When we look at established frameworks like React, Angular, or Vue we often see a drop in satisfaction, and people may wonder what it means for the future. I believe that this decline is a function of the tool being battle-tested and used in production, of finding the rough edges and experiencing the trade-offs every tool has. It’s a sign of maturity and clear-eyed appreciation for what these tools can offer. They will also learn from innovation in the space and continue to evolve.
+
+ Finally, I couldn’t be happier to see Vite’s absolute resounding presence in the award section for the second year in a row. Build and serve tech is truly making massive strides and we all benefit from this hard work. Bravo!
+
+ - key: conclusion.js2022.bio
+ t: Director of Engineering and Web Infrastructure, Google
+
+ ###########################################################################
+ # Picks
+ ###########################################################################
+
+ - key: picks.my_pick
+ t: "My 2022 Pick: "
+ - key: picks.intro
+ t: We asked members of the JavaScript community to share their “pick of the year”
+
+ # https://svelte.dev/blog/announcing-sveltekit-1.0
+ - key: picks.lee_robinson.name
+ t: SvelteKit 1.0
+ - key: picks.lee_robinson.bio
+ t: VP of Developer Experience at Vercel
+ - key: picks.lee_robinson.description
+ t: |
+ Two years in the making, SvelteKit is finally ready for production –
+ and it has no shortage of amazing features for developers.
+
+ # - key: picks.vadim_makeev.name
+ # t: Server-Side Rendering
+ # - key: picks.vadim_makeev.bio
+ # t: DevRel, Podcaster & Web Standards Advocate
+ # - key: picks.vadim_makeev.description
+ # t: |
+ # The time has come to get our priorities straight.
+ # UX > DX, and it has always been like that. Performance FTW!
+
+ # - key: picks.ben_ilegbodu.name
+ # t: Lee Robinson
+ # - key: picks.ben_ilegbodu.bio
+ # t: Ben Ilegbodu, Principal Frontend Engineer @ Stitch Fix
+ # - key: picks.ben_ilegbodu.description
+ # t: |
+ # Lee has been great at shepherding and advocating for Next.js.
+ # He's helped me a ton with Next and continues to build excitement
+ # for where it's going
+
+ # - key: picks.shawn_wang.name
+ # t: Supabase
+ # - key: picks.shawn_wang.bio
+ # t: Head of DX at Temporal
+ # - key: picks.shawn_wang.description
+ # t: |
+ # Supabase is making Postgres accessible to more developers and showing
+ # everyone how a small focused team can out-ship peers 10x their size.
+
+ # - key: picks.sarah_drasner.name
+ # t: Pawel Kozlowski
+ # - key: picks.sarah_drasner.bio
+ # t: Director of Engineering, Core Developer Web at Google
+ # - key: picks.sarah_drasner.description
+ # t: |
+ # Pawel Kozlowski is the kind of developer who can be open-minded to different
+ # approaches with humility and curiosity with the interest of improving things.
+
+ # - key: picks.sara_vieira.name
+ # t: Paul Henschel
+ # - key: picks.sara_vieira.bio
+ # t: International Agent of JS Bullshit
+ # - key: picks.sara_vieira.description
+ # t: |
+ # Paul's work on animations and ReactThreeFiber
+ # have made doing any kind of 3D work on the web way easier.
+
+ # - key: picks.mark_erikson.name
+ # t: Ryan Carniato
+ # - key: picks.mark_erikson.bio
+ # t: Redux Maintainer
+ # - key: picks.mark_erikson.description
+ # t: |
+ # Ryan's reactive JS framework SolidJS hit 1.0,
+ # and he wrote numerous articles analyzing advanced
+ # JS framework implementation concepts.
+
+ # - key: picks.alyssa_nicoll.name
+ # t: BroccoDev's Twitch Stream
+ # - key: picks.alyssa_nicoll.bio
+ # t: Sr. Developer Advocate at Progress
+ # - key: picks.alyssa_nicoll.description
+ # t: |
+ # Mike Brocchi recently started streaming to Twitch. He is a brilliant programmer,
+ # developer, and most importantly teacher.
+ # I always have a blast watching his streams and learning from him.
+
+ # - key: picks.michael_jackson.name
+ # t: esbuild
+ # - key: picks.michael_jackson.bio
+ # t: Co-founder of Remix
+ # - key: picks.michael_jackson.description
+ # t: |
+ # We have been building the Remix compiler on top of esbuild and it
+ # has definitely raised the bar as far as JS bundlers are concerned.
+ # It's incredibly fast and the plugin API allows us to do pretty much anything we want.
+
+ # - key: picks.david_khourshid.name
+ # t: Remix
+ # - key: picks.david_khourshid.bio
+ # t: Pianist and founder of Stately
+ # - key: picks.david_khourshid.description
+ # t: |
+ # Remix is a full-stack web framework that feels old-school, but in a good way,
+ # by putting you on the path to create fast, complex, and accessible modern web apps.
+
+ # - key: picks.kent_c_dodds.name
+ # t: Fly.io
+ # - key: picks.kent_c_dodds.bio
+ # t: Director of Developer Experience, Remix
+ # - key: picks.kent_c_dodds.description
+ # t: |
+ # Fly enabled me (a frontend engineer with a distain for DevOps)
+ # to confidently deploy a real-world, globally-distributed, production-grade
+ # app.
+
+ # - key: picks.tejas_kumar.name
+ # t: Joe Haddad
+ # - key: picks.tejas_kumar.bio
+ # t: Web Developer, Conference Speaker, and Director of DevRel at Xata
+ # - key: picks.tejas_kumar.description
+ # t: |
+ # Joe works on Next.js at Vercel and is constantly looking to proudly
+ # demonstrate its power while actively listening
+ # to feedback from the community to support them better.
+
+ # - key: picks.wes_bos.name
+ # t: TC39 Proposals
+ # - key: picks.wes_bos.bio
+ # t: JavaScript Teacher & Podcast Host
+ # - key: picks.wes_bos.description
+ # t: |
+ # A Git repo full of all the things that have been proposed to be added to JavaScript. It's really fun to read through all the ideas people have for the language and see them go through the stages.
+
+ # - key: picks.scott_tolinski.name
+ # t: SvelteKit
+ # - key: picks.scott_tolinski.bio
+ # t: Creator of Level-Up Tuts, co-host of Syntax
+ # - key: picks.scott_tolinski.description
+ # t: |
+ # Svelte Kit provides the amazing developer experience of Svelte with all
+ # of the modern features of expected from a web platform.
+
+ # https://astro.build/
+ - key: picks.miguel_angel_duran.name
+ t: Astro
+ - key: picks.miguel_angel_duran.bio
+ t: Twitch Coding Streamer & Content Creator
+ - key: picks.miguel_angel_duran.description
+ t: |
+ Astro is a new exciting static site generator.
+ Zero client JavaScript by default, lazy-loading hydration,
+ and framework-agnostic. Built on top of Vite, it's blazing fast and easy to use.
+
+ # https://sandpack.codesandbox.io/
+ - key: picks.josh_comeau.name
+ t: Sandpack
+ - key: picks.josh_comeau.bio
+ t: Software developer and educator
+ - key: picks.josh_comeau.description
+ t: |
+ The folks at CodeSandbox open-sourced their ridiculously
+ powerful in-browser bundler, and packaged
+ it up in a world-class embedded code editor. Such an amazing tool!
+
+ # https://github.com/tc39/proposal-type-annotations
+ - key: picks.rich_harris.name
+ t: Type Annotations Proposal
+ - key: picks.rich_harris.bio
+ t: Principal Software Engineer, Vercel
+ - key: picks.rich_harris.description
+ t: |
+ I'm going to nominate the type annotations proposal, which was shared with the world this year.
+
+ # https://twitter.com/mooeypoo
+ - key: picks.cassidy_williams.name
+ t: Moriel Schottlender
+ - key: picks.cassidy_williams.bio
+ t: CTO at Contenda, Memer and Dreamer
+ - key: picks.cassidy_williams.description
+ t: |
+ Moriel is an inspiring developer who gives passionate,
+ interesting talks about internationalization and accessibility,
+ and some of the things she's built with Vue are SO cool,
+ everyone should check them out!
+
+ # https://www.withdiode.com/
+ - key: picks.charlie_gerard.name
+ t: Diode
+ - key: picks.charlie_gerard.bio
+ t: Senior Developer Advocate at Stripe, Author and Creative Technologist
+ - key: picks.charlie_gerard.description
+ t: |
+ Diode is an interactive tool to build and simulate hardware projects in the browser.
+ As a hardware tinkerer, this is really exciting and the interface built with
+ Three.js is great!
+
+ # https://arisa-fukuzaki.dev/
+ - key: picks.alba_silvente.name
+ t: Arisa Fukuzaki
+ - key: picks.alba_silvente.bio
+ t: FrontEnd developer working as DevRel at Storyblok
+ - key: picks.alba_silvente.description
+ t: |
+ Arisa is a hybrid between FrontEnd and Dev Rels, lover of React and its ecosystem,
+ she is always thinking about giving back to the community and contributes by giving talks,
+ workshops and articles on the subject.
+
+ # https://github.com/statelyai/xstate
+ - key: picks.matt_pocock.name
+ t: XState
+ - key: picks.matt_pocock.bio
+ t: TypeScript educator from the UK, building Total TypeScript.
+ - key: picks.matt_pocock.description
+ t: |
+ If I were given something complicated to build from scratch,
+ like a spreadsheet, WYSIWYG, or video calling app, I'd use XState.
+ It's the only library I can rely on to build complex systems.
+
+ # https://beta.reactjs.org/
+ - key: picks.kathryn_grayson_nanz.name
+ t: React Beta Docs
+ - key: picks.kathryn_grayson_nanz.bio
+ t: Developer Advocate at Progress
+ - key: picks.kathryn_grayson_nanz.description
+ t: |
+ The new React docs are incredibly well-written, accessible for beginners,
+ and beautifully designed.
+ Documentation is one of the hardest things to do well,
+ so this fantastic example is my pick of the year!
+
+ - key: picks.ryan_carniato.name
+ t: Astro
+ - key: picks.ryan_carniato.bio
+ t: Creator of Solid
+ - key: picks.ryan_carniato.description
+ t: |
+ While Astro has been popularizing the "Islands" architecture for the past couple of years, 2022 saw it reach 1.0 and bring on-demand server rendering. It's never been easier to create great sites while shipping less JavaScript.
+
+ - key: picks.theo_browne.name
+ t: tRPC
+ - key: picks.theo_browne.bio
+ t: Youtube Ranter & CEO @Ping.gg
+ - key: picks.theo_browne.description
+ t: |
+ 2022 was a big year for fullstack type-safety, and tRPC deserves most of the credit. tRPC is one of those rare libraries that makes everything you used before feel… awful, honestly. Never felt more productive as a full stack engineer.
+
+ - key: picks.sebastien_lorber.name
+ t: Remotion
+ - key: picks.sebastien_lorber.bio
+ t: This Week In React founder and Docusaurus maintainer
+ - key: picks.sebastien_lorber.description
+ t: |
+ The ability to create videos with React is rad. We can get creative and use any cutting-edge web technology, not only DOM/CSS. With the GitHub Unwrapped project, it has proved it can scale, render thousands of videos and be an awesome marketing tool.
+
+ - key: picks.ben_holmes.name
+ t: Zod
+ - key: picks.ben_holmes.bio
+ t: Open source maintainer at Astro
+ - key: picks.ben_holmes.description
+ t: |
+ Runtime safety came to define 2022 with tRPC's rise to stardom.
+ Now, with Astro using Zod for type-safe Markdown and Remix users bringing Zod to form validation,
+ it's becoming an must-have for any JavaScript developer
+
+ - key: picks.tyler_mcginnis.name
+ t: TanStack
+ - key: picks.tyler_mcginnis.bio
+ t: Founder, UI.dev
+ - key: picks.tyler_mcginnis.description
+ t: |
+ My JavaScript pick of the year is TanStack, or anything else that
+ Tanner and Dominik make.
+
+ - key: picks.shaundai_person.name
+ t: Sarah Drasner
+ - key: picks.shaundai_person.bio
+ t: Senior Software Engineer, Netflix
+ - key: picks.shaundai_person.description
+ t: |
+ Sarah continues to give back to the community through blog posts, public speaking, and most recently - her book "Engineering Management for the Rest of Us".
+
+ - key: picks.xxxx.name
+ t:
+ - key: picks.xxxx.bio
+ t:
+ - key: picks.xxxx.description
+ t: |
+
+ ###########################################################################
+ # Sponsors
+ ###########################################################################
+
+ - key: sponsors.frontendmasters.description
+ t: Advance your skills with in-depth, modern front-end engineering courses.
+ - key: sponsors.google_chrome.description
+ t: Thanks to the Google Chrome team for supporting our work.
+ - key: sponsors.renderatl.description
+ t: This is a tech conference focused on Front-End Engineering.
+
+ ###########################################################################
+ # FAQ/About
+ ###########################################################################
+
+ - key: about.content
+ t: |
+ The 2022 State of JS survey ran from November 21 to December 22 2022, and collected 39,472 responses. The survey is run by [Sacha Greif](https://sachagreif.com/) and [Eric Burel](https://www.lbke.fr/), with help from a team of open-source contributors and consultants.
+
+ This year's logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
+
+ ### Survey Goals
+
+ This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.
+
+ As such, the survey is focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included.
+
+ It should also be taken as a **snapshot of a specific subset of developers**, and is not meant to speak for the entire ecosystem.
+
+ ### Survey Design
+
+ The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed [on GitHub](https://github.com/Devographics/surveys/issues?q=is%3Aissue+is%3Aopen+label%3A%22State+of+JS+2022%22).
+
+ All survey questions were optional.
+
+ ### Survey Audience
+
+ The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic.
+
+ Note that frameworks, libraries, etc. were free to encourage their audience to participate in the survey and some of them did take advantage of this via banners, tweets, etc. A detailed breakdown of traffic sources is included in the "Sources" chart.
+
+ ### Representativeness & Inclusivity
+
+ While we believe it's important to give a voice to every community, the reality is that an open survey like this one will always struggle to properly represent everybody, especially when operating through systems that already carry their own inherent biases.
+
+ In order to counter-balance this, we are implementing three distinct strategies:
+
+ - **Outreach**: we always try to reach out to different organizations (such as BIPOC- or LGBTQ-focused organizations, or online teaching platforms) to try and diversify our own audience.
+
+ - **Data Analysis**: through features like facets and variants, we're always trying to make it easier to surface the voices of any demographic segment, no matter how minoritized it might be in our data.
+
+ - **Barrier Lowering**: making the survey too long, inaccessible, slow to load, English-only, etc. can all contribute to imposing an "effort tax" that cuts off the parts of the community that can't afford to pay it. Fixing these issues can lower the barrier to entry and in the process make our audience more diverse.
+
+ ### Project Funding
+
+ Funding from this project comes from a variety of sources:
+
+ - **T-shirt sales**.
+
+ - **Chart Sponsorships**: members of the community can donate to the survey in exchange for having their name featured in the report.
+
+ - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partners [Frontend Masters](https://frontendmasters.com/) and [RenderATL](https://www.renderatl.com/).
+
+ - **Other Funding**: this year, [Google](https://www.google.com/) and [Nijibox](https://nijibox.jp/) funded my work on the survey directly.
+
+ Any contribution or sponsorship is greatly appreciated. I would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.
+
+ ### Technical Overview
+
+ You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-devographics-surveys-are-run-2022-edition-3oo4).
+
+ - **Data collection**: custom [Vulcan.js](http://vulcanjs.org/) app.
+
+ - **Data storage/processing**: MongoDB & MongoDB Aggregations.
+
+ - **Data API**: Node.js GraphQL API.
+
+ - **Results Site**: [Gatsby](https://www.gatsbyjs.com/) React app.
+
+ - **Data Visualizations**: [Nivo](https://nivo.rocks/) React dataviz library.
+
+ - **Type**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).
diff --git a/state_of_react.yml b/state_of_react.yml
new file mode 100644
index 0000000..d28ea99
--- /dev/null
+++ b/state_of_react.yml
@@ -0,0 +1,385 @@
+locale: en-US
+translations:
+ ###########################################################################
+ # General
+ ###########################################################################
+
+ - key: general.state_of_react.intro
+ t: |
+ React has been around for a while now, and it's clear that it has become one of the dominant front-end frameworks.
+
+ Yet even so, React is still evolving at a fast pace, and the community is doing its best to keep up.
+
+ With the State of React developer survey, we are hoping to make sense of that evolution, and help developers find their way in the vast React ecosystem.
+
+ - key: general.state_of_react.description
+ t: The annual developer survey about the React ecosystem
+
+ - key: features.features_intro_react
+ t: |
+ Welcome to the survey! This first part is all about figuring out
+ which of the official React APIs you know about and use.
+
+ By the way, if you want to tell us more about any of your choices, just click that little "comment" icon!
+
+ - key: tools.tools_intro_react
+ t: |
+ The next couple sections focus on the **libraries** and **frameworks** that make up
+ the React ecosystem. Let us know what you're excited about!
+
+ # sections
+ - key: sections.components.title
+ t: Components
+ - key: sections.components.description
+ t: Special components provided by React
+ - key: sections.hooks.title
+ t: Hooks
+ - key: sections.hooks.description
+ t: React's built-in hooks
+ - key: sections.other_apis.title
+ t: Other APIs
+ - key: sections.other_apis.description
+ t: Other APIs and features
+ - key: sections.component_apis.title
+ t: Component APIs
+ - key: sections.component_apis.description
+ t: APIs for manipulating components
+ - key: sections.legacy_apis.title
+ t: Legacy APIs
+ - key: sections.legacy_apis.description
+ t: Deprecated & legacy APIs
+
+ - key: sections.state_management.title
+ t: State Management
+ - key: sections.state_management.description
+ t: Libraries for managing application state
+ - key: sections.data_loading.title
+ t: Data Loading
+ - key: sections.data_loading.description
+ t: Utilities for loading and managing data
+ - key: sections.ui_libraries.title
+ t: UI Libraries
+ - key: sections.ui_libraries.description
+ t: Component libraries and other UI toolkits.
+ - key: sections.meta_frameworks.title
+ t: Meta Frameworks
+ - key: sections.meta_frameworks.description
+ t: Frameworks that help render and serve your React app
+ - key: sections.testing.title
+ t: Testing
+ - key: sections.testing.description
+ t: Testing utilities and libraries
+ - key: sections.mobile_development.title
+ t: Mobile Development
+ - key: sections.mobile_development.description
+ t: Libraries and utilities for mobile development
+
+ - key: sections.other_tools.title
+ t: Other Tools
+ - key: sections.other_tools.description
+ t: Other React utilities and libraries
+
+ - key: sections.usage_react.title
+ t: Usage
+ - key: sections.usage_react.description
+ t: How you use React on a daily basis
+
+ # tools
+
+ - key: tools.state_management_others
+ t: Other State Management Libraries
+ - key: tools.state_management_happiness
+ t: Happiness
+ - key: tools.state_management_happiness.description
+ t: How happy are you with the available state management libraries?
+
+ - key: tools.data_loading_others
+ t: Other Data Loading Libraries
+ - key: tools.data_loading_happiness
+ t: Happiness
+ - key: tools.data_loading_happiness.description
+ t: How happy are you with the state of data loading libraries?
+
+ - key: tools.ui_libraries_others
+ t: Other UI Libraries
+ - key: tools.ui_libraries_happiness
+ t: Happiness
+ - key: tools.ui_libraries_happiness.description
+ t: How happy are you with the state of UI libraries?
+
+ - key: tools.meta_frameworks_others
+ t: Other Meta-Frameworks
+ - key: tools.meta_frameworks_happiness
+ t: Happiness
+ - key: tools.meta_frameworks_happiness.description
+ t: How happy are you with the current state of meta-frameworks?
+
+ - key: tools.testing_others
+ t: Other Testing Libraries
+ - key: tools.testing_happiness
+ t: Happiness
+ - key: tools.testing_happiness.description
+ t: How happy are you with the current state of testing libraries?
+
+ - key: tools.mobile_development_others
+ t: Other Mobile Development Tools
+ - key: tools.mobile_development_happiness
+ t: Happiness
+ - key: tools.mobile_development_happiness.description
+ t: How happy are you with the current state of mobile development?
+
+ # other tools
+ - key: other_tools.forms.description
+ t: Libraries for generating and validating forms.
+ - key: options.forms.na
+ t: None
+
+ - key: other_tools.build_tools
+ t: Build Tools
+ - key: other_tools.build_tools.description
+ t: Build tools and bundlers.
+
+ - key: other_tools.animation
+ t: Animation
+ - key: other_tools.animation.description
+ t: Libraries to help manage animations and transitions.
+
+ - key: other_tools.auth
+ t: Authentication
+ - key: other_tools.auth.description
+ t: Libraries and services for managing authentication and accounts.
+
+ - key: other_tools.data_visualization
+ t: Data Visualization
+ - key: other_tools.data_visualization.description
+ t: Data visualization and graphics libraries.
+
+ - key: other_tools.css_tools
+ t: CSS Tools & Libraries
+ - key: other_tools.css_tools.description
+ t: CSS libraries, frameworks, and utilities you use to style your React app.
+
+ - key: other_tools.other_frontend_frameworks
+ t: Other Front-end Frameworks
+ - key: other_tools.other_frontend_frameworks.description
+ t: >
+ Other front-end frameworks you either had a positive experience with,
+ or are interested in learning.
+
+ - key: other_tools.hosting
+ t: Hosting Services
+ - key: other_tools.hosting.description
+ t: Services you use to host your React apps.
+
+ - key: other_tools.backend_language
+ t: Back-end Languages
+ - key: other_tools.backend_language.description
+ t: Which language(s) are your back-end apps written in?
+
+ - key: other_tools.other_services
+ t: Other Services
+ - key: other_tools.other_services.description
+ t: Other services you use with your React apps.
+
+ - key: other_tools.validation
+ t: Schema & Validation Libraries
+ - key: other_tools.validation.description
+ t: Libraries for validating data against a schema.
+
+ - key: other_tools.ai_tools
+ t: AI Tools
+ - key: other_tools.ai_tools.description
+ t: AI tools & services you use to help you write React code.
+
+ - key: other_tools.renderers
+ t: React Renderers
+ - key: other_tools.renderers.description
+ t: Libraries that let you render React to different platforms or environments.
+
+ - key: other_tools.other_tools
+ t: Other Tools
+ - key: other_tools.other_tools.description
+ t: Other tools you use to develop React apps.
+
+ # CSS
+ - key: options.css_tools.plain_css
+ t: CSS (plain, “vanilla” CSS)
+
+ # react pain points
+
+ - key: options.react_pain_points.rerenders
+ t: Managing component re-renders
+ - key: options.react_pain_points.testing
+ t: Testing
+ - key: options.react_pain_points.data_loading
+ t: Data loading and async operations
+ - key: options.react_pain_points.state_management
+ t: State management (`useState`, Redux, Context, etc.)
+ - key: options.react_pain_points.bundle_sizes
+ t: Keeping client bundle sizes down
+ - key: options.react_pain_points.server_rendering
+ t: Server-Side Rendering & Server Components
+ - key: options.react_pain_points.css_styling
+ t: CSS & Styling
+ - key: options.react_pain_points.attribute_names
+ t: “Wrong” attribute names such as `className`, `htmlFor`, etc.
+ - key: options.react_pain_points.synthetic_events
+ t: Synthetic events
+ - key: options.react_pain_points.ref_management
+ t: Ref management
+ - key: options.react_pain_points.memoization
+ t: Memoization
+ - key: options.react_pain_points.animations
+ t: Animations & Transitions
+ - key: options.react_pain_points.forms
+ t: Forms
+ - key: options.react_pain_points.typescript
+ t: Lack of official native TypeScript support
+
+ # usage type
+ - key: usage.react_usage_type
+ t: React Usage
+ - key: usage.react_usage_type.description
+ t: In what context do you primarily use React?
+
+ # react version
+
+ - key: usage.react_version
+ t: React Version
+ - key: usage.react_version.description
+ t: Which version of React do you use the most on a daily basis?
+
+ - key: options.react_version.react_v16x
+ t: 16.x
+ - key: options.react_version.react_v17x
+ t: 17.x
+ - key: options.react_version.react_v18x
+ t: 18.x
+ - key: options.react_version.not_sure
+ t: Not sure
+
+ # JS App Patterns
+
+ - key: usage.js_app_patterns
+ t: Application Patterns
+ - key: usage.js_app_patterns.description
+ t: Which of the following architecture and rendering patterns have you used **in the last year**?
+
+ - key: options.js_app_patterns.single_page_app
+ t: Single Page Application (SPA)
+ - key: options.js_app_patterns.single_page_app.description
+ t: Apps that run entirely in the browser
+ - key: options.js_app_patterns.multiple_page_app
+ t: Multi-Page Application (MPA)
+ - key: options.js_app_patterns.multiple_page_app.description
+ t: Apps that run entirely on the server, with minimal client-side dynamic behavior
+ - key: options.js_app_patterns.static_site_generation
+ t: Static Site Generation (SSG)
+ - key: options.js_app_patterns.static_site_generation.description
+ t: Pre-rendered static content, with or without a client-side dynamic element
+ - key: options.js_app_patterns.server_side_rendering
+ t: Server-Side Rendering (SSR)
+ - key: options.js_app_patterns.server_side_rendering.description
+ t: Dynamically rendering HTML content on the server before rehydrating it on the client
+ - key: options.js_app_patterns.partial_hydration
+ t: Partial Hydration
+ - key: options.js_app_patterns.partial_hydration.description
+ t: Only hydrating some of your components on the client (e.g. React Server Components)
+ - key: options.js_app_patterns.progressive_rehydration
+ t: Progressive Hydration
+ - key: options.js_app_patterns.progressive_rehydration.description
+ t: Controlling the order of component hydration on the client
+ - key: options.js_app_patterns.islands_architecture
+ t: Islands Architecture
+ - key: options.js_app_patterns.islands_architecture.description
+ t: Isolated islands of dynamic behavior with multiple entry points in an otherwise static site (Astro, Eleventy)
+ - key: options.js_app_patterns.progressive_enhancement
+ t: Progressive Enhancement
+ - key: options.js_app_patterns.progressive_enhancement.description
+ t: Making sure an app is functional even without JavaScript
+ - key: options.js_app_patterns.incremental_static_generation
+ t: Incremental Static Generation
+ - key: options.js_app_patterns.incremental_static_generation.description
+ t: Being able to dynamically augment or modify a static site even after the initial build (Next.js ISR, Gatsby DSG)
+ - key: options.js_app_patterns.streaming_ssr
+ t: Streaming SSR
+ - key: options.js_app_patterns.streaming_ssr.description
+ t: Breaking down server-rendered content in smaller streamed chunks
+ - key: options.js_app_patterns.resumability
+ t: Resumability
+ - key: options.js_app_patterns.resumability.description
+ t: Serializing framework state on the server so the client can resume execution with no duplicated code execution.
+ - key: options.js_app_patterns.edge_rendering
+ t: Edge Rendering
+ - key: options.js_app_patterns.edge_rendering.description
+ t: Altering rendered HTML at the edge before sending it on to the client
+
+ - key: options.js_app_patterns.micro_frontend
+ t: Micro Frontend
+ - key: options.js_app_patterns.domain_driven_design
+ t: Domain-Driven Design
+ - key: options.js_app_patterns.serverless
+ t: Serverless
+ - key: options.js_app_patterns.pespa
+ t: PESPA
+
+ - key: usage.what_do_you_use_react_for
+ t: What Do You Use React For?
+
+ - key: usage.react_pain_points
+ t: React Pain Points
+
+ - key: usage.state_of_react
+ t: How happy are you with the current state of React?
+
+ # new features
+ - key: usage.new_features
+ t: New Features
+ - key: usage.new_features.description
+ t: Which of these recent and upcoming new features are you most excited about?
+
+ - key: options.new_features.asset_loading
+ t: Asset Loading
+ - key: options.new_features.asset_loading.description
+ t: Fully integrate Suspense with the loading lifecycle of stylesheets, fonts, and images
+ - key: options.new_features.cache.description
+ t: An API to assist with caching data.
+ - key: options.new_features_react_forget.description
+ t: An automatic reactivity compiler for React
+ - key: options.new_features.new_docs
+ t: New Documentation
+ - key: options.new_features.new_docs.description
+ t: React's updated documentation site.
+ - key: options.new_features.offscreen_rendering
+ t: Offscreen Rendering
+ - key: options.new_features_offscreen_rendering.description
+ t: Rendering screens in the background without additional performance overhead.
+ - key: options.new_features.use_hook
+ t: >
+ `use` Hook
+ - key: options.new_features.use_hook.description
+ t: >
+ `use` unwraps the value of a promise, but it can be used inside normal components and Hooks, including on the client.
+
+ - key: options.new_features.transition_tracing
+ t: Transition Tracing
+ - key: options.new_features.transition_tracing.description
+ t: Detect when React Transitions become slower and investigate why they may be slow.
+
+ # what do you use React for?
+ - key: options.what_do_you_use_react_for.static_sites
+ t: Static sites
+ - key: options.what_do_you_use_react_for.design_systems
+ t: Design systems
+ - key: options.what_do_you_use_react_for.web_apps
+ t: Web apps
+ - key: options.what_do_you_use_react_for.mobile_apps
+ t: Mobile apps
+ - key: options.what_do_you_use_react_for.desktop_apps
+ t: Desktop apps
+
+ # resources
+ - key: resources.first_steps_react
+ t: First Steps
+ - key: resources.first_steps_react.description
+ t: Which resources did you use to initially learn React?
diff --git a/surveys.yml b/surveys.yml
index dfdd407..5687e54 100644
--- a/surveys.yml
+++ b/surveys.yml
@@ -8,6 +8,125 @@ translations:
t: Nincseken megjeleníthető kérdőívek
- key: general.global_nav
t: Globális
+ - key: general.survey_status_preview
+ t: Preview
+ - key: general.survey_status_open
+ t: Open
+ - key: general.survey_status_closed
+ t: Closed
+ - key: general.survey_status_hidden
+ t: Hidden
+
+ - key: general.pick_up_to
+ t: Pick up to {limit} items.
+
+ - key: general.privacy_policy
+ t: Privacy Policy
+ - key: general.privacy_policy.description
+ t: >
+ ### 1. Data Collection
+
+ In addition to the data collected through a survey's questions, we collect your device, browser, OS, browser version, and referrer.
+
+ Note that all questions are entirely optional, and we never link any identifiable information (such as email addresses) to your survey answers.
+
+ ### 2. Email Collection
+
+ We may optionally collect your email to:
+
+
+ 1. Generate a magic log-in link, after which we discard your email and only keep a one-way hash in our user database.
+
+ 2. Contact you once survey results are available, as well as when we launch future editions of a survey and for infrequent announcements. You can unsubscribe from our mailing list at any time, and your email is discarded from our records once it is sent to our email newsletter provider.
+
+ 3. Send you a recap list of features or tools you want to learn more about. We will discard your address once the email has been sent out through our transactional email provider.
+
+
+ When we do collect your email address, it is never linked to your responses for a survey, or to your user account.
+
+ ### 3. Cookies
+
+ We set a log-in cookie, and our hosting provider (Vercel) may also sets its own cookie. We do not set any other cookie or use client-side analytics or ads.
+
+ ### 4. Data Use
+
+ We process the data and then use it to publish reports. We also make the entire dataset publicly available.
+
+ ### 5. Data/Account Deletion
+
+ You can email us at [hello@stateofjs.com](mailto:hello@stateofjs.com) if you'd like us to delete all or part of your data.
+
+ ###########################################################################
+ # Other UI Strings
+ ###########################################################################
+
+ - key: textlist.placeholder
+ t: Item {index}…
+
+ - key: feature.unimplemented
+ t: No browser support
+
+ - key: feature.unimplemented.description
+ t: This feature has not yet been implemented in browsers. You can still select “Used it” if you have used it via polyfills, transpilers, or other tools.
+
+ - key: general.skip_question
+ t: Skip
+
+ - key: general.unskip_question
+ t: Answer Question
+
+ - key: general.skip_question.description
+ t: Skip question and mark it as completed
+
+ - key: general.unskip_question.description
+ t: Unskip question and answer it
+
+ ###########################################################################
+ # Errors & Messages
+ ###########################################################################
+
+ - key: error.duplicate_response
+ t: Sorry, you already have a session in progress for this survey.
+
+ - key: error.report_issue
+ t: Report issue
+
+ - key: success.data_saved
+ t: Data Saved
+ - key: success.data_saved.description
+ t: Your data has been saved.
+
+ ###########################################################################
+ # Accounts
+ ###########################################################################
+
+ - key: accounts.create_account
+ t: Continue with Account
+ - key: accounts.create_account.description
+ t: Having an account lets you **access your own data in the future** and be notified when survey results are published.
+ - key: accounts.create_account.note
+ t: If you **already have an account** we will send you a magic log-in link by email.
+ - key: accounts.create_account.action
+ t: Continue with Account
+ - key: accounts.your_email
+ t: Your Email
+
+ - key: accounts.upgrade_account.action
+ t: Upgrade your account
+ - key: accounts.upgrade_account.description
+ t: Upgrading your account with an email address will let you access your survey response after you end your session.
+
+ - key: accounts.continue_as_guest
+ t: Continue as Guest
+ - key: accounts.continue_as_guest.description
+ t: Taking the survey anonymously means you **won't be able to access your data again** after you end your session.
+ - key: accounts.continue_as_guest.action
+ t: Continue as Guest
+
+ - key: accounts.magic_link.no_email
+ t: Please enter your email
+ - key: accounts.magic_link.success
+ t: Check your inbox! We sent you a magic link, just click it to confirm your account and log in.
###########################################################################
# FAQ
@@ -67,6 +186,325 @@ translations:
t: Eredmény
- key: bracket.cancel
t: Kilépés
+ - key: experience.leave_comment
+ t: Leave a Comment (optional)
+ - key: experience.leave_comment_short
+ t: Leave a Comment
+ - key: experience.tell_us_more
+ t: "You answered “{response}”. Tell us more about your choice:"
+ - key: experience.tell_us_more_generic
+ t: "Tell us more about your answer:"
+ - key: experience.tell_us_more_no_value
+ t: "You didn't pick any response. Tell us why:"
+
+ ###########################################################################
+ # Response
+ ###########################################################################
+
+ - key: response.completion
+ t: "{completion}% completed"
+
+ - key: response.details
+ t: Started on {startedAt}, {completion}% completed.
+
+ ###########################################################################
+ # Reading List
+ ###########################################################################
+
+ - key: readinglist.prompt
+ t: >
+ You picked “{option}”. If you'd like to learn more about this feature at the end of the survey, you can click the "+" icon above to add it to your **reading list**.
+
+ - key: readinglist.add_to_list
+ t: Add to Your Reading List
+
+ - key: readinglist.remove_from_list
+ t: Remove from Reading List
+
+ - key: readinglist.added_to_list
+ t: Added “{label}” to your reading list.
+
+ - key: readinglist.title
+ t: Reading List
+
+ - key: readinglist.description
+ t: >
+ Save items here using the "+" button, and you'll get a list of links to learn more about them at the end of the survey.
+
+ - key: readinglist.empty
+ t: >
+ You don't have any items in your reading list.
+ Try going back to the survey and adding features or libraries you'd like
+ to learn more about using the "+" button.
+
+ - key: readinglist.results
+ t: >
+ Here are some resources to learn more about the items in your reading list:
+
+ - key: readinglist.homepage_link
+ t: Homepage
+
+ - key: readinglist.receive_copy
+ t: >
+ Enter your email to get a copy of your reading list straight in your inbox:
+ - key: readinglist.send_by_email
+ t: Send
+ - key: readinglist.email_sent
+ t: Thanks! Your reading list is on its way to your inbox.
+
+ ###########################################################################
+ # Score & Knowledge Ranks
+ ###########################################################################
+
+ - key: knowledge_rank.your_rank
+ t: "Your Rank:"
+ - key: knowledge_rank.rank1
+ t: Novice
+ - key: knowledge_rank.rank2
+ t: Apprentice
+ - key: knowledge_rank.rank3
+ t: Intermediate
+ - key: knowledge_rank.rank4
+ t: Expert
+ - key: knowledge_rank.rank5
+ t: Scholar
+ - key: knowledge_rank.rank6
+ t: Elite
+
+ ###########################################################################
+ # Survey-Specific Intros
+ ###########################################################################
+
+ - key: general.js2020.survey_intro
+ t: |
+ 2020 has been a tough year for everyone, one that makes worrying about the
+ latest JavaScript frameworks seem pretty futile in comparison.
+
+ Still, the world has to move on, and so does JavaScript. And once again, with your help
+ we'll try to build a comprehensive picture of the ecosystem to find out a little bit more
+ about where it's going.
+
+ - key: general.css2021.survey_intro
+ t: |
+ Hey CSS, what have you been up to lately? Oh really, `@container`? Oh and
+ intrinsic sizing? And `@property` too?! Wow, you've been busy!
+
+ Even though the pandemic kept on making everybody's lives harder throughout 2021, somehow
+ dedicated contributors around the world managed to keep CSS moving forward.
+ And so once more it's time to survey the CSS ecosystem and figure out
+ where this is all going. And maybe learn about a few new things while you're at it!
+
+ - key: general.js2021.survey_intro
+ t: |
+ First the 2020 Olympics got pushed back to 2021,
+ and now the 2021 State of JavaScript survey is happening now, in 2022!
+
+ It's true: between work, family, and and all the turmoil in the world,
+ some things got disrupted a little.
+
+ But while the year may be off-by-one, we hope the data provided by the
+ survey itself will be just as informative and insightful as ever.
+ And don't worry, there will be another survey towards the end of this year to set things straight again!
+
+ - key: general.graphql2022.survey_intro
+ t: |
+ When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility.
+
+ But that flexibility came at a price in the form of extra complexity, and a crop of frameworks, libraries, and services quickly appeared to help define better patterns and workflows.
+
+ Now, for the first time ever we're surveying the GraphQL community to figure out which of these many tools are the most popular, and which features are actually being used. With your help, let's see what GraphQL has been up to in 2022!
+
+ - key: general.css2022.survey_intro
+ t: |
+ CSS keeps progressing at an unprecedented rate. Luckily this year we got help from someone at the forefront of all these changes: [Lea Verou](https://lea.verou.me/) took the lead on selecting this year's questions, with a special focus on highlighting new and upcoming CSS features.
+
+ What's more, the survey results will also help browser vendors prioritize their roadmaps and work towards better compatibility between browsers.
+
+ With all this out of the way, let's see how CSS evolved in 2022!
+
+ - key: general.js2022.survey_intro
+ t: |
+ For the first time in a while, it feels like the status quo of the JavaScript ecosystem is being questioned.
+
+ Faster bundling with Vite, island architecture with Astro, resumability with Qwik… New entrants are challenging the old guard, and the result is a lot more excitement, but also
+ a lot more uncertainty.
+
+ So once more, let's try and figure out together where JavaScript is going, in 2022 and beyond.
+
+ - key: general.css2023.survey_intro
+ t: |
+ To help you keep up with `:has()`, `@container`, and all the other new CSS features, we're introducing a new feature of our own this year: the **Reading List**.
+
+ As you take the survey, you'll be able to bookmark any feature you want and learn more about it after you submit your answers.
+
+ This year [Chen Hui Jing](https://chenhuijing.com/) took the lead of the survey design process, building on the work done by [Lea Verou](https://lea.verou.me/) last year. And as usual, your feedback here will play a key role in helping browser vendors prioritize their roadmaps and work towards better compatibility between browsers.
+
+ With all this out of the way, let's see how CSS has evolved so far in 2023!
+
+ # Intro for actual survey page
+ - key: general.html2023.survey_intro
+ t: |
+ While web developers tend to focus on JavaScript and CSS, none of what we do would be possible without HTML acting as the foundation.
+
+ It has long seemed like HTML wasn't evolving, but things may be changing.
+ New elements like `` are on the horizon, cool new features like popovers,
+ and a swath of related browser APIs (Web Components, PWAs, etc.).
+
+ This year, [Lea Verou](https://lea.verou.me/) took on the formidable task of leading the design of this brand new survey, from content to UX and beyond.
+
+ Building on the success of [State of JS](http://stateofjs.com/) and [State of CSS](https://stateofcss.com/), we introduce **State of HTML**;
+ the last missing piece that completes the trilogy, so we can track the evolution of the web platform as a whole.
+
+ Benefits to you:
+ - Survey results are **used by browsers** and standards groups **for roadmap prioritization**.
+ Your responses can help get features you care about implemented, browser incompatibilities being prioritized, and gaps in the platform being addressed.
+ - Learn about new and upcoming features; add features to your reading list and get a list of resources at the end!
+ - Get a personalized knowledge score and see how you compare to other respondents
+
+ The survey will be open for 3 weeks, but responses entered **within the first 9 days (until October 1st)** will have a much higher impact on the Web,
+ as preliminary data will be used for certain prioritization efforts that have deadlines before then.
+
+ ###########################################################################
+ # Survey-Specific FAQs
+ ###########################################################################
+
+ # CSS
+
+ - key: faq.data_used_css
+ t: How will this data be used?
+ - key: faq.data_used_css.description
+ t: >
+ All data collected will be released openly for any developer or company to consult.
+ Browser vendors also [use this data](https://web.dev/interop-2023/) to prioritize focus areas and inform their roadmaps.
+
+ - key: faq.who_should_take_survey_css
+ t: Who should take this survey?
+ - key: faq.who_should_take_survey_css.description
+ t: >
+ This is an open survey for anybody who writes CSS, whether regularly
+ or occasionally, as part of their job, as a student, or just for fun!
+
+ - key: faq.survey_goals_css
+ t: What is the survey's goal?
+ - key: faq.survey_goals_css.description
+ t: >
+ The survey's goal is to track the evolution of upcoming features and libraries,
+ and help developers decide which new technologies to focus on.
+
+ # CSS 2022
+
+ - key: faq.learn_more_css2022
+ t: Where can I learn more?
+ - key: faq.learn_more_css2022.description
+ t: You can learn more about [last year's survey here](https://2021.stateofcss.com/en-US/about/).
+
+ - key: faq.survey_design_css2022
+ t: How was this survey designed?
+ - key: faq.survey_design_css2022.description
+ t: This year, thanks to a grant from Google's [UI Fund](https://web.dev/ui-fund/), [Lea Verou](https://lea.verou.me/) was able to take the lead and managed the [open survey design process](https://github.com/orgs/Devographics/projects/1/views/1) on GitHub.
+
+ - key: faq.results_released_css2022
+ t: When will the results be released?
+ - key: faq.results_released_css2022.description
+ t: The survey will run until the end of October 2022, and the survey results will be released in early November.
+
+ - key: faq.data_used_css2022
+ t: How will this data be used?
+ - key: faq.data_used_css2022.description
+ t: All data collected will be released publicly. It will then become a resources both for developers, who consult it to inform their technological choices, and browser vendors, who use it to prioritize focus areas and inform their roadmaps.
+
+ # CSS 2023
+
+ - key: faq.how_long_will_survey_take_css2023
+ t: How long will answering the survey take?
+ - key: faq.how_long_will_survey_take_css2023.description
+ t: >
+ Depending on how many questions you answer (all questions can be skipped),
+ filling out the survey should take around 10-15 minutes.
+
+ - key: faq.learn_more_css2023
+ t: Where can I learn more?
+ - key: faq.learn_more_css2023.description
+ t: You can learn more about this survey in [our announcement post](https://dev.to/sachagreif/the-2023-state-of-css-survey-is-now-open-18bk).
+
+ - key: faq.survey_design_css2023
+ t: How was this survey designed?
+ - key: faq.survey_design_css2023.description
+ t: >
+ This year, thanks to a grant from Google's [UI Fund](https://web.dev/ui-fund/),
+ [Chen Hui Jing](https://chenhuijing.com/) was able to help manage the survey's [open design process](https://github.com/Devographics/surveys/issues/84).
+
+ - key: faq.results_released_css2023
+ t: When will the results be released?
+ - key: faq.results_released_css2023.description
+ t: The survey will run until July 15, 2023, and the survey results will be released in the following weeks.
+
+ # JS 2022
+
+ - key: faq.learn_more_js2022
+ t: Where can I learn more?
+ - key: faq.learn_more_js2022.description
+ t: You can learn more about [last year's survey here](https://2021.stateofjs.com/en-US/about/).
+
+ # - key: faq.survey_design_js2022
+ # t: How was this survey designed?
+ # - key: faq.survey_design_css2022.description
+ # t: This year, thanks to a grant from Google's [UI Fund](https://web.dev/ui-fund/), [Lea Verou](https://lea.verou.me/) was able to take the lead and managed the [open survey design process](https://github.com/orgs/Devographics/projects/1/views/1) on GitHub.
+
+ - key: faq.results_released_js2022
+ t: When will the results be released?
+ - key: faq.results_released_js2022.description
+ t: The survey will run until December 15, 2022, and the survey results will be released shortly afterwards.
+
+ - key: faq.data_used_js2022
+ t: How will this data be used?
+ - key: faq.data_used_js2022.description
+ t: All data collected will be released publicly. It will then become a resources both for developers, who consult it to inform their technological choices, and browser vendors, who use it to prioritize focus areas and inform their roadmaps.
+
+ # HTML 2023
+
+ - key: faq.data_used_html2023
+ t: How will this data be used?
+ - key: faq.data_used_html2023.description
+ t: >
+ All data collected will be released openly for any developer or company to consult.
+ Browser vendors also [use this data](https://web.dev/interop-2023/) to prioritize focus areas and inform their roadmaps.
+
+ - key: faq.survey_goals_html2023
+ t: What are the survey's goals?
+ - key: faq.survey_goals_html2023.description
+ t: >
+ The survey's goals are to measure awareness of new HTML features and browser APIs, and help developers keep track of how their usage is evolving.
+
+ - key: faq.who_should_take_survey_html2023
+ t: Who should take this survey?
+ - key: faq.who_should_take_survey_html2023.description
+ t: >
+ This is an open survey for anybody who makes websites or web apps, whether regularly or occasionally, as part of their job, as a student, or just for fun!
+
+ - key: faq.how_long_will_survey_take_html2023
+ t: How long will answering the survey take?
+ - key: faq.how_long_will_survey_take_html2023.description
+ t: >
+ Depending on how many questions you answer (all questions are optional),
+ filling out the survey should take around 15-20 minutes.
+
+ - key: faq.learn_more_html2023
+ t: Where can I learn more?
+ - key: faq.learn_more_html2023.description
+ t: You can learn more about this survey in [our announcement post](https://lea.verou.me/blog/2023/design-state-of-html/).
+
+ - key: faq.survey_design_html2023
+ t: How was this survey designed?
+ - key: faq.survey_design_html2023.description
+ t: >
+ The survey was designed by [Lea Verou](https://lea.verou.me), with input from browser vendors as well as groups such as the [WebDX Community Group](https://www.w3.org/community/webdx/).
+
+ - key: faq.results_released_html2023
+ t: When will the results be released?
+ - key: faq.results_released_html2023.description
+ t: The survey will run from September 19 to October 10, and the survey results will be released shortly after that.
+
###########################################################################
# Demographics (About You/User Info)